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

<script>
import { Columns, TabColumns } from "../add/column";
import { item, itemTableList } from "@/api/business/purchase/contract";
import { initColumns, initDicts, initRules, initParams } from "@/utils/init";

const NewColumns = initColumns(Columns, { disabled: true, readonly: true });
const NewTabColumns = TabColumns.map((element) => ({
  ...element,
  tableColumns: initColumns(element.tableColumns, {
    disabled: true,
    readonly: true,
  }),
}));

export default {
  name: "SeeDrawer",
  dicts: initDicts(NewColumns),
  data() {
    return {
      visible: false,
      loading: false,
      columns: NewColumns,
      rules: initRules(NewColumns),
      params: {
        ...initParams(NewColumns),
        contractItemList: [],
        contractClauseList: [],
        contractExpenseList: [],
        contractAgreementList: [],
        contractApplyOrgList: [],
      },

      tabColumns: NewTabColumns,
      tabName: "contractItemList",
    };
  },
  computed: {},
  watch: {
    "params.contractType": function (newProp) {
      this.tabColumns = NewTabColumns.filter((element) =>
        newProp === "1" ? element.key !== "contractItemList" : element
      );
      this.tabName = this.tabColumns[0].key;
    },
    tabName: function (newProp) {
      const { id } = this.params;
      this.fetchTable(id, newProp);
    },
  },
  methods: {
    setVisible(prop) {
      this.visible = prop;
    },
    // 查询详细
    async fetchItem(prop) {
      try {
        this.loading = true;
        const { code, msg, data } = await item(prop);
        if (code === 200) {
          this.params = data;
          this.$notify.success({ title: msg });
        } else {
          this.$notify.warning({ title: msg });
        }
      } catch (err) {
        //
      } finally {
        this.loading = false;
      }
    },
    // 查询详情关联TABLE
    async fetchTable(prop, name) {
      try {
        this.loading = true;
        const { code, msg, rows } = await itemTableList({ id: prop }, name);
        if (code === 200) {
          this.params[name] = rows;
          this.$notify.success({ title: msg });
        } else {
          this.$notify.warning({ title: msg });
        }
      } catch (err) {
        //
      } finally {
        this.loading = false;
      }
    },
    // 取消操作
    handleCancel() {
      this.setVisible(false);
      this.params = initParams(Columns);
    },
    // 编辑操作
    handleOpenEditDrawer(prop) {
      this.setVisible(false);
      this.$parent.$parent.handleOpenEditDrawer(prop);
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
};
</script>
<template>
  <el-drawer
    direction="btt"
    size="100%"
    :with-header="false"
    :visible.sync="visible"
    destroy-on-close
  >
    <el-form
      v-loading="loading"
      size="mini"
      label-position="right"
      label-width="135px"
      :model="params"
      :rules="rules"
    >
      <el-card
        :body-style="{
          padding: '20px',
          display: 'flex',
          'flex-wrap': 'wrap',
        }"
        style="margin: 10px"
      >
        <div
          slot="header"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <h3>查看</h3>
          <div style="text-align: right">
            <el-button size="mini" @click="handleOpenEditDrawer(params)"
              >编 辑</el-button
            >
            <el-button size="mini" @click="handleCancel">取 消</el-button>
          </div>
        </div>
        <el-row>
          <el-col
            v-for="(column, index) in columns"
            :key="index"
            :span="column.span || 6"
          >
            <el-form-item :prop="column.key" :label="column.title">
              <el-input
                v-if="column.type === 'Textarea'"
                v-model="params[column.key]"
                type="textarea"
                :placeholder="column.placeholder"
                :clearable="column.clearable"
                :disabled="column.disabled"
                :readonly="column.readonly"
                style="width: 100%"
              ></el-input>
              <el-input-number
                v-else-if="column.type === 'InputNumber'"
                v-model="params[column.key]"
                :controls-position="column.config.controlsPosition"
                :placeholder="column.placeholder"
                :clearable="column.clearable"
                :disabled="column.disabled"
                :readonly="column.readonly"
                style="width: 100%"
              ></el-input-number>
              <el-select
                v-else-if="column.type === 'Select'"
                v-model="params[column.key]"
                :placeholder="column.placeholder"
                :clearable="column.clearable"
                :disabled="column.disabled"
                :readonly="column.readonly"
                style="width: 100%"
              >
                <el-option
                  v-for="item in dict.type[column.config.optionsName]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-date-picker
                v-else-if="column.type === 'DatePicker'"
                v-model="params[column.key]"
                :type="column.config.type"
                :placeholder="column.placeholder"
                :clearable="column.clearable"
                :disabled="column.disabled"
                :readonly="column.readonly"
                :picker-options="column.pickerOptions"
                style="width: 100%"
              >
              </el-date-picker>
              <el-upload
                v-else-if="column.type === 'Upload'"
                :file-list="params[column.key]"
                :disabled="column.disabled"
                :readonly="column.readonly"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
              <el-input
                v-else
                v-model="params[column.key]"
                :placeholder="column.placeholder"
                :clearable="column.clearable"
                :disabled="column.disabled"
                :readonly="column.readonly"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card
        :body-style="{
          padding: '20px',
          display: 'flex',
          'flex-wrap': 'wrap',
          position: 'relative',
        }"
        style="margin: 10px"
      >
        <el-tabs v-model="tabName" style="width: 100%">
          <el-tab-pane
            v-for="(column, index) in tabColumns"
            :key="index"
            :label="column.title"
            :name="column.key"
          >
            <el-table :data="params[column.key]" style="width: 100%">
              <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">
                  <el-tag v-if="cColumn.key === 'index'">
                    {{ scope.$index + 1 }}
                  </el-tag>
                  <el-input
                    v-if="cColumn.type === 'Input'"
                    v-model="scope.row[cColumn.key]"
                    :placeholder="cColumn.placeholder"
                    :clearable="cColumn.clearable"
                    :disabled="cColumn.disabled"
                    size="mini"
                    style="width: 100%"
                  ></el-input>
                  <el-input-number
                    v-if="cColumn.type === 'InputNumber'"
                    v-model="scope.row[cColumn.key]"
                    :controls-position="cColumn.config.controlsPosition"
                    :placeholder="cColumn.placeholder"
                    :clearable="cColumn.clearable"
                    :disabled="cColumn.disabled"
                    size="mini"
                    style="width: 100%"
                  ></el-input-number>
                  <el-input
                    v-if="column.type === 'InputDialog'"
                    v-model="params[column.key]"
                    :placeholder="column.placeholder"
                    :clearable="column.clearable"
                    :disabled="column.disabled"
                    :readonly="column.readonly"
                    style="width: 100%; cursor: pointer"
                    @click.native.stop="openAsyncInputDialog(column, params)"
                  >
                    <template #suffix>
                      <el-icon class="el-icon-thumb"></el-icon>
                    </template>
                  </el-input>
                </template>
              </el-table-column>
              <!-- <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="
                      delTableRow(params[tabName], scope.$index)
                    "
                    type="text"
                    size="small"
                  >
                    删行
                  </el-button>
                </template>
              </el-table-column> -->
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <!-- <el-row style="position: absolute; top: 20px; right: 20px">
          <el-button size="mini" @click="addTableRow(params[tabName])"
            >增行</el-button
          >
        </el-row> -->
      </el-card>
    </el-form>
  </el-drawer>
</template>