From f4be2d1efebd54008014b7390e0a018eef091aca Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Fri, 30 Jun 2023 17:05:10 +0800
Subject: [PATCH] update

---
 public/index.html                 |   2 +-
 src/components/DialogWithMenu.vue | 293 ++++++++++++++++++++----------
 2 files changed, 196 insertions(+), 99 deletions(-)

diff --git a/public/index.html b/public/index.html
index f3ead19..eafa36f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -59,7 +59,7 @@
   <!-- 生产环境 -->
   <% if (process.env.VUE_APP_NODE_ENV === 'prod') { %>
     <script>
-      window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/renren-admin';
+      window.SITE_CONFIG['apiURL'] = 'http://10.196.233.155:8080/pms-am';
     </script>
   <% } %>
 </head>
diff --git a/src/components/DialogWithMenu.vue b/src/components/DialogWithMenu.vue
index efd6428..3ce20d9 100644
--- a/src/components/DialogWithMenu.vue
+++ b/src/components/DialogWithMenu.vue
@@ -1,5 +1,9 @@
 <template>
-  <el-dialog class="dialog-with-menu" :visible="dialogVisible" :destroy-on-close="false" @close="handleClose"
+  <el-dialog
+    class="dialog-with-menu"
+    :visible="dialogVisible"
+    :destroy-on-close="false"
+    @close="handleClose"
     :close-on-click-modal="configs.clickModalToClose ?? true">
     <!-- title  -->
     <div slot="title" class="dialog-title">
@@ -10,14 +14,28 @@
 
     <div class="dialog-body__inner relative">
       <!-- v-if="dataForm.id && !detailMode && /属性|详情/.test(activeMenu) && $hasPermission()" -->
-      <el-button v-if="configs.allowAdd ?? (dataForm.id && !detailMode && /属性|详情|参数/.test(activeMenu))" plain
-        type="primary" size="small" class="at-right-top" style="margin-bottom: 16px" @click="handleAddParam()">+
-        添加</el-button>
+      <el-button
+        v-if="configs.allowAdd ?? (dataForm.id && !detailMode && /属性|详情|参数/.test(activeMenu))"
+        plain
+        type="primary"
+        size="small"
+        class="at-right-top"
+        style="margin-bottom: 16px"
+        @click="handleAddParam()">
+        + 添加
+      </el-button>
       <template v-if="dataForm.id && !detailMode && /附件/.test(activeMenu)">
-        <el-upload style="position: absolute; width: 100%; height: 0" name="files" :action="uploadUrl"
-          :show-file-list="false" :headers="uploadHeaders" :on-success="handleUploadSuccess"
+        <el-upload
+          style="position: absolute; width: 100%; height: 0"
+          name="files"
+          :action="uploadUrl"
+          :show-file-list="false"
+          :headers="uploadHeaders"
+          :on-success="handleUploadSuccess"
           :before-upload="handleUploadCheck">
-          <el-button plain type="primary" size="small" class="at-right-top" style=""> <i class="el-icon-upload"></i> 上传
+          <el-button plain type="primary" size="small" class="at-right-top" style="">
+            <i class="el-icon-upload"></i>
+            上传
           </el-button>
         </el-upload>
       </template>
@@ -27,11 +45,12 @@
         <!-- <el-tab-pane v-for="(tab, index) in configs.menu" :key="index" :label="tab.name" :name="tab.name"> -->
         <el-tab-pane v-for="(tab, index) in actualMenus" :key="index" :name="tab.name">
           <span class="slot" slot="label">
-            <i :class="{
-              'el-icon-edit': tab.key === 'info',
-              'el-icon-s-data': tab.key === 'attr',
-              'el-icon-folder-opened': tab.key === 'attachment',
-            }"></i>
+            <i
+              :class="{
+                'el-icon-edit': tab.key === 'info',
+                'el-icon-s-data': tab.key === 'attr',
+                'el-icon-folder-opened': tab.key === 'attachment',
+              }"></i>
             {{ tab.name }}
           </span>
 
@@ -41,33 +60,72 @@
             <el-form ref="dataForm" :model="dataForm" v-loading="loadingStatus">
               <el-row v-for="(row, rowIndex) in configs.form.rows" :key="'row_' + rowIndex" :gutter="20">
                 <el-col v-for="(col, colIndex) in row" :key="colIndex" :span="24 / row.length">
