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

<!-- 采购订单修订—— 查看 -->
<script>
import {
  initColumns,
  initDicts,
  initRules,
  initParams,
} from "@/utils/init";
import { Columns, TabColumns } from "../add/column";
import orderApi from "@/api/business/purchase/purchase-order";

const NewColumns = initColumns(Columns);
const NewTabColumns = TabColumns.map((element) => ({
  ...element,
  tableColumns: initColumns(element.tableColumns),
}));
// 
const SelectColumns = NewColumns.filter(column => column.inputType === 'Select')
NewTabColumns.forEach(column => {
  SelectColumns.push(...column.tableColumns.filter(cColumn => cColumn.inputType === 'Select'))
});


export default {
  name: "SeePurchaseOrderDrawer",
  dicts: initDicts(SelectColumns),
  data() {
    return {
      visible: false,
      columns: NewColumns,
      rules: initRules(NewColumns),
      params: {
        ...initParams(NewColumns),
        puOrderItemList: [],
        puOrderExecuteList: [],
      },

      tabColumns: NewTabColumns,
      tabName: "puOrderItemList",
    };
  },
  computed: {},
  watch: {},
  methods: {
    setVisible(prop) {
      this.visible = prop;
    },

    //查询详情
    async fetchItem(prop) {
      try {
        this.loading = true;
        const { code, msg, data } = await orderApi.details(prop);
        if (code === 200) {
          this.params = data;
        } 
      } catch (err) {
        //
      } finally {
        this.loading = false;
      }
    },
    // 取 消
    handleCancel() {
      this.setVisible(false);
      this.params = initParams(Columns);
    },
    beforeOpen() { },
  },
  created() { },
  mounted() { },
  destroyed() { },
};
</script>
<template>
  <el-drawer direction="btt" size="100%" :with-header="false" :visible.sync="visible" @open="beforeOpen"
    @close="$emit('close')">
    <el-form size="mini" label-position="right" label-width="140px" :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="handleCancel">取 消</el-button>
          </div>
        </div>
        <el-row style="display:flex; flex-wrap: wrap;">
          <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.inputType === 'Input'" v-model="params[column.key]" :placeholder="column.placeholder"
                :clearable="column.clearable" readonly style="width: 100%">
              </el-input>
              <dr-popover-select v-if="column.inputType === 'PopoverSelect'" v-model="params[column.key]" disabled
                :value-key="column.valueKey" :source.sync="params" :title="column.title" :type="column.referName"
                :multiple="column.multiple" :placeholder="column.placeholder" :data-mapping="column.dataMapping"
                :query-params="column.queryParams(params)">
              </dr-popover-select>

              <el-input v-if="column.inputType === 'Textarea'" v-model="params[column.key]" type="textarea"
                :placeholder="column.placeholder" :clearable="column.clearable" readonly style="width: 100%">
              </el-input>

              <el-input-number v-if="column.inputType === 'InputNumber'" v-model="params[column.key]"
                :controls-position="column.controlsPosition" :placeholder="column.placeholder"
                :clearable="column.clearable" disabled style="width: 100%">
              </el-input-number>
              <el-select v-if="column.inputType === 'Select'" v-model="params[column.key]" disabled size="mini"
                :clearable="column.clearable" :placeholder="column.placeholder" style="width: 100%">
                <el-option v-for="item in dict.type[column.referName]" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-select v-if="column.inputType === 'TagSelect'" v-model="params[column.key]" multiple clearable
                collapse-tags :placeholder="column.placeholder" :clearable="column.clearable" disabled
                style="width: 100%">
                <template #prefix>
                  <el-icon class="el-icon-view" style="cursor: pointer" @click.stop="$message.info(234)"></el-icon>
                </template>
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <el-date-picker v-if="column.inputType === 'DatePicker'" v-model="params[column.key]" :type="column.type"
                :placeholder="column.placeholder" :clearable="column.clearable" readonly
                :picker-options="column.pickerOptions" style="width: 100%">
              </el-date-picker>
              <el-checkbox v-if="column.inputType === 'Checkbox'" v-model="params[column.key]" disabled true-label="Y"
                false-label="N">
              </el-checkbox>
              <el-upload v-if="column.inputType === 'Upload'" :file-list="params[column.key]" disabled 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-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 || 80">
                <template slot-scope="scope">
                  <el-tag v-if="cColumn.key === 'index'">
                    {{ scope.$index + 1 }}
                  </el-tag>
                  <el-input v-if="cColumn.inputType === 'Input'" v-model="scope.row[cColumn.key]"
                    :placeholder="cColumn.placeholder" :clearable="cColumn.clearable" readonly size="mini"
                    style="width: 100%"></el-input>

                  <!--  -->
                  <dr-popover-select v-if="cColumn.inputType === 'PopoverSelect'" v-model="scope.row[cColumn.key]"
                    :source.sync="scope.row" :title="cColumn.title" :value-key="cColumn.valueKey" disabled
                    :type="cColumn.referName" :multiple="cColumn.multiple" :placeholder="cColumn.placeholder"
                    :data-mapping="cColumn.dataMapping" :query-params="cColumn.queryParams(scope.row)" size="mini">
                  </dr-popover-select>

                  <el-input-number v-if="cColumn.inputType === 'InputNumber'" v-model="scope.row[cColumn.key]"
                    :controls-position="cColumn.controlsPosition" :placeholder="cColumn.placeholder"
                    :clearable="cColumn.clearable" disabled size="mini" style="width: 100%">
                  </el-input-number>

                  <el-select v-if="cColumn.inputType === 'Select'" v-model="scope.row[cColumn.key]" disabled size="mini"
                    :clearable="cColumn.clearable" :placeholder="cColumn.placeholder" style="width: 100%">
                    <el-option v-for="item in dict.type[cColumn.referName]" :key="item.value" :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>

                  <el-checkbox v-if="cColumn.inputType === 'Checkbox'" v-model="scope.row[cColumn.key]" disabled
                    true-label="Y" false-label="N">
                  </el-checkbox>

                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-card>

    </el-form>
  </el-drawer>
</template>