折叠面板通过样式控制

src/views/mis/customerManagement/customer-form.vue

@@ -1,15 +1,15 @@
 <template>
-  <el-form :model="detailData" :disabled="editState" :rules="rules" :inline-message="true" :status-icon="true" ref="form"
+  <el-form :model="detailData" :disabled="editState" :rules="rules" :inline-message="true" :status-icon=true ref="form"
     class="MIS_FORM">
     <el-collapse v-model="activeNames">
-      <el-collapse-item name="1" :disabled="true">
+      <el-collapse-item name="1">
         <template slot="title">
           <i class="el-icon-postcard title"></i><span class="title">用户信息</span>
         </template>
         <el-descriptions :column="3" border size="mini" labelClassName="descLabel" contentClassName="descContent">
           <el-descriptions-item label="所属公司" labelClassName="redStar">
             <el-form-item prop="yhKhjbxx.ssgs">
-              <cpsCompany v-model="detailData.yhKhjbxx.ssgs" placeholder="请选择" style="width: 100%" @change="changeGs">
+              <cpsCompany v-model="detailData.yhKhjbxx.ssgs" placeholder="请选择" style="width:100%" @change="changeGs">
               </cpsCompany>
             </el-form-item>
           </el-descriptions-item>
@@ -22,10 +22,9 @@
           </el-descriptions-item>
           <el-descriptions-item label="抄 表 册" labelClassName="redStar">
             <el-form-item prop="yhKhjbxx.sscbb">
-              <cpsSelect v-model="detailData.yhKhjbxx.sscbb" placeholder="请选择" skey="cbb" :params="{
-                ssgs: detailData.yhKhjbxx.ssgs,
-                sscbpq: detailData.yhKhjbxx.sscbpq,
-              }" isDisabled="all" :refresh="cbbRefresh" :labelGroup="true" :filterable="true"></cpsSelect>
+              <cpsSelect v-model="detailData.yhKhjbxx.sscbb" placeholder="请选择" skey="cbb"
+                :params="{ ssgs: detailData.yhKhjbxx.ssgs, sscbpq: detailData.yhKhjbxx.sscbpq }" isDisabled="all"
+                :refresh="cbbRefresh" :labelGroup=true :filterable=true></cpsSelect>
             </el-form-item>
           </el-descriptions-item>
 
@@ -57,18 +56,18 @@
           <el-descriptions-item label="用户数量" labelClassName="redStar">
             <el-form-item prop="yhKhjbxx.rks">
               <el-input-number v-model.number="detailData.yhKhjbxx.rks" placeholder="请输入" controls-position="right"
-                :min="0" :max="15" style="width: 100%"></el-input-number>
+                :min="0" :max="15" style="width:100%"></el-input-number>
             </el-form-item>
           </el-descriptions-item>
           <el-descriptions-item label="年度累计" labelClassName="redStar">
             <el-form-item prop="yhKhjbxx.jtzqljl">
               <el-input-number v-model="detailData.yhKhjbxx.jtzqljl" placeholder="请输入" controls-position="right" :min="0"
-                style="width: 100%"></el-input-number>
+                style="width:100%"></el-input-number>
             </el-form-item>
           </el-descriptions-item>
           <el-descriptions-item label="申请日期" labelClassName="redStar">
             <el-form-item prop="yhKhjbxx.sqrq">
-              <el-date-picker v-model="detailData.yhKhjbxx.sqrq" type="date" placeholder="选择日期" style="width: 100%"
+              <el-date-picker v-model="detailData.yhKhjbxx.sqrq" type="date" placeholder="选择日期" style="width:100%;"
                 value-format="yyyy-MM-dd HH:mm:ss">
               </el-date-picker>
             </el-form-item>
@@ -82,13 +81,13 @@
           </el-descriptions-item>
           <el-descriptions-item label="通水标志">
             <el-switch v-model="detailData.yhKhjbxx.tsbz" active-text="已通水" inactive-text="未通水" active-value="1"
