update DialogWithMenu & SmallDialog

2023-02-03 13:52:41 +08:00 · 2023-02-03 13:52:41 +08:00 · 591b60de61
--- a/src/components/DialogWithMenu.vue
+++ b/src/components/DialogWithMenu.vue
@ -12,50 +12,61 @@
        {{ detailMode ? "查看详情" : dataForm.id ? "编辑" : "新增" }}
      </h1>
    </div>
-    <!-- menu  -->
-    <el-tabs v-model="activeMenu" type="card" @tab-click="handleTabClick">
-      <!-- <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" :label="tab.name" :name="tab.name">
-        <div v-if="index === 0">
-          <!-- form  -->
-          <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-input v-if="col.input" v-model="dataForm[col.prop]" clearable :disabled="detailMode" v-bind="col.elparams" />
-                  <el-select
-                    v-if="col.select"
-                    v-model="dataForm[col.prop]"
-                    clearable
-                    :disabled="detailMode"
-                    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="detailMode"
-                  />
-                  <el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
-                  <!-- add more...  -->
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
-        </div>
-        <div v-if="dataForm.id && index === 1">
-          <el-button v-if="!detailMode" type="primary" style="margin-bottom: 16px" @click="handleAddParam()">添加</el-button>
-          <BaseListTable :table-config="null" :column-config="filteredTableProps" :table-data="subList" @operate-event="handleTableRowOperate" />
-          <!-- paginator  -->
-        </div>
-      </el-tab-pane>
-    </el-tabs>

+    <div class="dialog-body__inner relative">
+      <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
+      >
+      <!-- menu  -->
+      <el-tabs v-model="activeMenu" type="card" @tab-click="handleTabClick">
+        <!-- <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" :label="tab.name" :name="tab.name">
+          <div v-if="index === 0">
+            <!-- form  -->
+            <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-input v-if="col.input" v-model="dataForm[col.prop]" clearable :disabled="detailMode" v-bind="col.elparams" />
+                    <el-select
+                      v-if="col.select"
+                      v-model="dataForm[col.prop]"
+                      clearable
+                      :disabled="detailMode"
+                      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="detailMode"
+                    />
+                    <el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
+                    <!-- add more...  -->
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+          <div v-if="dataForm.id && index === 1">
+            <BaseListTable :table-config="null" :column-config="filteredTableProps" :table-data="subList" @operate-event="handleTableRowOperate" />
+            <!-- paginator  -->
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
    <!-- sub dialog  -->
    <small-dialog
      :append-to-body="true"
