修改服务系统页面

25807327 · linjinhong · 41772c96 · 25807327 · 25807327
Commit 25807327 authored May 14, 2025 by linjinhong
Hide whitespace changes
Inline Side-by-side

Showing with 115 additions and 28 deletions

src/common/components/base/CustomForm.vue
+15 -4

src/views/system/services.vue
+100 -24

No files found.
--- a/src/common/components/base/CustomForm.vue
+++ b/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>
    )
  }

--- a/src/views/system/services.vue
+++ b/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',
+          prop: 'serveType',
-          type: 'select',
+          type: 'input',
          name: '服务类型',
-          options: [
+          attrs: { disabled: true, placeholder: '选择完名称后展示' }
-            { label: '基础', value: 'basics' },
-            { label: '增值', value: 'appreciation' }
-          ],
-          renderRules: (item) => [
-            {
-              required: true,
-              message: '请选择服务类型',
-              trigger: 'change'
-            }
-          ]
        },
        {
          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,
+            label: el.remark,
-            value: el.key
+            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>