-              inactive-value="0" inactive-color="lightgray" @change="(value) => changeRequiredValidate(value, '1', 'yhKhjbxx.tsrq')
-                ">
+              inactive-value="0" inactive-color="lightgray"
+              @change="(value) => changeRequiredValidate(value, '1', 'yhKhjbxx.tsrq')">
             </el-switch>
           </el-descriptions-item>
           <el-descriptions-item label="通水日期">
             <el-form-item prop="yhKhjbxx.tsrq">
-              <el-date-picker v-model="detailData.yhKhjbxx.tsrq" type="date" placeholder="选择日期" style="width: 100%"
+              <el-date-picker v-model="detailData.yhKhjbxx.tsrq" type="date" placeholder="选择日期" style="width:100%;"
                 :disabled="detailData.yhKhjbxx.tsbz != 1" value-format="yyyy-MM-dd HH:mm:ss">
               </el-date-picker>
             </el-form-item>
@@ -103,15 +102,16 @@
           </el-descriptions-item>
           <el-descriptions-item label="建档日期" labelClassName="redStar">
             <el-form-item prop="yhKhjbxx.jdrq">
-              <el-date-picker v-model="detailData.yhKhjbxx.jdrq" type="date" placeholder="选择日期" style="width: 100%"
+              <el-date-picker v-model="detailData.yhKhjbxx.jdrq" type="date" placeholder="选择日期" style="width:100%;"
                 value-format="yyyy-MM-dd HH:mm:ss">
               </el-date-picker>
             </el-form-item>
           </el-descriptions-item>
+
         </el-descriptions>
       </el-collapse-item>
 
-      <el-collapse-item name="2" :disabled="true">
+      <el-collapse-item name="2">
         <template slot="title">
           <i class="el-icon-monitor title"></i><span class="title">表具信息</span>
         </template>
@@ -171,7 +171,7 @@
           <el-descriptions-item label="水表起数" labelClassName="redStar">
             <el-form-item prop="yhCbkxx.sbqs">
               <el-input-number v-model="detailData.yhCbkxx.sbqs" placeholder="请输入" controls-position="right" :min="0"
-                style="width: 100%"></el-input-number>
+                style="width:100%"></el-input-number>
             </el-form-item>
           </el-descriptions-item>
           <el-descriptions-item label="表具位置">
@@ -179,7 +179,7 @@
             </cpsSelect>
           </el-descriptions-item>
           <el-descriptions-item label="出厂日期">
-            <el-date-picker v-model="detailData.yhCbkxx.sbccrq" type="date" placeholder="选择日期" style="width: 100%"
+            <el-date-picker v-model="detailData.yhCbkxx.sbccrq" type="date" placeholder="选择日期" style="width:100%;"
               value-format="yyyy-MM-dd HH:mm:ss">
             </el-date-picker>
           </el-descriptions-item>
@@ -198,12 +198,8 @@
 
           <el-descriptions-item label="收垃圾费" labelClassName="redStar">
             <el-switch v-model="detailData.yhCbkxx.ljfbz" active-text="需收取" inactive-text="不收取" active-value="1"
-              inactive-value="0" inactive-color="lightgray" @change="(value) =>
-                changeRequiredValidate1(value, '1', [
-                  'yhCbkxx.ljffs',
-                  'yhCbkxx.ljfje',
-                ])
-                ">
+              inactive-value="0" inactive-color="lightgray"
+              @change="(value) => changeRequiredValidate1(value, '1', ['yhCbkxx.ljffs', 'yhCbkxx.ljfje'])">
             </el-switch>
           </el-descriptions-item>
           <el-descriptions-item label="收取方式">
@@ -216,7 +212,7 @@
           <el-descriptions-item label="垃圾费单价">
             <el-form-item prop="yhCbkxx.ljfje">
               <el-input-number v-model="detailData.yhCbkxx.ljfje" placeholder="请输入" controls-position="right" :min="0"