-                  <el-form-item :label="col.label" :prop="col.prop" :rules="col.rules || null"
+                  <el-form-item
+                    :label="col.label"
+                    :prop="col.prop"
+                    :rules="col.rules || null"
                     v-show="!col.forceDisabled || (col.forceDisabled && dataForm.id)">
                     <div v-if="col.forceDisabled && dataForm.id" class="force-disabled">
                       <el-tag :key="col.key" :type="col.type">{{ dataForm[col.prop] || "-" }}</el-tag>
                     </div>
-                    <el-input v-if="col.input" v-model="dataForm[col.prop]" clearable
-                      :disabled="disableCondition(col.prop)" v-bind="col.elparams" />
-                    <el-cascader v-if="col.cascader" v-model="dataForm[col.prop]" :options="col.options"
-                      :disabled="detailMode" v-bind="col.elparams"></el-cascader>
-                    <el-select v-if="col.select" v-model="dataForm[col.prop]" clearable
-                      :disabled="disableCondition(col.prop)" v-bind="col.elparams"
+                    <el-input
+                      v-if="col.input"
+                      v-model="dataForm[col.prop]"
+                      clearable
+                      :disabled="disableCondition(col.prop)"
+                      v-bind="col.elparams" />
+                    <el-cascader
+                      v-if="col.cascader"
+                      v-model="dataForm[col.prop]"
+                      :options="col.options"
+                      :disabled="detailMode"
+                      v-bind="col.elparams"></el-cascader>
+                    <el-select
+                      v-if="col.select"
+                      v-model="dataForm[col.prop]"
+                      clearable
+                      :disabled="disableCondition(col.prop)"
+                      v-bind="col.elparams"
                       @change="handleSelectChange(col, $event)">
-                      <el-option v-for="(opt, optIdx) in col.options" :key="'option_' + optIdx" :label="opt.label"
-                        :value="opt.value" />
+                      <el-option
+                        v-for="(opt, optIdx) in col.options"
+                        :key="'option_' + optIdx"
+                        :label="opt.label"
+                        :value="opt.value">
+                        <span>{{ opt.label }}</span>
+                        <span v-if="col.customLabel" style="display: inline-clock; margin-left: 12px; font-size: 0.9em">
+                          {{ opt[col.customLabel] || "-" }}
+                        </span>
+                      </el-option>
                     </el-select>
-                    <el-switch v-if="col.switch" v-model="dataForm[col.prop]" :active-value="1" :inactive-value="0"
-                      @change="handleSwitchChange" :disabled="disableCondition(col.prop)" />
-                    <el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]"
-                      :disabled="disableCondition(col.prop)" v-bind="col.elparams" />
-                    <quillEditor v-if="col.richInput" ref="quill-editor" v-model="dataForm[col.prop]"
-                      :options="col.quillConfig ?? defaultQuillConfig" style="margin-top: 42px"
+                    <el-switch
+                      v-if="col.switch"
+                      v-model="dataForm[col.prop]"
+                      :active-value="1"
+                      :inactive-value="0"
+                      @change="handleSwitchChange"
+                      :disabled="disableCondition(col.prop)" />
+                    <el-input
+                      v-if="col.textarea"
+                      type="textarea"
+                      v-model="dataForm[col.prop]"
+                      :disabled="disableCondition(col.prop)"
+                      v-bind="col.elparams" />
+                    <quillEditor
+                      v-if="col.richInput"
+                      ref="quill-editor"
+                      v-model="dataForm[col.prop]"
+                      :options="col.quillConfig ?? defaultQuillConfig"
+                      style="margin-top: 42px"
                       :disabled="disableCondition(col.prop)" />
 
                     <div class="" v-if="col.component" style="margin: 42px 0 0">
                       <!-- 下面这个 component 几乎是为 富文本 quill 定制的了... TODO：后续可能会根据业务需求创建新的版本  -->
-                      <component :is="col.component" :key="'component_' + col.prop"
-                        @update:modelValue="handleComponentModelUpdate(col.prop, $event)" :modelValue="dataForm[col.prop]"
+                      <component
+                        :is="col.component"
+                        :key="'component_' + col.prop"
+                        @update:modelValue="handleComponentModelUpdate(col.prop, $event)"
+                        :modelValue="dataForm[col.prop]"
                         :mode="detailMode ? 'detail' : dataForm.id ? 'edit' : 'create'" />
                     </div>
                     <!-- add more...  -->
@@ -79,13 +137,27 @@
 
           <!-- 表格标签页 -->
           <div v-if="dataForm.id && tab.key === 'attr'" key="attr-list">
