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

<script>
import Column from "../add/column";
import useData from "../hooks/data";
import useDicts from "../hooks/dicts";
import useMethods from "../hooks/function";

export default {
  name: "SeeDrawer",
  dicts: useDicts(Column),
  components: {},
  data() {
    return {
      column: 3,
      title: "明 细",
      ...useData(Column),
    };
  },
  computed: {
    hasPowerEdit: function () {
      return this.$parent.$parent.hasPowerEdit;
    },
    hasPowerDelete: function () {
      return this.$parent.$parent.hasPowerDelete;
    },
    hasPowerAlteration: function () {
      return this.$parent.$parent.hasPowerAlteration;
    },
    hasPowerPigeonhole: function () {
      return this.$parent.$parent.hasPowerPigeonhole;
    },
    hasPowerTermination: function () {
      return this.$parent.$parent.hasPowerTermination;
    },
  },
  watch: {},
  methods: {
    //
    async open(prop) {
      const { open, fetchItem } = useMethods();
      await open({ _this: this });
      await fetchItem({ _this: this, prop });
    },
    //
    async hide() {
      const { hide } = useMethods();
      await hide({ _this: this });
    },
    //
    async useEdit(prop) {
      const { useEdit } = this.$parent.$parent;
      await useEdit(prop);
    },
    //
    async useDelete(prop) {
      const { useDelete } = this.$parent.$parent;
      await useDelete(prop);
    },
    //
    async useTermination(prop) {
      const { useTermination } = this.$parent.$parent;
      await useTermination(prop);
    },
    //
    async usePigeonhole(prop) {
      const { usePigeonhole } = this.$parent.$parent;
      await usePigeonhole(prop);
    },
    //
    async useAlteration(prop) {
      const { useAlteration } = this.$parent.$parent;
      await useAlteration(prop);
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
};
</script>
<template>
  <el-drawer
    :size="width"
    :title="title"
    :show-close="false"
    :visible.sync="visible"
  >
    <template slot="title">
      <span>{{ title }}</span>
      <span>
        <el-button
          :size="size"
          circle
          icon="el-icon-close"
          @click="hide"
        ></el-button>
        <el-tooltip
          v-if="hasPowerDelete([params])"
          effect="dark"
          content="删 除"
          placement="bottom-end"
        >
          <el-button
            :size="size"
            circle
            icon="el-icon-delete"
            @click="useDelete([params])"
          ></el-button>
        </el-tooltip>
        <el-tooltip
          v-if="hasPowerEdit([params])"
          effect="dark"
          content="编 辑"
          placement="bottom-end"
        >
          <el-button
            :size="size"
            circle
            icon="el-icon-edit"
            @click="useEdit([params])"
          ></el-button>
        </el-tooltip>
        <el-tooltip
          v-if="hasPowerTermination([params])"
          effect="dark"
          content="终 止"
          placement="bottom-end"
        >
          <el-button
            :size="size"
            circle
            icon="el-icon-light-rain"
            @click="useTermination([params])"
          ></el-button>
        </el-tooltip>
        <el-tooltip
          v-if="hasPowerPigeonhole([params])"
          effect="dark"
          content="归 档"
          placement="bottom-end"
        >
          <el-button
            :size="size"
            circle
            icon="el-icon-lightning"
            @click="usePigeonhole([params])"
          ></el-button>
        </el-tooltip>
        <el-tooltip
          v-if="hasPowerAlteration([params])"
          effect="dark"
          content="变 更"
          placement="bottom-end"
        >
          <el-button
            :size="size"
            circle
            icon="el-icon-heavy-rain"
            @click="useAlteration([params])"
          ></el-button>
        </el-tooltip>
      </span>
    </template>
    <el-descriptions :size="size" :column="column" border style="margin: 10px">
      <el-descriptions-item
        v-if="params[column.key]"
        v-for="(column, index) in formColumns"
        :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-preview v-model="params[column.key]"></dr-file-preview>
        </span>
        <span v-else>{{ params[column.key] }}</span>
      </el-descriptions-item>
    </el-descriptions>
    <el-tabs v-model="tabName" :size="size" 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>