drp-ui/src/views/purchase/contract/see/index.vue

<script>
import { Columns, TabColumns } from "../column";
import { initDicts, initParams } from "@/utils/init";
import { ITEM, TABLELIST } from "@/api/business/purchase/contract";

export default {
  name: "SeeDialog",
  dicts: Array.from(
    new Set([
      ...initDicts(Columns),
      ...initDicts(TabColumns.map((item) => item.tableColumns))
        .flat()
        .filter((cItem) => cItem.inputType === "Select"),
    ])
  ),
  data() {
    return {
      size: "mini",
      title: "明细",
      width: "100%",
      column: 3,
      visible: false,
      loading: false,
      columns: Columns,
      params: {
        ...initParams(Columns),
        contractItemList: [],
        contractClauseList: [],
        contractExpenseList: [],
        contractApplyOrgList: [],
        contractAgreementList: [],
      },
      tabColumns: TabColumns,
      tabName: "contractItemList",
    };
  },
  computed: {},
  watch: {},
  methods: {
    //
    setFileList(prop) {
      return prop.split(";").map((file) => ({
        url: file,
        name: file.split("/")[file.split("/").length - 1],
      }));
    },
    //
    open(prop) {
      this.visible = true;
      this.fetchItem(prop);
    },
    // 查 询
    async fetchItem(prop) {
      try {
        this.loading = true;
        const { code, data } = await ITEM(prop);
        if (code === 200) {
          this.params = data;
          this.tabName = this.tabColumns[0].key;
        } else {
          this.$notify.warning({ title: msg });
        }
      } catch (err) {
        // catch
      } finally {
        // finally
        this.loading = false;
      }
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
};
</script>
<template>
  <el-drawer :visible.sync="visible" :size="width" :title="title">
    <el-descriptions border :size="size" :column="column" style="margin: 10px">
      <el-descriptions-item
        v-if="params[column.key]"
        v-for="(column, index) in columns"
        :key="index"
        :label="column.title"
        :labelStyle="{ width: '150px' }"
        :contentStyle="{ width: 'auto' }"
      >
        <dict-tag
          v-if="column.inputType === 'Select'"
          :size="size"
          :value="params[column.key]"
          :options="dict.type[column.referName]"
        />
        <span v-else-if="column.inputType === 'Upload'">
          <dr-file-tag v-model="params[column.key]"></dr-file-tag>
        </span>
        <span v-else>{{ params[column.key] }}</span>
      </el-descriptions-item>
    </el-descriptions>
    <el-tabs
      v-model="tabName"
      :size="size"
      tab-position="top"
      style="margin: 10px"
    >
      <el-tab-pane
        v-for="(column, index) in tabColumns"
        :key="index"
        :name="column.key"
        :label="column.title"
        lazy
      >
        <el-table :size="size" :data="params[column.key]">
          <el-table-column
            v-for="(cColumn, cIndex) in column.tableColumns"
            :key="cIndex"
            :prop="cColumn.key"
            :label="cColumn.title"
            :width="cColumn.width"
          >
            <template slot-scope="scope">
              <dict-tag
                v-if="cColumn.inputType === 'Select'"
                :size="size"
                :value="scope.row[cColumn.key]"
                :options="dict.type[cColumn.referName]"
              />
              <span v-else>{{ scope.row[cColumn.key] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>