-            <BaseListTable :table-config="null" :column-config="filteredTableProps" :table-data="subList"
-              @operate-event="handleTableRowOperate" :current-page="attrPage" :current-size="attrSize"
-              :refresh-layout-key="Math.random()" v-loading="loadingStatus" />
+            <BaseListTable
+              :table-config="null"
+              :column-config="filteredTableProps"
+              :table-data="subList"
+              @operate-event="handleTableRowOperate"
+              :current-page="attrPage"
+              :current-size="attrSize"
+              :refresh-layout-key="Math.random()"
+              v-loading="loadingStatus" />
             <!-- paginator  -->
-            <el-pagination class="" style="text-align: left" background @size-change="handleSizeChange"
-              @current-change="handlePageChange" :current-page.sync="attrPage" :page-sizes="[5, 10, 20]"
-              :page-size="attrSize" :total="attrTotal" layout="total, sizes, prev, next"></el-pagination>
+            <el-pagination
+              class=""
+              style="text-align: left"
+              background
+              @size-change="handleSizeChange"
+              @current-change="handlePageChange"
+              :current-page.sync="attrPage"
+              :page-sizes="[5, 10, 20]"
+              :page-size="attrSize"
+              :total="attrTotal"
+              layout="total, sizes, prev, next"></el-pagination>
           </div>
 
           <!-- 附件标签页 -->
@@ -111,7 +183,10 @@
               </ul>
             </div>
             <!-- img preview dialog  -->
-            <el-dialog key="image-preview-dialog" class="image-preview-dialog" :visible.sync="imgPreviewDialogVisible"
+            <el-dialog
+              key="image-preview-dialog"
+              class="image-preview-dialog"
+              :visible.sync="imgPreviewDialogVisible"
               :append-to-body="true">
               <div class="img-container">
                 <img width="100%" :src="currentImgUrl" alt="" />
@@ -123,15 +198,26 @@
     </div>
 
     <!-- sub dialog  -->
-    <small-dialog :append-to-body="true" v-if="showSubDialog" ref="subDialog" :url="urls.subase"
-      :configs="configs.subDialog" :related-id="dataForm.id" @refreshDataList="getSubList"></small-dialog>
+    <small-dialog
+      :append-to-body="true"
+      v-if="showSubDialog"
+      ref="subDialog"
+      :url="urls.subase"
+      :configs="configs.subDialog"
+      :related-id="dataForm.id"
+      @refreshDataList="getSubList"></small-dialog>
 
     <!-- footer  -->
     <div slot="footer">
       <template v-for="(operate, index) in configs.form.operations">
-        <el-button v-if="showButton(operate)" :key="'operation_' + index" :type="operate.type"
+        <el-button
+          v-if="showButton(operate)"
+          :key="'operation_' + index"
+          :type="operate.type"
           @click="handleBtnClick(operate)"
-          :loading="(operate.name === 'add' || operate.name === 'update') && btnLoading">{{ operate.label }}</el-button>
+          :loading="(operate.name === 'add' || operate.name === 'update') && btnLoading">
+          {{ operate.label }}
+        </el-button>
       </template>
       <el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
     </div>