-                :max="10" :precision="2" :step="0.1" style="width: 100%"
+                :max="10" :precision="2" :step="0.1" style="width:100%"
                 :disabled="detailData.yhCbkxx.ljfbz != 1"></el-input-number>
             </el-form-item>
           </el-descriptions-item>
@@ -230,14 +226,15 @@
             <el-input v-model="detailData.yhCbkxx.ickid" placeholder="自动生成" disabled></el-input>
           </el-descriptions-item>
           <el-descriptions-item label="开卡日期">
-            <el-date-picker v-model="detailData.yhCbkxx.kkrq" type="date" placeholder="选择日期" style="width: 100%"
+            <el-date-picker v-model="detailData.yhCbkxx.kkrq" type="date" placeholder="选择日期" style="width:100%;"
               :disabled="detailData.yhCbkxx.kkbz != 1" value-format="yyyy-MM-dd HH:mm:ss">
             </el-date-picker>
           </el-descriptions-item>
+
         </el-descriptions>
       </el-collapse-item>
 
-      <el-collapse-item name="3" :disabled="true">
+      <el-collapse-item name="3">
         <template slot="title">
           <i class="el-icon-s-fold title"></i><span class="title">其他信息</span>
         </template>
@@ -252,7 +249,7 @@
               :disabled="detailData.yhKhjbxx.htqd != 1"></el-input>
           </el-descriptions-item>
           <el-descriptions-item label="签订日期">
-            <el-date-picker v-model="detailData.yhKhjbxx.htqdrq" type="date" placeholder="选择日期" style="width: 100%"
+            <el-date-picker v-model="detailData.yhKhjbxx.htqdrq" type="date" placeholder="选择日期" style="width:100%;"
               :disabled="detailData.yhKhjbxx.htqd != 1" value-format="yyyy-MM-dd HH:mm:ss">
             </el-date-picker>
           </el-descriptions-item>
@@ -295,146 +292,136 @@
         </el-descriptions>
       </el-collapse-item>
     </el-collapse>
+
   </el-form>
 </template>
 
 <script>
