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

<script>
// import { Columns, TabColumns } from "../add/column";
import { editColumns, editTabColumns, forbidden, SelectColumns } from "./initColumn";
import orderApi from "@/api/business/purchase/purchase-order";
import { initColumns, initDicts, initRules, initParams } from "@/utils/init";

// 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: "EditPurchaseOrderDrawer",
  dicts: initDicts(SelectColumns),
  components: {
    FileUploadCenter: () => import('../components/FileUploadCenter/index.vue'),
  },
  data() {
    return {
      size: "mini",
      visible: false,
      loading: false,
      columns: editColumns,
      rules: initRules(editColumns),
      params: {
        ...initParams(editColumns),
        puOrderItemList: [],
        puOrderExecuteList: [],
      },

      tabColumns: editTabColumns,
      tabName: "puOrderItemList",
    };
  },
  computed: {},
  watch: {
    "params.contractType": function (newProp) {
      this.tabColumns = editTabColumns.filter((element) =>
        newProp === "1" ? element.key !== "puOrderItemList" : element
      );
      this.tabName = this.tabColumns[0].key;
    },
    tabName: function (newProp) {
      const { id } = this.params;
      // this.fetchTable(id, newProp);
    },
    'params.puOrderItemList': {
      handler(nVal, oVal) {
        this.params.source == 3 && this.handleSynchronousMaterial('puOrderItemList', 'puOrderExecuteList');
      },
      deep: true,
      immediate: true
    },
    'params.puOrderExecuteList': {
      handler(nVal, oVal) {
        this.params.source == 3 && this.handleSynchronousMaterial('puOrderExecuteList', 'puOrderItemList');
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    setVisible(prop) {
      this.visible = prop;

    },
    // 同步子表物料
    handleSynchronousMaterial(key1, key2) {
      // this.params[key1]-- -> this.params[key2]
      this.params[key1] && this.params[key1].forEach((item, index) => {
        this.params[key2][index].material = item.material;
        this.params[key2][index].materialName = item.materialName;
        this.params[key2][index].materialCode = item.materialCode;
      })
    },
    // 判断属性是否禁用
    handleIsForbidden(status) {
      console.log(status);
      let { editColumns, editTabColumns } = forbidden(status != '2');
      this.columns = editColumns;
      this.tabColumns = editTabColumns;
    },
    // 查询详细
    async fetchItem(prop) {
      try {
        this.loading = true;
        const { code, msg, data } = await orderApi.details(prop);
        if (code === 200) {
          this.params = { ...this.params, ...data };
          console.log(this.params, 'this.params----------123');
          this.handleIsForbidden(this.params.status);
        }
      } catch (err) {
        //
      } finally {
        this.loading = false;
      }
    },
    // 新增行
    addTableRow(prop) {

      for (const key in this.params) {

        if (Array.isArray(this.params[key])) {

          const arr = this.tabColumns.find(
            (element) => element.key === key
          ).tableColumns;

          let rowData = initParams(arr, "key", "value");

          'rowno' in rowData && (rowData['rowno'] = this.params[key].length + 1);
          'rowNo' in rowData && (rowData['rowNo'] = this.params[key].length + 1);

          this.params[key].push(rowData);
        }
      }

      // const arr = this.tabColumns.find(
      //   (element) => element.key === this.tabName
      // ).tableColumns;
      // prop.push(initParams(arr, "key", "value"));
    },
    // 删除行
    delTableRow(prop, index) {
      // prop.splice(index, 1);
      for (const key in this.params) {

        if (Array.isArray(this.params[key])) {
          this.params[key].splice(index, 1);
        }
      }
    },
    // 取消
    handleCancel() {
      this.setVisible(false);
      this.params = initParams(this.columns, "key", "value");
    },
    // 保存
    async handleSava() {
      // this.$refs['orderEditForm'].validate(async (valid) => {
      //   if (valid) {
      try {
        this.loading = true;
        const { code, msg } = await (this.handleIsRevise(this.params.status) ?
          orderApi.revision(this.params)
          : orderApi.edit(this.params)
        )
        if (code === 200) {
          this.setVisible(false);
        }
      } catch (err) {
        //
      } finally {
        this.loading = false;
      }

      //   } else {
      //     console.log('error submit!!');
      //     return false;
      //   }
      // });
    },
    beforeOpen() {
    },
    // 子表参照改变之后
    handleReferChange(val, source, type) {
      console.log(val, 'val');
      console.log(source, 'source');
      console.log(type, 'type');

      // 触发物料参照
      if (type == 'MATERIAL_PARAM' && source.qty && source.qty != '') {

        this.handleGetPrice();
      }
    },
    // 子表inputNumber
    handleInputChange(row, type) {
      console.log(type, 'type');
      // 物料数量变化----询价
      if (type == 'qty' && row.material) {
        this.handleGetPrice();
      }
    },
    // 询价 getPrice
    async handleGetPrice() {
      try {
        // let { puOrg, priceType, customer, assignSupplier, material, } = data;
        let { code, data } = await orderApi.getPrice({ ...this.params })
        if (code == 200) {
          this.params = data;
        }
      } catch (error) {

      } finally {

      }
    },
    // 判断修订还是编辑
    handleIsRevise(status) {
      return status == '2';
    },
  },
  created() {
    console.log("EDIT CREATED");
    console.log(this.params, 'this.params');


  },
  mounted() { },
  destroyed() { },
};
</script>
<template>
  <el-drawer direction="btt" size="100%" :with-header="false" :visible.sync="visible" @open="beforeOpen"
    @close="$emit('close')">
    <el-form v-loading="loading" :size="size" ref="orderEditForm" 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>{{ handleIsRevise(params.status) ? '修订' : '编辑' }}</h3>
          <div style="text-align: right">
            <el-button :size="size" @click="handleCancel">取 消</el-button>
            <el-button :size="size" type="danger" @click="handleSava">更 新</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" :disabled="column.disabled" style="width: 100%">
              </el-input>
              <dr-popover-select v-if="column.inputType === 'PopoverSelect'" v-model="params[column.key]" size="mini"
                :value-key="column.valueKey" :source.sync="params" :title="column.title" :type="column.referName"
                :multiple="column.multiple" :placeholder="column.placeholder" :data-mapping="column.dataMapping"
                :disabled="column.disabled" :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" :disabled="column.disabled"
                style="width: 100%">
              </el-input>
              <el-input-number v-if="column.inputType === 'InputNumber'" v-model="params[column.key]"
                :max="handleIsRevise(params.status) ? params[column.key] : 'Infinity'"
                :controls-position="column.controlsPosition" :placeholder="column.placeholder"
                :clearable="column.clearable" :disabled="column.disabled" style="width: 100%">
              </el-input-number>
              <el-select v-if="column.inputType === 'Select'" v-model="params[column.key]" :disabled="column.disabled"
                :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="column.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" :disabled="column.disabled"
                :picker-options="column.pickerOptions" style="width: 100%">
              </el-date-picker>
              <el-checkbox v-if="column.inputType === 'Checkbox'" v-model="params[column.key]" :disabled="column.disabled"
                true-label="Y" false-label="N">
              </el-checkbox>
              <file-upload-center v-if="column.inputType === 'Upload'" v-model="params[column.key]"
                :file-type="column.fileType">
              </file-upload-center>
            </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 label="序号">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <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">

                  <span v-if="!cColumn.inputType">
                    {{ scope.row[cColumn.key] }}
                  </span>

                  <el-input v-if="cColumn.inputType === 'Input'" v-model="scope.row[cColumn.key]"
                    :placeholder="cColumn.placeholder" :clearable="cColumn.clearable" :disabled="cColumn.disabled"
                    :size="size" 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="cColumn.disabled" :type="cColumn.referName" :multiple="cColumn.multiple"
                    :placeholder="cColumn.placeholder" :data-mapping="cColumn.dataMapping"
                    :query-params="cColumn.queryParams(scope.row)" size="mini" @change="handleReferChange">
                  </dr-popover-select>

                  <el-select v-if="cColumn.inputType === 'Select'" v-model="scope.row[cColumn.key]" size="mini"
                    :disabled="cColumn.disabled" :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="cColumn.disabled" true-label="Y" false-label="N">
                  </el-checkbox>
                  <el-input-number v-if="cColumn.inputType === 'InputNumber'" v-model="scope.row[cColumn.key]"
                    :controls-position="cColumn.controlsPosition"
                    :max="handleIsRevise(params.status) ? scope.row[cColumn.key] : 'Infinity'"
                    @change="handleInputChange(scope.row, cColumn.key)" :placeholder="cColumn.placeholder"
                    :clearable="cColumn.clearable" :disabled="cColumn.disabled" :size="size" style="width: 100%">
                  </el-input-number>
                </template>
              </el-table-column>


              <!-- 修订：不可删除、增行
              编辑：自制：可删可增 -->
              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button v-if="params.source == '3' && !handleIsRevise(params.status)" @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 v-if="params.source == '3' && !handleIsRevise(params.status)" :size="size"
            @click="addTableRow(params[tabName])">增行</el-button>
        </el-row>
      </el-card>
    </el-form>
  </el-drawer>
</template>