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";

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


export default {
  name: "SeePurchaseContractDrawer",
  dicts: initDicts(NewColumns),
  data() {
    // const arr2Obj = function (data, keyName, valueName) {
    //   return Object.fromEntries(
    //     data.map((item) => [item[keyName], item[valueName]])
    //   );
    // };
    // const columns = [
    //   // { key: "id", title: "主键" },
    //   { key: "puOrg", title: "采购组织" },
    //   { key: "puOrgName", title: "采购组织名称" },
    //   { key: "billType", title: "订单类型" },
    //   { key: "billTypeName", title: "订单类型名称" },
    //   { key: "oaDemandNo", title: "OA需求单号" },
    //   { key: "code", title: "订单编号" },
    //   { key: "billDate", title: "订单日期" },
    //   { key: "supplier", title: "供应商" },
    //   { key: "supplierName", title: "供应商名称" },
    //   { key: "paymentAgreement", title: "付款协议" },
    //   { key: "finalType", title: "结算方式" },
    //   { key: "currency", title: "币种" },
    //   { key: "currencyName", title: "币种名称" },
    //   { key: "buyer", title: "采购员" },
    //   { key: "buyerName", title: "采购员名称" },
    //   { key: "puDept", title: "采购部门" },
    //   { key: "puDeptName", title: "采购部门名称" },
    //   { key: "customer", title: "收货客户" },
    //   { key: "customerName", title: "收货客户名称" },
    //   { key: "qty", title: "总数量" },
    //   { key: "originalQty", title: "原始总数量" },
    //   { key: "money", title: "价税合计" },
    //   { key: "originalMoney", title: "原始总金额" },
    //   { key: "notaxMoney", title: "无税金额" },
    //   { key: "status", title: "单据状态" },
    //   { key: "freezeCause", title: "冻结原因" },
    //   { key: "isBack", title: "退货" },
    //   { key: "isMarketing", title: "已协同生成销售订单" },
    //   { key: "isMarketingSource", title: "由销售订单协同生成" },
    //   { key: "warehouse", title: "WMS入库仓库" },
    //   { key: "warehouseName", title: "WMS入库仓库名称" },
    //   { key: "goodsAllocation", title: "货位" },
    //   { key: "goodsAllocationName", title: "货位名称" },
    //   { key: "isSendSrm", title: "是否同步SRM" },
    //   { key: "isInvoice", title: "发票标识" },
    //   { key: "supplierOrderNo", title: "供应商订单号" },
    //   { key: "rebateMoney", title: "订单使用返利金额" },
    //   { key: "deductionMoney", title: "订单抵扣余款金额" },
    //   { key: "address", title: "收货地址" },
    //   { key: "contacts", title: "收货联系人" },
    //   { key: "customerDept", title: "客户部门" },
    //   { key: "customerDeptName", title: "客户部门名称" },
    //   { key: "supplierContacts", title: "供应商业务联系人" },
    //   { key: "supplierContactsName", title: "供应商业务联系人名称" },
    //   { key: "isUrgency", title: "紧急程度" },
    //   { key: "isSendWms", title: "已同步WMS" },
    //   { key: "agent", title: "代理人" },
    //   { key: "agentName", title: "代理人名称" },
    //   { key: "isClose", title: "最终关闭" },
    //   { key: "closeTime", title: "最终关闭日期" },
    //   { key: "applyPaymentMoney", title: "累计付款申请金额" },
    //   { key: "paymentMoney", title: "累计付款金额" },
    //   { key: "invoiceMoney", title: "发票金额" },
    //   { key: "supplierPersonal", title: "供应商业务员" },
    //   { key: "supplierPersonalName", title: "供应商业务员名称" },
    //   { key: "isDeliver", title: "是否发货" },
    //   { key: "retReason", title: "退换原因" },
    //   { key: "processType", title: "处理方式" },
    //   { key: "isEnd", title: "整单关闭标识" },
    //   { key: "projectNow", title: "在建工程项目" },
    //   { key: "operatingItems", title: "经营性项目" },
    //   { key: "isArrivalReson", title: "到货超期原因" },
    //   { key: "midOrderNo", title: "中台采购订单号" },
    //   { key: "marketingCode", title: "销售订单号" },
    //   { key: "isArrival", title: "到货超期" },
    //   // { key: "tenantId", title: "租户号" },
    //   // { key: "revision", title: "乐观锁" },
    //   { key: "createByName", title: "创建人名称" },
    //   { key: "updateByName", title: "更新人名称" },
    //   // { key: "delFlag", title: "删除标记" },
    //   { key: "flowId", title: "OA流程ID" },
    //   { key: "approver", title: "审批人" },
    //   { key: "approverFinishTime", title: "审批时间" },
    //   { key: "approveTime", title: "提交时间" },

    // ];
    // const initColumns = () =>
    //   columns.map((column) => {
    //     const clearable = column.clearable || true;
    //     if (column.type === "InputNumber") {
    //       return {
    //         ...column,
    //         clearable,
    //         config: { controlsPosition: "right" },
    //       };
    //     }
    //     if (column.type === "DatePicker") {
    //       return {
    //         ...column,
    //         clearable,
    //         config: { type: "date" },
    //       };
    //     }
    //     return {
    //       ...column,
    //       clearable,
    //     };
    //   });
    // const initParams = () => arr2Obj(initColumns(), "key", "value");
    // const tabColumns = [
    //   {
    //     title: '物料信息',
    //     key: 'first',
    //     tableColumns: [
    //       // { key: "id", title: "主键" },
    //       { key: "rowNo", title: "行号" },
    //       { key: "orderId", title: "采购订单ID" },
    //       { key: "material", title: "物料" },
    //       { key: "materialName", title: "物料名称" },
    //       { key: "materialCode", title: "物料编码" },
    //       { key: "materialClassify", title: "物料分类" },
    //       { key: "materialManufacturersCode", title: "厂家物料编码" },
    //       { key: "specification", title: "规格" },
    //       { key: "model", title: "型号" },
    //       { key: "isMedcine", title: "医药物料" },
    //       { key: "manufacturer", title: "生产厂家代理人" },
    //       { key: "isDrug", title: "物料药品属性" },
    //       { key: "unit", title: "单位" },
    //       { key: "qty", title: "数量" },
    //       { key: "taxPrice", title: "含税单价" },
    //       { key: "money", title: "价税合计" },
    //       { key: "tax", title: "税率" },
    //       { key: "taxDeductMoneya", title: "折扣金额" },
    //       { key: "arrivalQty", title: "已到货数量" },
    //       { key: "unarrivedQty", title: "未到货数量" },
    //       { key: "notaxMoney", title: "无税金额" },
    //       { key: "priceSource", title: "价格目录ID" },
    //       { key: "isStorage", title: "入库关闭" },
    //       { key: "isInvoice", title: "开票关闭" },
    //       { key: "isArrival", title: "到货关闭" },
    //       { key: "isPayment", title: "付款关闭" },
    //       { key: "isGift", title: "赠品" },
    //       { key: "warehouse", title: "收货仓库" },
    //       { key: "place", title: "收货地点" },
    //       { key: "address", title: "收货地址" },
    //       { key: "productBatch", title: "产品批号" },
    //       { key: "manufactureDate", title: "生产日期" },
    //       { key: "efficacyLoseDate", title: "有效期至/失效日期" },
    //       { key: "approvalNumber", title: "批准文号" },
    //       { key: "registration", title: "注册证号" },
    //       { key: "storageCondition", title: "存储条件" },
    //       { key: "carriageCondition", title: "运输条件" },
    //       { key: "isBatchLock", title: "批号锁定标识" },
    //       { key: "isReplenishment", title: "补单标识" },
    //       { key: "isUrgency", title: "紧急标识" },
    //       { key: "originalQty", title: "原始数量" },
    //       { key: "originalMoney", title: "原始金额" },
    //       { key: "directProductBatch", title: "直运产品批号" },
    //       { key: "discountRule", title: "折扣规则编码" },
    //       { key: "reservedQty", title: "预留数量" },
    //       { key: "reservedPeriod", title: "预留周期" },
    //       { key: "taxDeductClassify", title: "扣税类别" },
    //       { key: "exchangeRate", title: "折本汇率" },
    //       { key: "source", title: "上游单据号" },
    //       { key: "sourceId", title: "上游单据ID" },
    //       { key: "demandCode", title: "采购需求单号" },
    //       { key: "arrivalDatePlan", title: "计划到货日期" },
    //       { key: "priceType", title: "价格类型" },
    //       { key: "isDistributionPrice", title: "配送价" },
    //       // { key: "tenantId", title: "租户号" },
    //       // { key: "revision", title: "乐观锁" },
    //       { key: "createByName", title: "创建人名称" },
    //       { key: "updateByName", title: "更新人名称" },
    //       // { key: "delFlag", title: "删除标记" },
    //       // { key: "materialClassifyOne", title: "物料一级分类" },
    //       { key: "materialClassifyOneName", title: "物料一级分类名称" },
    //       // { key: "materialClassifyTwo", title: "物料二级分类" },
    //       { key: "materialClassifyTwoName", title: "物料二级分类名称" },
    //       // { key: "materialClassifyThree", title: "物料三级分类" },
    //       { key: "materialClassifyThreeName", title: "物料三级分类名称" },
    //       // { key: "materialClassifyFour", title: "物料四级分类" },
    //       { key: "materialClassifyFourName", title: "物料四级分类名称" },
    //       { key: "price", title: "无税单价" }
    //     ]
    //   },
    //   {
    //     title: '执行结果',
    //     key: 'second',
    //     tableColumns: [
    //       // { key: "id", title: "主键" },
    //       { key: "orderId", title: "采购订单ID" },
    //       { key: "rowno", title: "行号" },
    //       { key: "material", title: "物料" },
    //       { key: "materialName", title: "物料名称" },
    //       { key: "specification", title: "规格" },
    //       { key: "qty", title: "数量" },
    //       { key: "stroageQty", title: "累计到货主数量" },
    //       { key: "stockQty", title: "累计入库主数量" },
    //       { key: "invoiceQty", title: "累计开票主数量" },
    //       { key: "rollbackQty", title: "累计退货主数量" },
    //       { key: "backStockQty", title: "累计退库主数量" },
    //       { key: "floatQty", title: "未到货数量" },
    //       // { key: "tenantId", title: "租户号" },
    //       // { key: "revision", title: "乐观锁" },
    //       { key: "createByName", title: "创建人名称" },
    //       { key: "updateByName", title: "更新人名称" },
    //       // { key: "delFlag", title: "删除标记" }
    //     ]
    //   },
    // ];
    // const initTabColumns = () => tabColumns;
    return {
      visible: false,
      columns: NewColumns,
      rules: initRules(NewColumns),
      params: {
        ...initParams(NewColumns),
        puOrderItemList: [],
        puOrderExecuteList: [],
      },

      tabColumns: NewTabColumns,
      tabName: "puOrderItemList",
      // tabTableDatas: {
      //   first: [],
      //   second: [],
      //   // third: [],
      //   // fourth: [],
      //   // fifth: [],
      // },
    };
  },
  computed: {},
  watch: {},
  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) {
        this.$notify.error({ title: "error", message: err });
      } finally {
        this.loading = false;
      }
    },
    // 取 消
    handleCancel() {
      this.setVisible(false);
      this.params = initParams(Columns);
    },
  },
  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="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="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>