@ -214,6 +225,9 @@ export default {
        if (this.dataForm.id) {
          // 如果是编辑
          this.loadingStatus = true;
+          // 提前获取属性列表
+          this.getSubList();
+          // 获取详情
          this.$http.get(this.urls.base + `/${this.dataForm.id}`).then(({ data: res }) => {
            if (res && res.code === 0) {
              const dataFormKeys = Object.keys(this.dataForm);
@ -312,11 +326,11 @@ export default {
      }
    },
    handleTabClick(payload) {
-      console.log("tab click payload: ", this.activeMenu);
-      if (this.activeMenu === this.configs.menu[1].name) {
-        // 获取数据
-        this.getSubList();
-      }
+    //   console.log("tab click payload: ", this.activeMenu);
+    //   if (this.activeMenu === this.configs.menu[1].name) {
+    //     // 获取数据
+    //     this.getSubList();
+    //   }
    },

    getSubList(page = 1, size = 20) {
@ -359,7 +373,7 @@ export default {
    },

    handleClose() {
-      this.resetForm()
+      this.resetForm();
      this.$emit("update:dialogVisible", false);
    },

@ -444,4 +458,15 @@ export default {
  padding: 10px 20px 10px;
  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
 }
+
+.relative {
+  position: relative;
+}
+
+.at-right-top {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10000;
+}
 </style>
--- a/src/components/SmallDialog.vue
+++ b/src/components/SmallDialog.vue
@ -7,6 +7,10 @@
 		:distory-on-close="true"
 		:close-on-click-modal="false"
 		v-bind="$attrs"
+		:width="'30%'"
+		:modal="false"
+		:fullscreen="false"
+		:top="'10vh'"
 	>
 		<!-- :append-to-body="appendToBody"> -->
 		<div>
@ -163,9 +167,6 @@ export default {
 					this.$http
 						.get(this.urls.subase + `/${this.dataForm.id}`)
 						.then(({ data: res }) => {
-							// dev env:
-							// if (LOCAL) res.data.id = res.data._id;
-							// end dev env
 							if (res && res.code === 0) {
 								const dataFormKeys = Object.keys(this.dataForm);
 								this.dataForm = __pick(res.data, dataFormKeys);
@ -223,3 +224,10 @@ export default {
 	},
 };
 </script>
+
+<style scoped>
+.a-small-dialog >>> .el-dialog {
+	border-radius: 8px;
+	box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
+}
+</style>
--- a/src/views/modules/pms/equipment/config.js
+++ b/src/views/modules/pms/equipment/config.js
@ -1,6 +1,8 @@
 import TableOperaionComponent from '@/components/noTemplateComponents/operationComponent'
 import TableTextComponent from '@/components/noTemplateComponents/detailComponent'
 import switchBtn from '@/components/noTemplateComponents/switchBtn'
+import { timeFilter } from '@/utils/filters'
+

 export default function () {

@ -48,7 +50,7 @@ export default function () {

  const dialogConfigs = {
    clickModalToClose: true,
-    menu: [{ name: '设备信息' }, { name: '设备属性信息', onlyEditMode: false }],
+    menu: [{ name: '设备信息' }, { name: '设备属性信息', onlyEditMode: true }],
    form: {
      rows: [
        [
@ -81,12 +83,13 @@ export default function () {
    },
    table: {
      // extraParams: ['stepId'],
-      extraParams: 'stepId',
+      extraParams: 'equipmentId',
      props: [
-        { prop: 'createTime', label: '创建时间' },
-        { prop: 'equipmentId', label: '所属设备id' },
+        { prop: 'createTime', label: '创建时间', filter: timeFilter },
+        // { prop: 'equipmentId', label: '所属设备id' },
        { prop: 'attrName', label: '属性名称', isEditField: true },
        { prop: 'attrValue', label: '属性值', isEditField: true },
+        { prop: 'remark', label: '备注', isEditField: true },
        {
          prop: 'operations',
          name: '操作',
@ -108,7 +111,7 @@ export default function () {
      extraParam: 'equipmentId',
      rows: [
        [
-          { input: true, label: '属性名称', prop: 'attrName', elparams: { placeholder: '请输入属性名称' } },
+          { input: true, label: '属性名称', prop: 'attrName', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入属性名称' } },
          { input: true, label: '属性值', prop: 'attrValue', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入属性值' } },
        ],
        [
@ -116,8 +119,8 @@ export default function () {
        ]
      ],
      operations: [
-        { name: 'add', label: '保存', type: 'primary', permission: 'pms:equipment:save', showOnEdit: false },
-        { name: 'update', label: '更新', type: 'primary', permission: 'pms:equipment:update', showOnEdit: true },
+        { name: 'add', label: '保存', type: 'primary', permission: 'pms:equipmentType:save', showOnEdit: false },
+        { name: 'update', label: '更新', type: 'primary', permission: 'pms:equipmentType:update', showOnEdit: true },
      ],
    },
  };
@ -135,7 +138,9 @@ export default function () {
    },
    urls: {
      base: '/pms/equipment',
-      page: '/pms/equipment/page'
+      page: '/pms/equipment/page',
+      subase: '/pms/equipmentAttr',
+      subpage: '/pms/equipmentAttr/page'
    }
  }
 }