Browse Source

产品选择逻辑添加

lucw 8 tháng trước cách đây
mục cha
commit
ab4e6cf4e9

+ 1 - 5
src/views/indicator/components/definitionDetials.vue

@@ -16,11 +16,7 @@
         :datasource="list"
       >
         <template v-slot:expand="{ row }">
-          <el-table
-            :data="row.indicatorAttributeDefinitions"
-            border
-            style="width: 100%"
-          >
+          <el-table :data="row.values" border style="width: 100%">
             <el-table-column type="index" width="50" label="序号">
             </el-table-column>
             <el-table-column prop="name" label="选项"> </el-table-column>

+ 139 - 59
src/views/regulationManagement/components/addOrEditDialog.vue

@@ -93,15 +93,6 @@
       </el-row>
 
       <headerTitle style="margin-top: 20px" title="考核指标限制条件">
-        <el-button
-          size="small"
-          type="primary"
-          icon="el-icon-plus"
-          class="ele-btn-icon"
-          @click="addGroups"
-        >
-          添加筛选器
-        </el-button>
       </headerTitle>
       <el-row>
         <el-col
@@ -168,6 +159,7 @@
                 </el-select>
 
                 <el-select
+                  v-if="val.conditionType != 3"
                   v-model="val.valuesIds"
                   multiple
                   placeholder="请选择"
@@ -183,6 +175,26 @@
                   >
                   </el-option>
                 </el-select>
+
+                <!-- 选择产品 -->
+                <div
+                  v-else
+                  class="select-product"
+                  @click="openSelectProduct(val)"
+                >
+                  <el-input
+                    placeholder="请选择产品"
+                    :value="
+                      val.values[0]
+                        ? val.values[0].valJson.map((i) => i.name).join(', ')
+                        : ''
+                    "
+                    readonly
+                    disabled
+                    suffix-icon="el-icon-arrow-right"
+                  />
+                </div>
+
                 <i
                   v-show="index == 0"
                   style="color: #fff; font-size: 16px; margin-left: 5px"
@@ -229,11 +241,16 @@
           <!-- 提示 请先选择 业务类型 和 考核指标 -->
           <div>
             <el-empty
-              description="请选择 业务类型  考核指标 后添加筛选器"
+              description="请选择业务类型和考核指标后添加筛选器"
             ></el-empty>
           </div>
         </el-col>
       </el-row>
+
+      <SelectProduct
+        ref="SelectProductRef"
+        @chooseProcess="chooseProcess"
+      ></SelectProduct>
     </el-form>
     <div slot="footer">
       <el-button type="primary" @click="handleSave(0)" v-click-once
@@ -243,6 +260,7 @@
     </div>
   </ele-modal>
 </template>
+
 <script>
   import { mapGetters } from 'vuex';
   import {
@@ -251,23 +269,46 @@
     getIndicatorById,
     updateIndicator
   } from '@/api/indicator/index.js';
+  import SelectProduct from '@/components/select/SelectProduct';
 
   const defForm = {
     id: null,
     name: '',
     indicator: '',
     indicatorName: '',
-    status: '',
     businessType: '',
     remark: '',
     // 条件
     groups: [],
     createUserName: '',
     updateUserName: '',
-    enable: 0
+    enable: 0,
+    code: ''
   };
