update 2023.4.6

2023-04-06 15:58:02 +08:00
parent 247cca284e
commit 10b50df6f6
14 changed files with 343 additions and 339 deletions
--- a/src/components/BaseListTable.vue
+++ b/src/components/BaseListTable.vue
@@ -47,8 +47,9 @@
          :tooltip-effect="head.tooltipEffect || 'light'"
          filter-placement="top"
          :align="head.align || null"
+          :class-name="head.className ?? 'initial-column-class'"
          v-bind="head.more"
-          :show-overflow-tooltip="head.showOverflowTooltip || !(head.prop === 'operations')"
+          :show-overflow-tooltip="head.showOverflowTooltip ?? !(head.prop === 'operations')"
          >
          <!-- :show-overflow-tooltip="head.showOverflowTooltip || true" -->
          <!-- 子组件 -->
@@ -132,4 +133,13 @@ export default {
 .cell button {
  background: blue;
 }
+
+.base-list-table >>> .initial-column-class .cell {
+  text-shadow: unset;
+}
+
+  .base-list-table >>> .no-padding-class .cell {
+  line-height: 1.75;
+  padding: 0;
+}
 </style>
--- a/src/components/DialogWithMenu.vue
+++ b/src/components/DialogWithMenu.vue
@@ -1,11 +1,6 @@
 <template>
-  <el-dialog
-    class="dialog-with-menu"
-    :visible="dialogVisible"
-    :destroy-on-close="false"
-    @close="handleClose"
-    :close-on-click-modal="configs.clickModalToClose ?? true"
-  >
+  <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">
      <h1 class="">
@@ -15,27 +10,14 @@

    <div class="dialog-body__inner relative">
      <!-- v-if="dataForm.id && !detailMode && /属性|详情/.test(activeMenu) && $hasPermission()" -->
-      <el-button
-        v-if="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"
-          :before-upload="handleUploadCheck"
-        >
-          <el-button plain type="primary" size="small" class="at-right-top" style=""> <i class="el-icon-upload"></i> 上传 </el-button>
+        <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>
        </el-upload>
      </template>

@@ -44,13 +26,11 @@
        <!-- <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>

@@ -60,61 +40,34 @@
            <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" v-show="!col.forceDisabled || (col.forceDisabled && dataForm.id)">
+                  <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"
-                      @change="handleSelectChange(col, $event)"
-                    >
-                      <el-option v-for="(opt, optIdx) in col.options" :key="'option_' + optIdx" :label="opt.label" :value="opt.value" />
+                    <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-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"
-                      :disabled="disableCondition(col.prop)"
-                    />
+                    <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]"
-                        :mode="detailMode ? 'detail' : dataForm.id ? 'edit' : 'create'"
-                      />
+                      <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...  -->
                  </el-form-item>
@@ -125,29 +78,13 @@

          <!-- 表格标签页 -->
          <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>

          <!-- 附件标签页 -->
@@ -173,7 +110,8 @@
              </ul>
            </div>
            <!-- img preview dialog  -->
-            <el-dialog key="image-preview-dialog" class="image-preview-dialog" :visible.sync="imgPreviewDialogVisible" :append-to-body="true">
+            <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="" />
              </div>
@@ -184,27 +122,15 @@
    </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>
@@ -276,8 +202,14 @@ export default {
                  col,
                  "options",
                  "list" in res.data
-                    ? res.data.list.map((i) => ({ label: i.name, value: i.id }))
-                    : res.data.map((i) => ({ label: i.name, value: i.id }))
+                    ? res.data.list.map((i) => ({
+                      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,
+                    }))
                );
              // col.options = res.data.list;
              else if (col.options.length) {
@@ -286,8 +218,14 @@ export default {
                  col,
                  "options",
                  "list" in res.data
-                    ? res.data.list.map((i) => ({ label: i.name, value: i.id }))
-                    : res.data.map((i) => ({ label: i.name, value: i.id }))
+                    ? res.data.list.map((i) => ({
+                      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,
+                    }))
                );
              }
            } else {
@@ -364,7 +302,7 @@ export default {
        scrollingContainer: null,
      },
      attrPage: 1,
-      attrSize: 5,
+      attrSize: 10,
      attrTotal: 0,
      fileList: [],
      imgPreviewDialogVisible: false,
@@ -375,7 +313,7 @@ export default {
    dialogVisible: function (val) {
      if (!!val) {
        this.attrPage = 1
-        this.attrSize = 5
+        this.attrSize = 10
      }
    },
  },
@@ -497,11 +435,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,
+                      }))
                      : [];
                  }
                }
@@ -612,7 +550,7 @@ export default {
                }
              });
            })
-            .catch((err) => {});
+            .catch((err) => { });
        }
      }
    },
@@ -715,7 +653,7 @@ export default {
                    extraIds[key] = value;
                  });
                }
-                
+
                // 实际发送请求
                this.btnLoading = true
                this.$http({
@@ -727,7 +665,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) {
@@ -770,7 +708,7 @@ export default {
                    if (this.loadingStatus) this.loadingStatus = false;
                    if (this.btnLoading) this.btnLoading = false
                  });
-                } else {
+              } else {
                this.$message.error("请核查字段信息");
              }
            });
@@ -880,7 +818,7 @@ export default {
                }
              });
            })
-            .catch((err) => {});
+            .catch((err) => { });
        }
        case "edit": {
          this.handleAddParam(data); /** data is ==> id */
@@ -909,7 +847,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;
@@ -921,7 +859,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); */
 }
@@ -938,7 +876,7 @@ export default {
 }

 ul.file-list,
-ul.file-list > li {
+ul.file-list>li {
  padding: 0;
  margin: 0;
  list-style: none;
@@ -953,7 +891,7 @@ ul.file-list > li {
  flex-direction: column;
 }

-ul.file-list > li {
+ul.file-list>li {
  border-radius: 4px;
  background-color: #edededd2;
  padding: 8px;
@@ -962,7 +900,7 @@ ul.file-list > li {
  justify-content: space-between;
 }

-ul.file-list > li:hover {
+ul.file-list>li:hover {
  background-color: #ededed;
 }

@@ -985,5 +923,4 @@ ul.file-list > li:hover {

 .force-disabled {
  margin-top: 42px;
-}
-</style>
+}</style>