-import cpsSelect from "@/views/mis/common/components/cps-select.vue";
-import cpsCompany from "@/views/mis/common/components/cps-company.vue";
+import cpsSelect from '@/views/mis/common/components/cps-select.vue'
+import cpsCompany from '@/views/mis/common/components/cps-company.vue'
 export default {
-  name: "detail",
+  name: 'detail',
   components: { cpsSelect, cpsCompany },
   props: {
     detailData: {},
-    editState: false,
+    editState: false
   },
   data() {
     var ljfValidate = (rule, value, callback) => {
-      if (this.detailData.yhCbkxx.ljfbz == "1") {
-        if (value == undefined || value === "") {
+      if (this.detailData.yhCbkxx.ljfbz == '1') {
+        if (value == undefined || value === '') {
           return callback(new Error(rule.message));
         }
       }
       callback();
     };
     return {
-      activeNames: ["1", "2", "3"],
+      activeNames: ['1', '2'],
       cbpqRefresh: false,
       cbbRefresh: false,
       rules: {
         // 用户档案
-        "yhKhjbxx.ssgs": [
-          { required: true, message: "请选择", trigger: ["blur", "change"] },
+        'yhKhjbxx.ssgs': [
+          { required: true, message: "请选择", trigger: ["blur", "change"] }
         ],
-        "yhKhjbxx.sscbpq": [
-          { required: true, message: "请选择", trigger: "change" },
+        'yhKhjbxx.sscbpq': [
+          { required: true, message: "请选择", trigger: "change" }
         ],
-        "yhKhjbxx.sscbb": [
-          { required: true, message: "请选择", trigger: "change" },
+        'yhKhjbxx.sscbb': [
+          { required: true, message: "请选择", trigger: "change" }
         ],
-        "yhKhjbxx.yhxm": [
-          { required: true, message: "请输入", trigger: "blur" },
+        'yhKhjbxx.yhxm': [
+          { required: true, message: "请输入", trigger: "blur" }
         ],
-        "yhKhjbxx.yhdz": [
-          { required: true, message: "请输入", trigger: "blur" },
+        'yhKhjbxx.yhdz': [
+          { required: true, message: "请输入", trigger: "blur" }
         ],
-        "yhKhjbxx.lxdh": [
-          { required: true, message: "请输入", trigger: "blur" },
+        'yhKhjbxx.lxdh': [
+          { required: true, message: "请输入", trigger: "blur" }
         ],
-        "yhKhjbxx.yhzt": [
-          { required: true, message: "请选择", trigger: "change" },
+        'yhKhjbxx.yhzt': [
+          { required: true, message: "请选择", trigger: "change" }
         ],
-        "yhKhjbxx.sqrq": [
-          { required: true, message: "请选择", trigger: ["blur", "change"] },
+        'yhKhjbxx.sqrq': [
+          { required: true, message: "请选择", trigger: ["blur", "change"] }
         ],
-        "yhKhjbxx.tsrq": {
-          required: false,
-          message: "请选择",
-          trigger: ["blur", "change"],
-        },
-        "yhKhjbxx.rks": [
-          { required: true, message: "请输入", trigger: "blur" },
+        'yhKhjbxx.tsrq': { required: false, message: "请选择", trigger: ["blur", "change"] },
+        'yhKhjbxx.rks': [
+          { required: true, message: "请输入", trigger: "blur" }
         ],
-        "yhKhjbxx.jtzqljl": [
-          { required: true, message: "请输入", trigger: "blur" },
+        'yhKhjbxx.jtzqljl': [
+          { required: true, message: "请输入", trigger: "blur" }
         ],
-        "yhKhjbxx.jdrq": [
-          { required: true, message: "请选择", trigger: ["blur", "change"] },
+        'yhKhjbxx.jdrq': [
+          { required: true, message: "请选择", trigger: ["blur", "change"] }
         ],
-        "yhKhjbxx.fffs": [
-          { required: true, message: "请选择", trigger: "change" },
+        'yhKhjbxx.fffs': [
+          { required: true, message: "请选择", trigger: "change" }
         ],
 
         // 水表档案,
-        "yhCbkxx.jfzt": [
-          { required: true, message: "请选择", trigger: "change" },
+        'yhCbkxx.jfzt': [
+          { required: true, message: "请选择", trigger: "change" }
         ],
-        "yhCbkxx.cbpl": [
-          { required: true, message: "请选择", trigger: "change" },
+        'yhCbkxx.cbpl': [
+          { required: true, message: "请选择", trigger: "change" }
         ],
-        "yhCbkxx.sjbm": [
-          { required: true, message: "请选择", trigger: "change" },
+        'yhCbkxx.sjbm': [
+          { required: true, message: "请选择", trigger: "change" }
         ],
-        "yhCbkxx.sblb": [
-          { required: true, message: "请选择", trigger: "change" },
+        'yhCbkxx.sblb': [
+          { required: true, message: "请选择", trigger: "change" }
         ],
-        "yhCbkxx.sbsccj": [
-          { required: true, message: "请选择", trigger: "change" },
+        'yhCbkxx.sbsccj': [
+          { required: true, message: "请选择", trigger: "change" }
         ],
-        "yhCbkxx.sbxh": [
-          { required: true, message: "请选择", trigger: "change" },
+        'yhCbkxx.sbxh': [
+          { required: true, message: "请选择", trigger: "change" }
         ],
-        "yhCbkxx.sbkj": [
-          { required: true, message: "请选择", trigger: "change" },
+        'yhCbkxx.sbkj': [
+          { required: true, message: "请选择", trigger: "change" }
         ],
-        "yhCbkxx.sblc": [
-          { required: true, message: "请选择", trigger: "change" },
+        'yhCbkxx.sblc': [
+          { required: true, message: "请选择", trigger: "change" }
         ],
-        "yhCbkxx.sbbh": [
-          { required: true, message: "请输入", trigger: "blur" },
+        'yhCbkxx.sbbh': [
+          { required: true, message: "请输入", trigger: "blur" }
         ],
-        "yhCbkxx.sbqs": [
-          { required: true, message: "请输入", trigger: "blur" },
+        'yhCbkxx.sbqs': [
+          { required: true, message: "请输入", trigger: "blur" }
         ],
-        "yhCbkxx.ljffs": {
-          message: "请选择",
-          trigger: "change",
-          validator: ljfValidate,
-        },
-        "yhCbkxx.ljfje": {
-          message: "请输入",
-          trigger: "blur",
-          validator: ljfValidate,
-        },
-      },
-    };
+        'yhCbkxx.ljffs': { message: "请选择", trigger: "change", validator: ljfValidate },
+        'yhCbkxx.ljfje': { message: "请输入", trigger: "blur", validator: ljfValidate }
+      }
+    }
+  },
+  computed: {
+  },
+  watch: {
+  },
+  created() {
   },
-  computed: {},
-  watch: {},
-  created() { },
   mounted() {
     this.cbpqRefresh = !this.cbpqRefresh;
     this.cbbRefresh = !this.cbbRefresh;
-    this.changeRequiredValidate(
-      this.detailData.yhKhjbxx.tsbz,
-      "1",
-      "yhKhjbxx.tsrq"
-    );
+    this.changeRequiredValidate(this.detailData.yhKhjbxx.tsbz, '1', 'yhKhjbxx.tsrq')
+  },
+  created() {
+  },
+  destroyed() {
   },
-  created() { },
-  destroyed() { },
   methods: {
     changeGs(value) {
-      console.log("gs[" + value + "]");
+      console.log('gs[' + value + ']');
       this.detailData.yhKhjbxx.ssgs = value;
       this.cbpqRefresh = !this.cbpqRefresh;
-      this.detailData.yhKhjbxx.sscbpq = "";
+      this.detailData.yhKhjbxx.sscbpq = '';
       this.changeCbpq(this.detailData.yhKhjbxx.sscbpq);
     },
     changeCbpq(value) {
-      console.log("cbpq[" + value + "]");
+      console.log('cbpq[' + value + ']');
       this.cbbRefresh = !this.cbbRefresh;
-      this.detailData.yhKhjbxx.sscbb = "";
+      this.detailData.yhKhjbxx.sscbb = '';
     },
     /**
      * 改变非空关联的验证规则
@@ -445,15 +432,11 @@ export default {
     changeRequiredValidate(value, activeValue, prop) {
       let required = value == activeValue;
       if (prop.constructor === Array) {
-        prop.forEach((p) => {
-          this.rules[p] = Object.assign({}, this.rules[p], {
-            required: required,
-          });
+        prop.forEach(p => {
+          this.rules[p] = Object.assign({}, this.rules[p], { required: required });
         });
       } else if (prop.constructor === String) {
-        this.rules[prop] = Object.assign({}, this.rules[prop], {
-          required: required,
-        });
+        this.rules[prop] = Object.assign({}, this.rules[prop], { required: required });
       }
 
       if (required) {
@@ -483,9 +466,9 @@ export default {
         }
       });
       return flag;
-    },
-  },
-};
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .title {
@@ -500,4 +483,12 @@ export default {
 /deep/ .descContent {
   width: 22.22%;
 }
+
+/deep/ .el-collapse-item__header {
+  pointer-events: none;
+}
+
+/deep/ .el-collapse-item__arrow {
+  pointer-events: auto;
+}
 </style>