+
+  const conditionsItem = {
+    className: '',
+    columnComment: '',
+    columnName: '',
+    conditionType: null,
+    compareOperator: '',
+    createUserName: '',
+    groupId: 0,
+    indicatorId: null,
+    logicOperator: '',
+    sortNum: 0,
+    tableName: '',
+    fixedCondition: null,
+    updateUserName: '',
+    isSelectAll: 0,
+    values: [],
+    valuesIds: []
+  };
+
   export default {
-    components: {},
+    components: {
+      SelectProduct
+    },
     data() {
       return {
         addOrEditDialogFlag: false,
@@ -295,7 +336,9 @@
         },
         // 业务类型 考核指标 和条件
         allEnable: [],
-        loading: false
+        loading: false,
+        // 当前操作的条件
+        currentItem: null
       };
     },
     computed: {
@@ -303,14 +346,14 @@
       // 获取考核指标列表
       indicatorList() {
         const item = this.allEnable.find(
-          (el) => el.businessType == this.form.businessType
+          (el) => el.businessType === this.form.businessType
         );
         return item?.indicatorDefinitions || [];
       },
       // 获取考核指标条件值
       conditionsList() {
         const item = this.indicatorList.find(
-          (el) => el.indicator == this.form.indicator
+          (el) => el.indicator === this.form.indicator
         );
         return item?.indicatorConditionDefinitions || [];
       }
@@ -353,31 +396,11 @@
         this.form.groups.splice(i, 1);
       },
       addGroups() {
-        if (this.form.businessType === '') {
-          return this.$message.warning('请先选择业务类型');
-        }
-        if (this.form.indicator === '') {
-          return this.$message.warning('请先选择考核指标');
+        if (this.form.businessType === '' || this.form.indicator === '') {
+          return this.$message.warning('请先选择业务类型和考核指标');
         }
         this.form.groups.push({
-          conditions: [
-            {
-              className: '',
-              columnComment: '',
-              columnName: '',
-              compareOperator: '',
-              createUserName: '',
-              groupId: 0,
-              indicatorId: null,
-              logicOperator: '',
-              sortNum: 0,
-              tableName: '',
-              fixedCondition: null,
-              updateUserName: '',
-              values: [],
-              valuesIds: []
-            }
-          ],
+          conditions: [{ ...JSON.parse(JSON.stringify(conditionsItem)) }],
           createUserName: this.user.info.name,
           indicatorId: null,
           logicOperator: 'or',
@@ -388,20 +411,7 @@
       // 添加子条件
       addItem(item) {
         item.conditions.push({
-          className: '',
-          columnComment: '',
-          columnName: '',
-          compareOperator: '',
-          createUserName: '',
-          groupId: 0,
-          indicatorId: null,
-          logicOperator: '',
-          sortNum: 0,
-          tableName: '',
-          fixedCondition: null,
-          updateUserName: '',
-          values: [],
-          valuesIds: []
+          ...JSON.parse(JSON.stringify(conditionsItem))
         });
       },
       handleSave(flag) {
@@ -422,11 +432,12 @@
             // 判断每个condition的值是否填写完整
             for (let j = 0; j < group.conditions.length; j++) {
               const condition = group.conditions[j];
+
               if (
                 !condition.columnComment ||
                 !condition.compareOperator ||
-                !condition.valuesIds ||
-                condition.valuesIds.length === 0
+                !condition.values ||
+                condition.values.length === 0
               ) {
                 return this.$message.warning('请填写完整每个条件的信息');
               }
@@ -454,7 +465,7 @@
       //关闭弹窗
       cancel() {
         this.form = {
-          ...defForm
+          ...JSON.parse(JSON.stringify(defForm))
         };
         this.$refs['form'].resetFields();
         this.addOrEditDialogFlag = false;
@@ -468,22 +479,31 @@
         const item = this.conditionsList.find(
           (el) => el.columnComment == val.columnComment
         );
-        return item?.indicatorAttributeDefinitions || [];
+        return item?.values || [];
       },
       // 修改条件
       itemConditionsChange(val) {
-        const item = this.conditionsList.find((el) => el.id == val.indicatorId);
+        const item = this.conditionsList.find(
+          (el) => el.columnComment == val.columnComment
+        );
+        console.log('item', item);
         if (item) {
           val.columnName = item.columnName;
           val.tableName = item.tableName;
           val.className = item.className;
           val.fixedCondition = item.fixedCondition;
+          val.conditionType = item.conditionType;
         } else {
           val.columnName = '';
           val.tableName = '';
           val.className = '';
           val.fixedCondition = null;
+          val.conditionType = null;
         }
+
+        val.valuesIds = [];
+        val.values = [];
+        val.isSelectAll = 0;
       },
       // 修改条件值
       valuesChange(val) {
@@ -502,6 +522,12 @@
               val: el.val
             };
           });
+
+        if (val.values.length === list.length) {
+          val.isSelectAll = 1;
+        } else {
+          val.isSelectAll = 0;
+        }
       },
       //  考核指标修改同步指标名称
       indicatorChange() {
@@ -511,6 +537,9 @@
         this.form.indicatorName = item?.indicatorName || '';
         // 清空条件
         this.form.groups = [];
+
+        // 添加一条默认条件
+        this.addGroups();
       },
       // 业务类型修改 同步考核指标名称 和 清空条件
       businessTypeChange() {
@@ -518,6 +547,32 @@
         this.form.indicatorName = '';
         // 清空条件
         this.form.groups = [];
+      },
+      // 去选择产品
+      openSelectProduct(item) {
+        this.currentItem = item;
+        this.$refs.SelectProductRef.open();
+      },
+      // 选择产品完成
+      chooseProcess(productList, current) {
+        console.log('productList', productList);
+        this.currentItem.values = [
+          {
+            conditionId: null,
+            createUserName: this.user.info.name,
+            groupId: null,
+            indicatorId: null,
+            sortNum: 0,
+            updateUserName: this.user.info.name,
+            valJson: productList.map((i) => {
+              return {
+                code: i.code,
+                name: i.name,
+                id: i.id
+              };
+            })
+          }
+        ];
       }
     }
   };
@@ -568,5 +623,30 @@
       }
     }
   }
+
+  .select-product {
+    margin-left: 8px;
+    width: 100%;
+    box-sizing: border-box;
+    position: relative;
+
+    &::after {
+      content: '';
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      opacity: 0;
+    }
+
+    :deep(.is-disabled) {
+      .el-input__inner {
+        background-color: #fff;
+        cursor: pointer;
+        color: var(--color-text-regular);
+      }
+    }
+  }
 </style>
-@/api/regulationManagement/index.js