yudao-ui-saas/src/views/finance/contract/supplier/data.vue

<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="dataList" >
      <el-table-column label="合同编号" align="center" prop="supplierContractCode" min-width="350">
      </el-table-column>
      <el-table-column label="合同名称" align="center" prop="supplierContractName" min-width="150" />
      <el-table-column label="是否框架合同" align="center" prop="isFrameContractDesc" min-width="100" />
      <el-table-column label="供应商" align="center" prop="supplierName" min-width="150" />
      <el-table-column label="合同开始日期" align="center" prop="startDate" min-width="100" />
      <el-table-column label="合同结束日期" align="center" prop="endDate" min-width="100" />
      <el-table-column label="合同金额" align="center" prop="money" min-width="100" />
      <el-table-column label="负责人" align="center" prop="ownerEmployeeName" min-width="100" />
      <el-table-column label="所属部门" align="center" prop="deptName" min-width="100"/>

      <el-table-column label="状态" align="center" prop="contractStatusDesc" min-width="100"/>
      <el-table-column label="是否关闭" align="center" prop="closedDesc" min-width="100"/>
      <el-table-column label="是否终止" align="center" prop="terminateDesc" min-width="100"/>

      <el-table-column label="创建人" align="center" prop="creatorName" min-width="100" />
      <el-table-column label="创建时间" align="center" prop="createTime" min-width="150">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template v-slot="scope">
          <el-button size="mini" type="text" icon="el-icon-detail" @click="handleDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>
     <!-- 详情对话框 -->
     <el-dialog :title="title" :visible.sync="openDetail" width="800px" append-to-body>
      <div class="widget-wrapper">
        <div class="widget-list">
          <div class="fx-field x-grid-col-12">
            <div class="field-label">
              <span class="field-required">*</span>
              <div class="field-name">合同编号</div>
            </div>
            <div class="field-component">
              <span :title="form.supplierContractCode">{{ form.supplierContractCode }}</span>
            </div>
          </div>
          <div class="fx-field x-grid-col-12">
            <div class="field-label">
              <span class="field-required">*</span>
              <div class="field-name">合同名称</div>
            </div>
            <div class="field-component">
              <span :title="form.supplierContractName">{{ form.supplierContractName }}</span>
            </div>
          </div>
          <div class="fx-field x-grid-col-12">
            <div class="field-label">
              <span class="field-required">*</span>
              <div class="field-name">框架合同</div>
            </div>
            <div class="field-component">
              <span :title="form.isFrameContractDesc">{{ form.isFrameContractDesc }}</span>
            </div>
          </div>
          <div class="fx-field x-grid-col-12">
            <div class="field-label">
              <span class="field-required">*</span>
              <div class="field-name">供应商</div>
            </div>
            <div class="field-component">
              <span :title="form.supplierName">{{ form.supplierName }}</span>
            </div>
          </div>


          <div class="fx-field x-grid-col-12">
            <div class="field-label">
              <span class="field-required">*</span>
              <div class="field-name">开始日期</div>
            </div>
            <div class="field-component">
              <span :title="form.startDate">{{ form.startDate }}</span>
            </div>
          </div>
          <div class="fx-field x-grid-col-12">
            <div class="field-label">
              <span class="field-required">*</span>
              <div class="field-name">结束日期</div>
            </div>
            <div class="field-component">
              <span :title="form.endDate">{{ form.endDate }}</span>
            </div>
          </div>

          <div class="fx-field x-grid-col-12">
            <div class="field-label">
              <span class="field-required">*</span>
              <div class="field-name">合同金额</div>
            </div>
            <div class="field-component">
              <span :title="form.money">{{ form.money }}</span>
            </div>
          </div>
          <div class="fx-field x-grid-col-12">
            <div class="field-label">
              <span class="field-required">*</span>
              <div class="field-name">负责人</div>
            </div>
            <div class="field-component">
              <span :title="form.ownerEmployeeName">{{ form.ownerEmployeeName }}</span>
            </div>
          </div>
          <div class="fx-field x-grid-col-12">
            <div class="field-label">
              <div class="field-name">所属部门</div>
            </div>
            <div class="field-component">
              <span :title="form.deptName">{{ form.deptName }}</span>
            </div>
          </div>

          <div class="fx-field x-grid-col-12">
            <div class="field-label">
              <div class="field-name">附件</div>
            </div>
            <div class="field-component">
              <div v-for="(item, index) in form.fileList" :key="index">
                <a :href="item.url" target="_blank" :title="item.name" style="color: #5094d5;">{{ item.name }}</a>
              </div>
            </div>

          </div>
          <div class="fx-field x-grid-col-12">
            <div class="field-label">
              <div class="field-name">备注</div>
            </div>
            <div class="field-component">
              <span :title="form.remarks">{{ form.remarks }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listHistoryData, getHistoryData, } from "@/api/finance/contract/supplier";

export default {
  name: "SystemDictData",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 总条数
      total: 0,
      // 字典表格数据
      dataList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      openDetail: false,
      // 表单参数
      form: {},
      queryParams : {
        pageNo: 1,
        pageSize: 10,
        code: ''
      },
    };
  },
  created() {
    const dataId = this.$route.params && this.$route.params.id;
    this.getList(dataId);
  },
  methods: {
    /** 查询字典数据列表 */
    getList(dataId) {
      this.queryParams.code = dataId;
      this.loading = true;
      listHistoryData(this.queryParams).then(response => {
        this.dataList = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
     /** 详情按钮操作 */
     handleDetail(row) {
      const id = row.id;
      getHistoryData(id).then(response => {
        this.form = response.data;
        this.openDetail = true;
        this.title = "详情";
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.widget-wrapper>.widget-list {
  display: flex;
  flex-wrap: wrap;
}

.x-grid-col-6 {
  width: 50%;
}

.x-grid-col-12 {
  width: 100%;
}

.fx-field {
  line-height: 20px;
  padding: 7px 12px 12px;
  postId: relative;
}

.fx-field .field-label {
  word-wrap: break-word;
  color: #141e31;
  display: flex;
  font-weight: 600;
  line-height: 20px;
  padding: 5px 0;
  position: relative;
  word-break: break-word;
}

.fx-field .field-label .field-required {
  color: #eb5050;
  margin-left: -6px;
  position: relative;
}

.fx-field .field-label .field-name {
  overflow: hidden;
}

.field-component {
  word-wrap: break-word;
  background: #f5f6f8;
  border-radius: 2px;
  color: #141e31;
  font-size: 14px;
  line-height: 20px;
  min-height: 32px;
  padding: 6px 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

ul {
  padding-left: 0px !important;
}

.el-tag+.el-tag {
  margin-left: 10px;
}
</style>