update

src/api/business/purchase/purchase-contract.js

@@ -16,6 +16,14 @@ export function add(data) {
   });
 }
 
+export function edit(data) {
+  return request({
+    url: "/pu/contract/edit",
+    method: "post",
+    data: data,
+  });
+}
+
 export function remove(data) {
   return request({
     url: `/pu/contract/${data}`,
@@ -29,3 +37,24 @@ export function item(data) {
     method: "get",
   });
 }
+
+export function generateCode() {
+  return request({
+    url: "/pu/contract/generateNo",
+    method: "get",
+  });
+}
+
+export function itemTableList(params, name) {
+  let url = "";
+  if (name === "contractItemList") url = "/pu/contract/item/list";
+  if (name === "contractClauseList") url = "/pu/contract/clause/list";
+  if (name === "contractExpenseList") url = "/pu/contract/expense/list";
+  if (name === "contractAgreementList") url = "/pu/contract/agreement/list";
+  if (name === "contractApplyOrgList") url = "/pu/contract/org/list";
+  return request({
+    url: url,
+    method: "get",
+    params: params,
+  });
+}

src/utils/init/index.js

@@ -4,35 +4,26 @@ export const initColumns = (
   arr,
   prop = { disabled: false, readonly: false, clearable: false }
 ) => {
-  return arr
+  return arr.map((element) => {
-    .map((element) => {
+    element.config = element.config || {};
-      element.config = element.config || {};
+    if (element.type === "Input") {
-      const type = element.type;
+    }
-      if (type === "Input") {
+    if (element.type === "InputDialog") {
-      }
+      prop.readonly = true;
-      if (type === "InputDialog") {
+    }
-        prop.readonly = true;
+    if (element.type === "InputNumber") {
-      }
+      element.config = { controlsPosition: "right", ...element.config };
-      if (type === "InputNumber") {
+    }
-        element.config = { controlsPosition: "right", ...element.config };
+    if (element.type === "Select") {
-      }
+    }
-      if (type === "Select") {
+    if (element.type === "DatePicker") {
-      }
+      element.config = { type: "date", ...element.config };
-      if (type === "DatePicker") {
+    }
-        element.config = { type: "date", ...element.config };
+    if (element.type === "Upload") {
-      }
+      element.value = [];
-      if (type === "DatePicker") {
+    }
-        element.value = [];
+    return { ...element, ...prop };
-      }
+  });
-      return { ...element, ...prop };
-    })
-    .map((element) => {
-      let { value } = element;
-      if (element.type === "DatePicker") value = new Date();
-      else if (element.type === "InputNumber") value = 1;
-      else value = value || "1";
-      return { ...element, value };
-    });
 };
 
 // 初始化参数
@@ -68,13 +59,3 @@ export const initPageSizes = () => pageSizes;
 export const initLayout = () => layout;
 
 export const initPage = () => page;
-
-// export default function InitHooks(prop) {
-//   return {
-//     initPage,
-//     initParams,
-//     initDicts: initDicts(prop),
-//     initRules: initRules(prop),
-//     initComponents: initComponents(prop),
-//   };
-// }

src/views/input-dialog/components/MATERIAL_PARAM.js

@@ -0,0 +1,14 @@
+export default [
+  {
+    key: "code",
+    title: "物料编码",
+    type: "Input",
+    search: true,
+  },
+  {
+    key: "name",
+    title: "物料名称",
+    type: "Input",
+    search: true,
+  },
+];

src/views/input-dialog/components/PAYAGREEMENT_PARAM.js

@@ -0,0 +1,14 @@
+export default [
+  {
+    key: "code",
+    title: "付款协议编码",
+    type: "Input",
+    search: true,
+  },
+  {
+    key: "name",
+    title: "付款协议名称",
+    type: "Input",
+    search: true,
+  },
+];

src/views/input-dialog/components/index.vue

@@ -1,36 +1,32 @@
 <script>
 import { refer } from "../api/index";
-import { initParams, initPage, initLayout, initPageSizes } from "@/utils/init";
 import InitColumnHooks from "./init-column";
+import { initParams } from "@/utils/init";
 
 export default {
   name: "InputDialog",
   props: ["title", "type"],
   components: {},
   data() {
-    const Page = initPage();
-    const Layout = initLayout();
-    const PageSizes = initPageSizes();
     const { type } = this.$props;
     const { TableColumns, SearchColumns } = InitColumnHooks(type);
-    const Params = initParams(SearchColumns);
     return {
       // global
       size: "mini",
       width: "50%",
       showKey: "name",
-      page: Page,
+      page: { pageNum: 1, pageSize: 25, total: 0 },
-      layout: Layout,
+      layout: "total, prev, pager, next, sizes, jumper",
-      pageSizes: PageSizes,
+      pageSizes: [25, 50, 100],
       // dialog
       visible: false,
       loading: false,
       // search
+      params: initParams(SearchColumns),
       searchColumns: SearchColumns,
-      params: Params,
       // table
-      tableColumns: TableColumns,
       data: [],
+      tableColumns: TableColumns,
       currentData: null,
     };
   },
@@ -98,7 +94,7 @@ export default {
     },
     // double click select row data and confirm
     dblclickSelectCurrentData(row) {
-      confirm(row);
+      this.confirm(row);
     },
     //
     confirm(prop) {

src/views/input-dialog/index.vue

@@ -23,7 +23,6 @@ export default {
   watch: {},
   methods: {
     handleAsyncOpenDialog() {
-      this.$emit("before-open");
       this.$nextTick(() => {
         const { setVisible } = this.$refs.InputDialogFef;
         setVisible(true);
@@ -35,6 +34,10 @@ export default {
         source[key] = prop[dataMapping[key]];
       }
       this.$emit("update:source", source);
+      console.log("type", this.$props.type);
+      console.log("dataMapping", dataMapping);
+      console.log("prop", prop);
+      console.log("source", this.$props.source);
     },
   },
   created() {

src/views/purchase/purchase-contract/add/column.js

@@ -24,7 +24,7 @@ export const Columns = [
     title: "采购员",
     type: "InputDialog",
     config: {
-      componentName: "User",
+      componentName: "ORG_PARAM",
       dataMapping: {
         buyer: "userId",
         buyerName: "userName",
@@ -144,7 +144,7 @@ export const Columns = [
     title: "发票税率",
     type: "InputDialog",
     config: {
-      componentName: "Tax",
+      componentName: "ORG_PARAM",
       dataMapping: {
         invoiceTax: "mattaxesname",
       },
@@ -283,14 +283,14 @@ export const Columns = [
   { key: "area", title: "区域", type: "Input" },
   { key: "consigneePhone", title: "收货人联系方式", type: "Input" },
   {
-    key: "paymentAgreement",
+    key: "paymentAgreementName",
     title: "付款协议",
     type: "InputDialog",
     config: {
-      componentName: "PaymentPlan",
+      componentName: "PAYAGREEMENT_PARAM",
       dataMapping: {
-        buyer: "userName",
+        paymentAgreement: "code",
-        puDept: "deptName",
+        paymentAgreementName: "name",
       },
     },
     require: true,
@@ -338,26 +338,68 @@ export const TabColumns = [
     title: "物料基本信息",
     key: "contractItemList",
     tableColumns: [
-      { title: "序号", key: "index" },
       { title: "物料编码", key: "material", width: 200 },
       {
         title: "物料名称",
         key: "materialName",
         type: "InputDialog",
         width: 200,
+        config: {
+          componentName: "MATERIAL_PARAM",
+          dataMapping: {
+            material: "code",
+            materialName: "name",
+          },
+        },
+      },
+      {
+        title: "规格",
+        key: "specification",
+        width: 200,
+        config: {
+          componentName: "MATERIAL_PARAM",
+          dataMapping: {
+            material: "code",
+            materialName: "name",
+          },
+        },
+      },
+      {
+        title: "品牌",
+        key: "brand",
+        type: "InputDialog",
+        width: 200,
+        config: {
+          componentName: "MATERIAL_PARAM",
+          dataMapping: {
+            material: "code",
+            materialName: "name",
+          },
+        },
       },
-      { title: "规格", key: "specification", width: 200 },
-      { title: "品牌", key: "brand", type: "InputDialog", width: 200 },
       { title: "生产厂家", key: "manufacturer", type: "Input", width: 200 },
-      { title: "采购单位", key: "puUnit", type: "InputDialog", width: 200 },
+      {
+        title: "采购单位",
+        key: "puUnit",
+        type: "InputDialog",
+        width: 200,
+        config: {
+          componentName: "MATERIAL_PARAM",
+          dataMapping: {
+            material: "code",
+            materialName: "name",
+          },
+        },
+      },
       {
         title: "税率%",
         key: "tax",
         type: "InputDialog",
         config: {
-          componentName: "Tax",
+          componentName: "MATERIAL_PARAM",
           dataMapping: {
-            tax: "mattaxesname",
+            material: "code",
+            materialName: "name",
           },
         },
         width: 200,
@@ -390,6 +432,13 @@ export const TabColumns = [
         key: "customerName",
         type: "InputDialog",
         width: 200,
+        config: {
+          componentName: "MATERIAL_PARAM",
+          dataMapping: {
+            material: "code",
+            materialName: "name",
+          },
+        },
       },
       { title: "备注", key: "remark", type: "Input", width: 200 },
     ],
@@ -398,7 +447,6 @@ export const TabColumns = [
     title: "合同条款",
     key: "contractClauseList",
     tableColumns: [
-      { title: "序号", key: "index" },
       { title: "条款编码", key: "code", type: "Input" },
       { title: "条款名称", key: "name", type: "Input" },
       { title: "条款内容", key: "content", type: "Input" },
@@ -411,7 +459,6 @@ export const TabColumns = [
     title: "合同费用",
     key: "contractExpenseList",
     tableColumns: [
-      { title: "序号", key: "index" },
       { title: "费用编码", key: "code", type: "Input" },
       { title: "费用名称", key: "name", type: "Input" },
       {
@@ -427,19 +474,30 @@ export const TabColumns = [
     title: "付款协议信息",
     key: "contractAgreementList",
     tableColumns: [
-      { title: "序号", key: "index" },
       {
         title: "付款阶段",
         key: "satge",
         type: "InputNumber",
         width: 200,
       },
-      { title: "付款起点", key: "origin", type: "InputDialog", width: 200 },
+      {
+        title: "付款起点",
+        key: "origin",
+        type: "InputDialog",
+        width: 200,
+        config: {
+          componentName: "MATERIAL_PARAM",
+          dataMapping: {
+            material: "code",
+            materialName: "name",
+          },
+        },
+      },
       { title: "账期天数", key: "paymetDays", type: "Input", width: 200 },
       { title: "付款比例%", key: "ratio", type: "Input", width: 200 },
       { title: "付款金额", key: "money", type: "Input", width: 200 },
-      { title: "是否预付款", key: "isAdvance" },
+      { title: "是否预付款", key: "isAdvance", width: 200 },
-      { title: "是否质保金", key: "isQuality" },
+      { title: "是否质保金", key: "isQuality", width: 200 },
       { title: "结算方式", key: "paymentMeans", type: "Input", width: 200 },
       { title: "备注", key: "remark", type: "Input", width: 200 },
       { title: "需进度确认", key: "schedule", type: "Select", width: 200 },
@@ -449,7 +507,6 @@ export const TabColumns = [
     title: "合同执行组织范围",
     key: "contractApplyOrgList",
     tableColumns: [
-      { title: "序号", key: "index" },
       { title: "组织名称", key: "orgName", type: "Input" },
       { title: "组织编码", key: "org", type: "Input" },
     ],

src/views/purchase/purchase-contract/add/index.vue

@@ -1,7 +1,7 @@
 <script>
-import { initColumns, initDicts, initRules, initParams } from "@/utils/init";
 import { Columns, TabColumns } from "./column";
-import { add } from "@/api/business/purchase/purchase-contract";
+import { add, generateCode } from "@/api/business/purchase/purchase-contract";
+import { initColumns, initDicts, initRules, initParams } from "@/utils/init";
 
 const NewColumns = initColumns(Columns);
 const NewTabColumns = TabColumns.map((element) => ({
@@ -19,6 +19,7 @@ export default {
     return {
       size: "mini",
       visible: false,
+      loading: false,
       columns: NewColumns,
       rules: initRules(NewColumns),
       params: {
@@ -35,7 +36,14 @@ export default {
     };
   },
   computed: {},
-  watch: {},
+  watch: {
+    "params.contractType": function (newProp) {
+      this.tabColumns = NewTabColumns.filter((element) =>
+        newProp === "1" ? element.key !== "contractItemList" : element
+      );
+      this.tabName = this.tabColumns[0].key;
+    },
+  },
   methods: {
     beforeOpen() {
       const { deptName, deptId, name, id, orgName, orgId } =
@@ -46,14 +54,26 @@ export default {
       this.params.buyerName = name;
       this.params.puDept = deptId;
       this.params.puDeptName = deptName;
+      this.fetchCode();
     },
     setVisible(prop) {
       this.visible = prop;
     },
+    async fetchCode() {
+      try {
+        this.loading = true;
+        this.params.code = await generateCode();
+      } catch (err) {
+        this.$notify.error({ title: "error", message: err });
+      } finally {
+        this.loading = false;
+      }
+    },
     addTableRow(prop) {
       const arr = this.tabColumns.find(
         (element) => element.key === this.tabName
       ).tableColumns;
+      console.log("arr", arr);
       prop.push(initParams(arr, "key", "value"));
     },
     delTableRow(prop, index) {
@@ -112,6 +132,7 @@ export default {
     @close="$emit('close')"
   >
     <el-form
+      v-loading="loading"
       :size="size"
       label-position="right"
       label-width="135px"
@@ -136,12 +157,12 @@ export default {
         >
           <h3>新增</h3>
           <div style="text-align: right">
-            <el-button :size="size" @click="handleCancel">取消</el-button>
+            <el-button :size="size" @click="handleCancel">取 消</el-button>
             <el-button :size="size" type="danger" @click="handleSava"
-              >保存</el-button
+              >保 存</el-button
             >
             <el-button :size="size" type="info" @click="handleSubmit">
-              保存并新增
+              新 增
             </el-button>
           </div>
         </div>
@@ -281,6 +302,11 @@ export default {
             :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"
@@ -289,9 +315,9 @@ export default {
                 :width="cColumn.width"
               >
                 <template slot-scope="scope">
-                  <el-tag v-if="cColumn.key === 'index'">
+                  <span v-if="!cColumn.type">
-                    {{ scope.$index + 1 }}
+                    {{ scope.row[cColumn.key] }}</span
-                  </el-tag>
+                  >
                   <el-input
                     v-if="cColumn.type === 'Input'"
                     v-model="scope.row[cColumn.key]"

src/views/purchase/purchase-contract/edit/index.vue

@@ -0,0 +1,401 @@
+<script>
+import { Columns, TabColumns } from "../add/column";
+import {
+  edit,
+  item,
+  itemTableList,
+} from "@/api/business/purchase/purchase-contract";
+import { initColumns, initDicts, initRules, initParams } from "@/utils/init";
+
+const NewColumns = initColumns(Columns);
+const NewTabColumns = TabColumns.map((element) => ({
+  ...element,
+  tableColumns: initColumns(element.tableColumns),
+}));
+
+export default {
+  name: "EditDrawer",
+  dicts: initDicts(NewColumns),
+  components: {
+    DrInputDialog: () => import("@/views/input-dialog/index.vue"),
+  },
+  data() {
+    return {
+      size: "mini",
+      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) {
+        this.$notify.error({ title: "error", message: 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) {
+        this.$notify.error({ title: "error", message: err });
+      } finally {
+        this.loading = false;
+      }
+    },
+    // 新增行
+    addTableRow(prop) {
+      const arr = this.tabColumns.find(
+        (element) => element.key === this.tabName
+      ).tableColumns;
+      prop.push(initParams(arr, "key", "value"));
+    },
+    // 删除行
+    delTableRow(prop, index) {
+      prop.splice(index, 1);
+    },
+    // 取消
+    handleCancel() {
+      this.setVisible(false);
+      this.params = initParams(this.columns, "key", "value");
+    },
+    // 保存
+    handleSava() {
+      this.setVisible(false);
+    },
+    // 保存并新增
+    async handleSubmit() {
+      try {
+        const createById = this.params.buyer;
+        const createByName = this.params.buyerName;
+        const updateById = this.$store.state.user.id;
+        const updateByName = this.$store.state.user.name;
+        const { code, msg } = await edit({
+          createById,
+          createByName,
+          updateById,
+          updateByName,
+          ...this.params,
+        });
+        if (code === 200) {
+          this.$notify.success({ title: msg });
+          this.setVisible(false);
+        } else {
+          this.$notify.warning({ title: msg });
+        }
+      } catch (err) {
+        this.$notify.error({ title: "error", message: err });
+      } finally {
+        // this.setVisible(false);
+      }
+    },
+  },
+  created() {
+    console.log("ADD CREATED");
+  },
+  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"
+      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="size" @click="handleCancel">取 消</el-button>
+            <el-button :size="size" type="danger" @click="handleSava"
+              >更 新</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 === 'Input'"
+                v-model="params[column.key]"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :disabled="column.disabled"
+                style="width: 100%"
+              ></el-input>
+              <dr-input-dialog
+                v-if="column.type === 'InputDialog'"
+                v-model="params[column.key]"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :disabled="column.disabled"
+                :readonly="column.readonly"
+
+                :title="column.title"
+                :type="column.config.componentName"
+                :data-mapping="column.config.dataMapping"
+                :source.sync="params"
+              >
+              </dr-input-dialog>
+              <el-input
+                v-if="column.type === '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.type === 'InputNumber'"
+                v-model="params[column.key]"
+                :controls-position="column.config.controlsPosition"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :disabled="column.disabled"
+                style="width: 100%"
+              ></el-input-number>
+              <el-select
+                v-if="column.type === 'Select'"
+                v-model="params[column.key]"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :disabled="column.disabled"
+                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-select
+                v-if="column.type === '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.type === 'DatePicker'"
+                v-model="params[column.key]"
+                :type="column.config.type"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :disabled="column.disabled"
+                :picker-options="column.pickerOptions"
+                style="width: 100%"
+              >
+              </el-date-picker>
+              <el-upload
+                v-if="column.type === 'Upload'"
+                :file-list="params[column.key]"
+                :disabled="column.disabled"
+                drag
+                action="https://sy.derom.com/document-center/fastdfs/upload"
+                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 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.type">
+                    {{ scope.row[cColumn.key] }}</span
+                  >
+                  <el-input
+                    v-if="cColumn.type === 'Input'"
+                    v-model="scope.row[cColumn.key]"
+                    :placeholder="cColumn.placeholder"
+                    :clearable="cColumn.clearable"
+                    :disabled="cColumn.disabled"
+                    :size="size"
+                    style="width: 100%"
+                  ></el-input>
+                  <dr-input-dialog
+                    v-if="cColumn.type === 'InputDialog'"
+                    v-model="scope.row[cColumn.key]"
+                    :placeholder="cColumn.placeholder"
+                    :clearable="cColumn.clearable"
+                    :disabled="cColumn.disabled"
+                    :readonly="cColumn.readonly"
+                    
+                    :title="cColumn.title"
+                    :type="cColumn.config.componentName"
+                    :data-mapping="cColumn.config.dataMapping"
+                    :source.sync="scope.row"
+                    :size="size"
+                  >
+                  </dr-input-dialog>
+                  <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="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
+                    @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="size" @click="addTableRow(params[tabName])"
+            >增行</el-button
+          >
+        </el-row>
+      </el-card>
+    </el-form>
+  </el-drawer>
+</template>

src/views/purchase/purchase-contract/index.vue

@@ -7,6 +7,7 @@ export default {
   components: {
     AddDrawer: () => import("./add/index.vue"),
     SeeDrawer: () => import("./see/index.vue"),
+    EditDrawer: () => import("./edit/index.vue"),
   },
   data() {
     return {
@@ -106,6 +107,13 @@ export default {
       await setVisible(true);
       await fetchItem(id);
     },
+    // 打开编辑drawer
+    async handleOpenEditDrawer(prop) {
+      const { id } = prop;
+      const { setVisible, fetchItem } = this.$refs.EditDrawerFef;
+      await setVisible(true);
+      await fetchItem(id);
+    },
   },
 };
 </script>
@@ -116,8 +124,9 @@ export default {
     style="width: calc(100% - 24px); height: 100%; margin: 10px"
     :body-style="{ padding: 0 }"
   >
-    <add-drawer ref="AddDrawerFef" @close="handleResetList"></add-drawer>
     <see-drawer ref="SeeDrawerFef"></see-drawer>
+    <add-drawer ref="AddDrawerFef" @close="handleResetList"></add-drawer>
+    <edit-drawer ref="EditDrawerFef" @close="handleResetList"></edit-drawer>
     <el-form
       size="mini"
       label-position="right"

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

@@ -1,12 +1,15 @@
 <script>
 import { Columns, TabColumns } from "../add/column";
-import { item } from "@/api/business/purchase/purchase-contract";
+import { item, itemTableList } from "@/api/business/purchase/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),
+  tableColumns: initColumns(element.tableColumns, {
+    disabled: true,
+    readonly: true,
+  }),
 }));
 
 export default {
@@ -15,6 +18,7 @@ export default {
   data() {
     return {
       visible: false,
+      loading: false,
       columns: NewColumns,
       rules: initRules(NewColumns),
       params: {
@@ -31,12 +35,23 @@ export default {
     };
   },
   computed: {},
-  watch: {},
+  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;
@@ -53,11 +68,33 @@ export default {
         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) {
+        this.$notify.error({ title: "error", message: 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() {},
@@ -70,10 +107,10 @@ export default {
     size="100%"
     :with-header="false"
     :visible.sync="visible"
-    @open="beforeOpen"
+    destroy-on-close
-    @close="$emit('close')"
   >
     <el-form
+      v-loading="loading"
       size="mini"
       label-position="right"
       label-width="135px"
@@ -98,6 +135,9 @@ export default {
         >
           <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>
@@ -250,7 +290,7 @@ export default {
                   </el-input>
                 </template>
               </el-table-column>
-              <el-table-column fixed="right" label="操作" width="120">
+              <!-- <el-table-column fixed="right" label="操作" width="120">
                 <template slot-scope="scope">
                   <el-button
                     @click.native.prevent="
@@ -262,15 +302,15 @@ export default {
                     删行
                   </el-button>
                 </template>
-              </el-table-column>
+              </el-table-column> -->
             </el-table>
           </el-tab-pane>
         </el-tabs>
-        <el-row style="position: absolute; top: 20px; right: 20px">
+        <!-- <el-row style="position: absolute; top: 20px; right: 20px">
           <el-button size="mini" @click="addTableRow(params[tabName])"
             >增行</el-button
           >
-        </el-row>
+        </el-row> -->
       </el-card>
     </el-form>
   </el-drawer>