update

src/components/popover-select/index.vue

@@ -83,6 +83,8 @@ export default {
         if (!newProp) {
           this.data = [];
           this.showValue = "";
+        } else {
+          this.showValue = newProp;
         }
       },
       immediate: true,

src/components/popover-tree-select/index.vue

@@ -82,6 +82,8 @@ export default {
         if (!newProp) {
           this.data = [];
           this.showValue = "";
+        } else {
+          this.showValue = newProp;
         }
       },
       immediate: true,

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

@@ -9,18 +9,17 @@ const NewTabColumns = TabColumns.map((element) => ({
   tableColumns: initColumns(element.tableColumns),
 }));
 
-const SelectColumns = NewColumns.filter(column => column.type === 'Select')
-NewTabColumns.forEach(column => {
-  SelectColumns.push(...column.tableColumns.filter(cColumn => cColumn.type === 'Select'))
+const SelectColumns = NewColumns.filter((column) => column.type === "Select");
+NewTabColumns.forEach((column) => {
+  SelectColumns.push(
+    ...column.tableColumns.filter((cColumn) => cColumn.type === "Select")
+  );
 });
 
-
 export default {
   name: "AddPurchaseOrderDrawer",
   dicts: initDicts(SelectColumns),
-  components: {
-  
-  },
+  components: {},
 
   data() {
     return {
@@ -41,25 +40,24 @@ export default {
   },
   computed: {},
   watch: {
-    'params.puOrderItemList': {
+    "params.puOrderItemList": {
       handler(nVal, oVal) {
-        this.handleSynchronousMaterial('puOrderItemList', 'puOrderExecuteList');
+        this.handleSynchronousMaterial("puOrderItemList", "puOrderExecuteList");
+        console.log("params", this.params);
       },
       deep: true,
-      immediate: true
     },
-    'params.puOrderExecuteList': {
+    "params.puOrderExecuteList": {
       handler(nVal, oVal) {
-        this.handleSynchronousMaterial('puOrderExecuteList', 'puOrderItemList');
+        this.handleSynchronousMaterial("puOrderExecuteList", "puOrderItemList");
       },
       deep: true,
-      immediate: true
     },
-
   },
   methods: {
     beforeOpen() {
-      const { deptName, deptId, name, nickName, orgName, orgId } = this.$store.state.user;
+      const { deptName, deptId, name, nickName, orgName, orgId } =
+        this.$store.state.user;
       this.params.puOrg = orgId;
       this.params.puOrgName = orgName;
       this.params.buyer = name;
@@ -72,19 +70,18 @@ export default {
     },
     // 增行
     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);
+          "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);
         }
@@ -97,9 +94,7 @@ export default {
     },
     // 删行
     delTableRow(prop, index) {
-
       for (const key in this.params) {
-
         if (Array.isArray(this.params[key])) {
           this.params[key].splice(index, 1);
         }
@@ -113,7 +108,7 @@ export default {
         this.params[key2][index].material = item.material;
         this.params[key2][index].materialName = item.materialName;
         this.params[key2][index].materialCode = item.materialCode;
-      })
+      });
     },
     // 取消
     handleCancel() {
@@ -123,7 +118,7 @@ export default {
     // 保存
     async handleSava() {
       // orderAddForm
-      console.log(this.params, 'params');
+      console.log(this.params, "params");
       // this.$refs['orderAddForm'].validate(async (valid) => {
       //   if (valid) {
       try {
@@ -147,7 +142,7 @@ export default {
     },
     // 保存并新增
     handleSubmit() {
-      this.$refs['orderAddForm'].validate(async (valid) => {
+      this.$refs["orderAddForm"].validate(async (valid) => {
         if (valid) {
           try {
             const createById = this.params.buyer;
@@ -173,84 +168,178 @@ export default {
             // this.setVisible(false);
           }
         } else {
-          console.log('error submit!!');
+          console.log("error submit!!");
           return false;
         }
       });
-
     },
   },
   created() {
     console.log("ADD CREATED", this.params);
   },
-  mounted() { },
-  destroyed() { },
+  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" ref="orderAddForm" 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="
+  <el-drawer
+    direction="btt"
+    size="100%"
+    :with-header="false"
+    :visible.sync="visible"
+    @open="beforeOpen"
+    @close="$emit('close')"
+  >
+    <el-form
+      size="mini"
+      label-position="right"
+      ref="orderAddForm"
+      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>
-            <el-button size="mini" type="danger" @click="handleSava">保存</el-button>
+            <el-button size="mini" type="danger" @click="handleSava"
+              >保存</el-button
+            >
             <el-button size="mini" type="info" @click="handleSubmit">
               保存并新增
             </el-button>
           </div>
         </div>
         <el-row>
-          <el-col v-for="(column, index) in columns" :key="index" :span="column.span || 6">
-
+          <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-popover-select v-if="column.type === 'PopoverSelect'" 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" :query-params="column.config.queryParams" :source.sync="params">
+              <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-popover-select
+                v-if="column.type === 'PopoverSelect'"
+                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"
+                :query-params="column.config.queryParams"
+                :source.sync="params"
+              >
               </dr-popover-select>
-              <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
+                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-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%">
+              <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>
+                  <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
+                  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
+                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-checkbox v-else-if="column.type === 'Checkbox'" v-model="params[column.key]" true-label="Y"
-                false-label="N"></el-checkbox>
-              <el-upload v-if="column.type === 'Upload'" :file-list="params[column.key]" :disabled="column.disabled" drag
-                action="https://jsonplaceholder.typicode.com/posts/" multiple>
+              <el-checkbox
+                v-else-if="column.type === 'Checkbox'"
+                v-model="params[column.key]"
+                true-label="Y"
+                false-label="N"
+              ></el-checkbox>
+              <el-upload
+                v-if="column.type === 'Upload'"
+                :file-list="params[column.key]"
+                :disabled="column.disabled"
+                drag
+                action="https://jsonplaceholder.typicode.com/posts/"
+                multiple
+              >
                 <i class="el-icon-upload"></i>
                 <div class="el-upload__text">
                   将文件拖到此处，或<em>点击上传</em>
@@ -260,54 +349,105 @@ export default {
                 </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-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-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">
+              <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.type === 'Input'" v-model="scope.row[cColumn.key]"
-                    :placeholder="cColumn.placeholder" :clearable="cColumn.clearable" :disabled="cColumn.disabled"
-                    size="mini" style="width: 100%"></el-input>
-                  <dr-popover-select v-if="cColumn.type === 'PopoverSelect'" 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="mini">
+                  <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>
+                  <dr-popover-select
+                    v-if="cColumn.type === 'PopoverSelect'"
+                    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="mini"
+                  >
                   </dr-popover-select>
-                  <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
+                    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-select v-if="cColumn.type === 'Select'" v-model="params[cColumn.key]"
-                    :placeholder="column.placeholder" :clearable="cColumn.clearable" :disabled="cColumn.disabled"
-                    style="width: 100%">
-                    <el-option v-for="item in dict.type[cColumn.config.optionsName]" :key="item.value" :label="item.label"
-                      :value="item.value">
+                  <el-select
+                    v-if="cColumn.type === 'Select'"
+                    v-model="params[cColumn.key]"
+                    :placeholder="column.placeholder"
+                    :clearable="cColumn.clearable"
+                    :disabled="cColumn.disabled"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in dict.type[cColumn.config.optionsName]"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    >
                     </el-option>
                   </el-select>
-                  <el-checkbox v-else-if="cColumn.type === 'Checkbox'" v-model="params[cColumn.key]" true-label="Y"
-                    false-label="N"></el-checkbox>
+                  <el-checkbox
+                    v-else-if="cColumn.type === 'Checkbox'"
+                    v-model="params[cColumn.key]"
+                    true-label="Y"
+                    false-label="N"
+                  ></el-checkbox>
                 </template>
               </el-table-column>
               <el-table-column fixed="right" label="操作" width="80">
                 <template slot-scope="scope">
-                  <el-button @click.native.prevent="
-                    delTableRow(params[tabName], scope.$index)
-                    " type="text" size="small">
+                  <el-button
+                    @click.native.prevent="
+                      delTableRow(params[tabName], scope.$index)
+                    "
+                    type="text"
+                    size="small"
+                  >
                     删行
                   </el-button>
                 </template>
@@ -316,7 +456,9 @@ export default {
           </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-button size="mini" @click="addTableRow(params[tabName])"
+            >增行</el-button
+          >
         </el-row>
       </el-card>
     </el-form>