修改服务系统页面

src/common/components/base/CustomForm.vue

@@ -124,24 +124,31 @@ export default {
               <el-input
                 v-model={this.formData[item.prop]}
                 placeholder={item.placeholder || `请输入${item.name}`}
-                clearable></el-input>
+                clearable
+                {...{ attrs: item.attrs }}></el-input>
             )}
             {item.type === 'textarea' && (
               <el-input
                 type="textarea"
                 v-model={this.formData[item.prop]}
                 placeholder={item.placeholder || `请输入${item.name}`}
-                clearable></el-input>
+                clearable
+                {...{ attrs: item.attrs }}></el-input>
             )}
             {item.type === 'select' && (
               <el-select
                 v-model={this.formData[item.prop]}
+                {...{ attrs: item.attrs }}
+                onChange={(e) =>
+                  item.events && item.events.onChange(this.formData, e)
+                }
                 placeholder={item.placeholder || `请选择${item.name}`}
+                value-key={item.valueKey || 'value'}
                 clearable>
                 {item.options?.map((el, idx) => (
                   <el-option
                     label={el.label}
-                    value={el.value}
+                    value={item.valueKey ? el : el.value}
                     key={idx}></el-option>
                 ))}
               </el-select>
@@ -153,11 +160,13 @@ export default {
                 placeholder="选择日期"
                 v-model={this.formData[item.prop]}
                 clearable
+                {...{ attrs: item.attrs }}
                 style="width: 100%;"></el-date-picker>
             )}
             {item.type === 'radio' &&
               item.radioOptions?.map((el, idx) => (
                 <el-radio
+                  {...{ attrs: item.attrs }}
                   v-model={this.formData[item.prop]}
                   label={el.value}
                   key={idx}>
@@ -179,7 +188,9 @@ export default {
             </el-button>
           </el-form-item>
         )}
-        {!this.isCustomButton && <slot name="btn"></slot>}
+        {this.$slots.btn && (
+          <el-form-item> {this.$scopedSlots.btn()} </el-form-item>
+        )}
       </el-form>
     )
   }

src/views/system/services.vue

@@ -5,7 +5,11 @@
       v-model="queryFormData"
       @addDialog="addDialog"
       @searchFn="search"
-      :isFlex="false"></CustomForm>
+      :isFlex="false">
+      <template slot="btn">
+        <el-button type="primary" @click="updateListFn">同步</el-button>
+      </template>
+    </CustomForm>
     <div class="table_wrap" v-loading="loading">
       <table-vue
         :sourceData="sourceData"
@@ -62,6 +66,7 @@ import axios from '../../common/api/axios'
 import CustomForm from '@/common/components/base/CustomForm.vue'
 import { mapState } from 'vuex'
 import tableVue from '@/common/components/base/tableView.vue'
+
 export default {
   name: 'system_users',
   components: {
@@ -96,11 +101,19 @@ export default {
       ],
       editformConfig: [
         {
-          prop: 'name',
+          prop: 'nameObj',
           type: 'select',
           name: '名称',
           options: [],
-          renderRules: (item) => [
+          valueKey: 'value',
+          events: {
+            onChange: (item, value) => {
+              item.name = value.value
+              item.serveType = value.type === 'basics' ? '基础' : '增值'
+              item.type = value.type
+            }
+          },
+          renderRules: () => [
             {
               required: true,
               message: '请选择名称',
@@ -109,20 +122,10 @@ export default {
           ]
         },
         {
-          prop: 'type',
-          type: 'select',
+          prop: 'serveType',
+          type: 'input',
           name: '服务类型',
-          options: [
-            { label: '基础', value: 'basics' },
-            { label: '增值', value: 'appreciation' }
-          ],
-          renderRules: (item) => [
-            {
-              required: true,
-              message: '请选择服务类型',
-              trigger: 'change'
-            }
-          ]
+          attrs: { disabled: true, placeholder: '选择完名称后展示' }
         },
         {
           prop: 'tollCollectionManner',
@@ -222,7 +225,9 @@ export default {
           label: '服务名称',
           key: 'name',
           width: '',
-          render: (item) => <span>{this.serviceNameList.get(item.name)}</span>
+          render: (item) => (
+            <span>{this.serviceNameList.get(item.name).label}</span>
+          )
         },
         {
           label: '服务类型',
@@ -259,7 +264,16 @@ export default {
           width: '100',
 
           render: (item) => (
-            <span>{item.enable === true ? '启用' : '停用'}</span>
+            <span>
+              <el-switch
+                class="switchStyle"
+                v-model={item.enable}
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                active-text="启用"
+                inactive-text="停用"
+                onChange={(e) => this.enableChange(item, e)}></el-switch>
+            </span>
           )
         },
         {
@@ -374,6 +388,12 @@ export default {
           const res = await axios.get(url, { params: { id } })
 
           this.formData = { ...res.data }
+          this.formData.nameObj = this.serviceNameList.get(this.formData.name)
+          this.formData.serveType =
+            this.serviceNameList.get(this.formData.name).type === 'basics'
+              ? '基础'
+              : '增值'
+          console.log(289, this.formData)
         } else {
           this.is_title = 1
         }
@@ -448,7 +468,6 @@ export default {
           ...this.queryFormData
         })
         .then((res) => {
-          this.loading = false
           if (res.code === 200) {
             this.sourceData = res.data.records
             this.paginationOptions.total = res.data.total
@@ -457,6 +476,7 @@ export default {
               dangerouslyUseHTMLString: true
             })
           }
+          this.loading = false
         })
     },
 
@@ -499,12 +519,16 @@ export default {
         const { data } = await axios.get('serviceManagement/serviceNameList')
         const newData = data.map((el) => {
           return {
-            label: el.value,
-            value: el.key
+            label: el.remark,
+            value: el.code,
+            type: el.type
           }
         })
         this.serviceNameList = new Map(
-          newData.map((item) => [item.value, item.label])
+          newData.map((item) => [
+            item.value,
+            { label: item.label, type: item.type, value: item.value }
+          ])
         )
         console.log(509, this.serviceNameList)
 
@@ -515,11 +539,37 @@ export default {
         this.editformConfig[0].options = []
         console.log(error)
       }
+    },
+    async enableChange(item, value) {
+      this.loading = true
+      try {
+        const params = {
+          id: item.id,
+          status: value
+        }
+        console.log(item, value)
+
+        await axios.get('/serviceManagement/updateStatus', { params })
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    async updateListFn() {
+      this.loading = true
+      try {
+        await axios.get('serviceManagement/syncErp')
+      } catch (error) {
+        console.log(error)
+        this.$message.warning(error.message)
+      } finally {
+        this.loading = false
+      }
     }
   }
 }
 </script>
-<style scoped>
+<style scoped lang="less">
 .wraper {
   display: flex;
   flex-direction: column;
@@ -538,8 +588,34 @@ export default {
   margin-right: 5px;
 }
 
-.my-table >>> .first {
+.my-table .first {
   background-color: red !important;
   color: #fff !important;
 }
+::v-deep.switchStyle .el-switch__label {
+  position: absolute;
+  display: none;
+  color: #fff;
+  span {
+    font-size: 12px !important;
+  }
+}
+.el-switch__core {
+  background-color: rgba(166, 166, 166, 1);
+}
+::v-deep.switchStyle .el-switch__label--left {
+  z-index: 9;
+  left: 20px;
+}
+::v-deep.switchStyle .el-switch__label--right {
+  z-index: 9;
+  right: 20px;
+}
+::v-deep.switchStyle .el-switch__label.is-active {
+  display: block;
+}
+::v-deep.switchStyle.el-switch .el-switch__core,
+.el-switch .el-switch__label {
+  width: 50px !important;
+}
 </style>