@@ -186,7 +272,7 @@ export default {
     const dataForm = {};
     const autoDisabledQueue = [];
     const watingToRefreshQueue = [];
-    const cached = {}
+    const cached = {};
 
     this.configs.form.rows.forEach((row) => {
       row.forEach((col) => {
@@ -202,7 +288,7 @@ export default {
             if (res.code === 0) {
               if (col.cacheFetchedData) {
                 // cache fetched data
-                cached[col.prop] = 'list' in res.data ? res.data.list : (Array.isArray(res.data) ? res.data : [])
+                cached[col.prop] = "list" in res.data ? res.data.list : Array.isArray(res.data) ? res.data : [];
               }
 
               if (!col.options || !col.options.length) {
@@ -211,13 +297,13 @@ export default {
                   "options",
                   "list" in res.data
                     ? res.data.list.map((i) => ({
-                      label: col.optionLabel ? i[col.optionLabel] : i.name,
-                      value: col.optionValue ? i[col.optionValue] : i.id,
-                    }))
+                        label: col.optionLabel ? i[col.optionLabel] : i.name,
+                        value: col.optionValue ? i[col.optionValue] : i.id,
+                      }))
                     : res.data.map((i) => ({
-                      label: col.optionLabel ? i[col.optionLabel] : i.name,
-                      value: col.optionValue ? i[col.optionValue] : i.id,
-                    }))
+                        label: col.optionLabel ? i[col.optionLabel] : i.name,
+                        value: col.optionValue ? i[col.optionValue] : i.id,
+                      }))
                 );
               }
               // col.options = res.data.list;
@@ -228,13 +314,13 @@ export default {
                   "options",
                   "list" in res.data
                     ? res.data.list.map((i) => ({
-                      label: col.optionLabel ? i[col.optionLabel] : i.name,
-                      value: col.optionValue ? i[col.optionValue] : i.id,
-                    }))
+                        label: col.optionLabel ? i[col.optionLabel] : i.name,
+                        value: col.optionValue ? i[col.optionValue] : i.id,
+                      }))
                     : res.data.map((i) => ({
-                      label: col.optionLabel ? i[col.optionLabel] : i.name,
-                      value: col.optionValue ? i[col.optionValue] : i.id,
-                    }))
+                        label: col.optionLabel ? i[col.optionLabel] : i.name,
+                        value: col.optionValue ? i[col.optionValue] : i.id,
+                      }))
                 );
               }
             } else {
@@ -322,30 +408,39 @@ export default {
   mounted() {
     this.configs.form.rows.forEach((row) => {
       row.forEach((col) => {
-        if (col.changeReflects && typeof col.changeReflects === 'object' && 'fromKey' in col.changeReflects && 'toProp' in col.changeReflects) {
+        if (
+          col.changeReflects &&
+          typeof col.changeReflects === "object" &&
+          "fromKey" in col.changeReflects &&
+          "toProp" in col.changeReflects
+        ) {
           this.$watch(
             () => this.dataForm[col.prop],
-            val => {
-              if (val && (col.prop in this.cached)) {
-                console.log("here changeReflects", col.prop, col.changeReflects.toProp, this.cached[col.prop])
-                if (typeof col.changeReflects.fromKey === 'string') {
-                  this.dataForm[col.changeReflects.toProp] = this.cached[col.prop].find(item => item.id === val)?.[col.changeReflects.fromKey]
+            (val) => {
+              if (val && col.prop in this.cached) {
+                console.log("here changeReflects", col.prop, col.changeReflects.toProp, this.cached[col.prop]);
+                if (typeof col.changeReflects.fromKey === "string") {
+                  this.dataForm[col.changeReflects.toProp] = this.cached[col.prop].find((item) => item.id === val)?.[
+                    col.changeReflects.fromKey
+                  ];
                 } else if (Array.isArray(col.changeReflects.fromKey) && col.changeReflects.delimiter) {
-                  const foundItem = this.dataForm[col.changeReflects.toProp] = this.cached[col.prop].find(item => item.id === val)
+                  const foundItem = (this.dataForm[col.changeReflects.toProp] = this.cached[col.prop].find(
+                    (item) => item.id === val
+                  ));
                   if (foundItem) {
-                    const values = col.changeReflects.fromKey.map(key => foundItem[key])
-                    this.dataForm[col.changeReflects.toProp] = values.join(col.changeReflects.delimiter)
+                    const values = col.changeReflects.fromKey.map((key) => foundItem[key]);
+                    this.dataForm[col.changeReflects.toProp] = values.join(col.changeReflects.delimiter);
                   } else {
-                    this.dataForm[col.changeReflects.toProp] = col.changeReflects.delimiter
-                    console.log("[DialogWithMenu] mounted() 没找到对应数据")
+                    this.dataForm[col.changeReflects.toProp] = col.changeReflects.delimiter;
+                    console.log("[DialogWithMenu] mounted() 没找到对应数据");
                   }
                 }
               }
             },
             {
-              immediate: false
+              immediate: false,
             }
-          )
+          );
         }
       });
     });
@@ -354,8 +449,8 @@ export default {
   watch: {
     dialogVisible: function (val) {
       if (!!val) {
-        this.attrPage = 1
-        this.attrSize = 10
+        this.attrPage = 1;
+        this.attrSize = 10;
       }
     },
   },
@@ -369,7 +464,9 @@ export default {
       });
     },
     filteredTableProps() {
-      return this.detailMode ? this.configs.table.props.filter((v) => v.prop !== "operations") : this.configs.table.props;
+      return this.detailMode
+        ? this.configs.table.props.filter((v) => v.prop !== "operations")
+        : this.configs.table.props;
     },
     uploadHeaders() {
       return {
@@ -477,11 +574,11 @@ export default {
                     /** 返回的文件列表 */
                     this.fileList = res.data.files
                       ? res.data.files.map((file) => ({
-                        id: file.id,
-                        name: file.fileUrl.split("/").pop(),
-                        url: file.fileUrl,
-                        typeCode: file.typeCode,
-                      }))
+                          id: file.id,
+                          name: file.fileUrl.split("/").pop(),
+                          url: file.fileUrl,
+                          typeCode: file.typeCode,
+                        }))
                       : [];
                   }
                 }
@@ -520,14 +617,14 @@ export default {
                 this.currentImgUrl = URL.createObjectURL(res);
                 this.imgPreviewDialogVisible = true;
               } else if (/pdf/i.test(res.type)) {
-                // 预览pdf 
-                let a = document.createElement('a')
-                a.setAttribute('target', '_blank')
-                a.href = URL.createObjectURL(res)
-                a.click()
-                console.log('before remove a ', a)
-                a.remove()
-                console.log('removed a ', a)
+                // 预览pdf
+                let a = document.createElement("a");
+                a.setAttribute("target", "_blank");
+                a.href = URL.createObjectURL(res);
+                a.click();
+                console.log("before remove a ", a);
+                a.remove();
+                console.log("removed a ", a);
               } else {
                 this.$message({
                   message: "非图片和PDF文件请下载后预览",
@@ -601,7 +698,7 @@ export default {
                 }
               });
             })
-            .catch((err) => { });
+            .catch((err) => {});
         }
       }
     },
@@ -685,7 +782,7 @@ export default {
             this.$refs.dataForm[0].validate((passed, result) => {
               if (passed) {
                 // 如果通过验证
-                this.btnLoading = true
+                this.btnLoading = true;
                 this.loadingStatus = true;
                 const method = payload.name === "add" ? "POST" : "PUT";
 
@@ -706,7 +803,7 @@ export default {
                 }
 
                 // 实际发送请求
-                this.btnLoading = true
+                this.btnLoading = true;
                 this.$http({
                   url: this.urls.base,
                   method,
@@ -716,7 +813,7 @@ export default {
                   },
                 })
                   .then(({ data: res }) => {
-                    this.btnLoading = false
+                    this.btnLoading = false;
                     this.loadingStatus = false;
                     console.log("[add&update] res is: ", res);
                     if (res.code === 0) {
@@ -751,13 +848,13 @@ export default {
                         type: "error",
                         duration: 2000,
                       });
-                      if (this.btnLoading) this.btnLoading = false
+                      if (this.btnLoading) this.btnLoading = false;
                     }
                   })
                   .catch((errMsg) => {
                     this.$message.error("参数错误：" + errMsg);
                     if (this.loadingStatus) this.loadingStatus = false;
-                    if (this.btnLoading) this.btnLoading = false
+                    if (this.btnLoading) this.btnLoading = false;
                   });
               } else {
                 this.$message.error("请核查字段信息");
@@ -780,7 +877,7 @@ export default {
     },
     handleSizeChange(val) {
       this.attrPage = 1;
-      this.attrSize = val
+      this.attrSize = val;
       this.getSubList(1, val);
     },
 
@@ -844,8 +941,8 @@ export default {
       switch (type) {
         case "delete": {
           // 确认是否删除
-          console.log('delete....', data)
-          const itemName = typeof data === 'object' ? (data.attrName || data.name || data.material || data.id) : data
+          console.log("delete....", data);
+          const itemName = typeof data === "object" ? data.attrName || data.name || data.material || data.id : data;
           return this.$confirm(`是否删除条目: ${itemName}`, "提示", {
             confirmButtonText: "确认",
             cancelButtonText: "我再想想",
@@ -869,7 +966,7 @@ export default {
                 }
               });
             })
-            .catch((err) => { });
+            .catch((err) => {});
         }
         case "edit": {
           this.handleAddParam(data); /** data is ==> id */
@@ -898,7 +995,7 @@ export default {
 /* border-bottom-color: #0b58ff; */
 /* } */
 
-.dialog-with-menu>>>.el-dialog__body {
+.dialog-with-menu >>> .el-dialog__body {
   /* padding-top: 16px !important;
   padding-bottom: 16px !important; */
   padding-top: 0 !important;
@@ -910,7 +1007,7 @@ export default {
   width: 100% !important;
 }
 
-.dialog-with-menu>>>.el-dialog__header {
+.dialog-with-menu >>> .el-dialog__header {
   padding: 10px 20px 10px;
   /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
 }
@@ -927,7 +1024,7 @@ export default {
 }
 
 ul.file-list,
-ul.file-list>li {
+ul.file-list > li {
   padding: 0;
   margin: 0;
   list-style: none;
@@ -942,7 +1039,7 @@ ul.file-list>li {
   flex-direction: column;
 }
 
-ul.file-list>li {
+ul.file-list > li {
   border-radius: 4px;
   background-color: #edededd2;
   padding: 8px;
@@ -951,7 +1048,7 @@ ul.file-list>li {
   justify-content: space-between;
 }
 
-ul.file-list>li:hover {
+ul.file-list > li:hover {
   background-color: #ededed;
 }