新增服务管理页面

jsconfig.json

@@ -14,6 +14,8 @@
       "dom",
       "dom.iterable",
       "scripthost"
-    ]
+    ],
+    "noUnusedLocals": false,
+    "noUnusedParameters": false
   }
 }

src/common/components/base/CustomForm.vue

+<script>
+export default {
+  name: 'CustomForm',
+  components: {},
+  props: {
+    formConfig: {
+      type: Array,
+      default: () => []
+    },
+    isCustomButton: {
+      type: Boolean,
+      default: true
+    },
+    isFlex: {
+      type: Boolean,
+      default: true
+    },
+    formLabelWidth: {
+      type: String,
+      default: '50px'
+    },
+    formItemWidth: {
+      type: String,
+      default: null
+    },
+    value: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  computed: {},
+  watch: {
+    value: {
+      handler(newValue, oldValue) {
+        if (Object.keys(newValue).length !== 0) {
+          this.formData = newValue
+        } else {
+          this.initFormData()
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    formData: {
+      handler(newValue) {
+        this.$emit('input', newValue)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+
+  data() {
+    return {
+      loading: false,
+      formData: {},
+      formColumns: []
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('searchFn', this.formData)
+    },
+    addDialog(obj) {
+      this.$emit('addDialog')
+    },
+    handleSubmit(event) {
+      event.preventDefault()
+    },
+
+    showToggle() {
+      this.loading = !this.loading
+    },
+    validateForm() {
+      return this.$refs.form.validate()
+    },
+    initFormData() {
+      this.formConfig.forEach((el) => {
+        switch (el.type) {
+          case 'input':
+            this.$set(this.formData, el.prop, '')
+            break
+          case 'select':
+          case 'radio':
+            this.$set(this.formData, el.prop, el.defaultValue || '')
+            break
+          default:
+            // 如果有其他类型，可以在这里添加处理逻辑
+            this.$set(this.formData, el.prop, '')
+        }
+      })
+    },
+    async resetFields() {
+      await this.$refs.form?.resetFields()
+    }
+  },
+  created() {
+    // console.log(104, this.formData)
+  },
+  render() {
+    return (
+      <el-form
+        class={this.isFlex ? 'formClass' : ''}
+        ref="form"
+        props={{
+          model: this.formData
+        }}
+        size="mini"
+        inline
+        onSubmit={this.handleSubmit}
+        onKeyupenterCapture={this.search}>
+        {this.formConfig?.map((item, index) => (
+          <el-form-item
+            style={{
+              width: item.type === 'textarea' ? '100%' : this.formItemWidth
+            }}
+            class={item.type === 'textarea' ? 'textClass' : ''}
+            prop={item.prop}
+            rules={(item.renderRules && item.renderRules(this.formData)) || []}
+            label-width={item.labelWidth || this.formLabelWidth}
+            key={index}
+            label={item.name}>
+            {item.type === 'input' && (
+              <el-input
+                v-model={this.formData[item.prop]}
+                placeholder={item.placeholder || `请输入${item.name}`}
+                clearable></el-input>
+            )}
+            {item.type === 'textarea' && (
+              <el-input
+                type="textarea"
+                v-model={this.formData[item.prop]}
+                placeholder={item.placeholder || `请输入${item.name}`}
+                clearable></el-input>
+            )}
+            {item.type === 'select' && (
+              <el-select
+                v-model={this.formData[item.prop]}
+                placeholder={item.placeholder || `请选择${item.name}`}
+                clearable>
+                {item.options?.map((el, idx) => (
+                  <el-option
+                    label={el.label}
+                    value={el.value}
+                    key={idx}></el-option>
+                ))}
+              </el-select>
+            )}
+            {item.type === 'datePicker' && (
+              <el-date-picker
+                value-format="yyyy-MM-dd"
+                type={item.dateType || 'date'}
+                placeholder="选择日期"
+                v-model={this.formData[item.prop]}
+                clearable
+                style="width: 100%;"></el-date-picker>
+            )}
+            {item.type === 'radio' &&
+              item.radioOptions?.map((el, idx) => (
+                <el-radio
+                  v-model={this.formData[item.prop]}
+                  label={el.value}
+                  key={idx}>
+                  {el.label}
+                </el-radio>
+              ))}
+          </el-form-item>
+        ))}
+        {this.isCustomButton && (
+          <el-form-item>
+            <el-button
+              type="primary"
+              onClick={this.search}
+              icon="el-icon-search">
+              查询
+            </el-button>
+            <el-button type="success" onClick={this.addDialog}>
+              新增
+            </el-button>
+          </el-form-item>
+        )}
+        {!this.isCustomButton && <slot name="btn"></slot>}
+      </el-form>
+    )
+  }
+}
+</script>
+<style lang="less" scoped>
+.formClass {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  .el-form-item {
+    margin-right: 0;
+  }
+}
+.textClass {
+  display: flex;
+  ::v-deep.el-form-item {
+    .el-form-item__content {
+      width: 100%;
+      flex: 1;
+    }
+  }
+}
+</style>

src/common/components/base/queryForm.vue

-<script>
-export default {
-  name: 'queryForm',
-  components: {},
-  props: {
-    formConfig: {
-      type: Array,
-      default: () => []
-    },
-    isCustomButton: {
-      type: Boolean,
-      default: true
-    }
-  },
-  computed: {
-    formColumns() {
-      return [...this.formConfig]
-    }
-  },
-  watch: {},
-  data() {
-    return {
-      loading: false,
-      formData: {}
-    }
-  },
-  methods: {
-    search() {
-      console.log(25, this.formData)
-
-      //   this.$emit('search', this.formData)
-    },
-    addDialog(obj) {
-      this.$emit('addDialog')
-    },
-    handleSubmit(event) {
-      event.preventDefault()
-    },
-
-    showToggle() {
-      this.loading = !this.loading
-    }
-  },
-  render() {
-    // const { btnSlot } = this.$slots
-    return (
-      <el-form
-        ref="form"
-        props={{
-          model: this.formData
-        }}
-        size="mini"
-        inline
-        onSubmit={this.handleSubmit}
-        onKeyupenterCapture={this.search}>
-        {this.formColumns?.map((item, index) => (
-          <el-form-item key={index} label={item.name}>
-            {item.type === 'input' && (
-              <el-input
-                v-model={this.formData[item.prop]}
-                placeholder={item.placeholder || '请输入'}
-                clearable></el-input>
-            )}
-
-            {item.type === 'select' && (
-              <el-select
-                v-model={this.formData[item.prop]}
-                placeholder={item.placeholder || '请选择'}
-                clearable>
-                {item.options?.map((el, idx) => (
-                  <el-option label={el} value={el} key={idx}>
-                    {el}
-                  </el-option>
-                ))}
-              </el-select>
-            )}
-            {item.type === 'datePicker' && (
-              <el-date-picker
-                value-format="yyyy-MM-dd"
-                type={item.dateType || 'date'}
-                placeholder="选择日期"
-                v-model={this.formData[item.prop]}
-                clearable
-                style="width: 100%;"></el-date-picker>
-            )}
-          </el-form-item>
-        ))}
-        {this.isCustomButton && (
-          <el-form-item>
-            <el-button
-              type="primary"
-              onClick={this.search}
-              icon="el-icon-search">
-              查询
-            </el-button>
-            <el-button type="success" onClick={this.addDialog}>
-              新增
-            </el-button>
-          </el-form-item>
-        )}
-        {!this.isCustomButton}
-      </el-form>
-    )
-  }
-}
-</script>
-<style scoped></style>

src/components/wangeditor/index.vue

@@ -5,15 +5,13 @@
       style="border-bottom: 1px solid #ccc"
       :editor="editor"
       :defaultConfig="toolbarConfig"
-      :mode="mode"
-    />
+      :mode="mode" />
     <Editor
       style="height: 300px; overflow-y: hidden"
       v-model="html"
       :defaultConfig="editorConfig"
       :mode="mode"
-      @onCreated="onCreated"
-    />
+      @onCreated="onCreated" />
   </div>
 </template>
 <script>
@@ -27,32 +25,32 @@ export default {
   data() {
     return {
       editor: null,
-      mode: 'default',
+      mode: 'default'
     }
   },
   model: {
     prop: 'content',
-    event: 'change',
+    event: 'change'
   },
   props: {
     content: {
       type: String,
-      default: '',
+      default: ''
     },
     placeholder: {
       type: String,
-      default: '',
+      default: ''
     },
     isInsert: {
       type: Boolean,
-      default: false,
+      default: false
     },
     insertData: {
       type: Array,
       default: () => [
         {
           label: '客户名称',
-          value: '{payerName} {payerSurname}',
+          value: '{payerName} {payerSurname}'
         },
         { label: '订单编号', value: '{id}' },
         { label: '店铺单号', value: '{shopNumber}' },
@@ -61,9 +59,9 @@ export default {
         { label: '发货时间', value: '{shipmentTime}' },
         { label: '妥投时间', value: '{properTime}' },
         { label: '商品', value: '{products}' },
-        { label: '收货地址', value: '{address}' },
-      ],
-    },
+        { label: '收货地址', value: '{address}' }
+      ]
+    }
   },
 
   computed: {
@@ -73,12 +71,12 @@ export default {
       },
       set(value) {
         this.$emit('change', value)
-      },
+      }
     },
     toolbarConfig() {
       return {
         excludeKeys: ['group-video'],
-        insertKeys: insertKeys(this.isInsert),
+        insertKeys: insertKeys(this.isInsert)
       }
     },
     editorConfig() {
@@ -87,34 +85,28 @@ export default {
         placeholder: this.placeholder || '请输入内容...',
         MENU_CONF: {
           uploadImage: {
-            allowedFileTypes: [
-              'jpg',
-              'jpeg',
-              'png',
-              'gif',
-              'bmp',
-            ],
+            allowedFileTypes: ['jpg', 'jpeg', 'png', 'gif', 'bmp'],
             async customUpload(files, insertFn) {
               // JS 语法
               // res 即服务端的返回结果
 
               const res = await uploadImg(files, {
                 url: 'upload/oss',
-                businessType: 'other',
+                businessType: 'other'
               })
               console.log(res)
               const { filePath } = res
               const url = _this.setimgUrl(filePath, {
-                w: 640,
+                w: 640
               })
               // 从 res 中找到 url alt href ，然后插入图片
               insertFn(url)
-            },
-          },
-          insertSelect: { options: this.insertData },
-        },
             }
           },
+          insertSelect: { options: this.insertData }
+        }
+      }
+    }
   },
   watch: {},
   methods: {
@@ -122,7 +114,7 @@ export default {
       this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
       console.log(editor.getConfig())
       this.editor.getAllMenuKeys()
-    },
+    }
   },
   mounted() {
     // 模拟 ajax 请求，异步渲染编辑器
@@ -131,7 +123,7 @@ export default {
     const editor = this.editor
     if (editor == null) return
     editor.destroy() // 组件销毁时，及时销毁编辑器
-  },
+  }
 }
 </script>
 <style scoped>

src/router/index.js

@@ -76,7 +76,7 @@ const routes = [
         path: '/saas/services',
         component: () => import('@/views/system/services.vue'),
         name: 'system_services',
-        meta: { title: '系统服务' }
+        meta: { title: '服务管理' }
       },
       {
         path: '/saas/countryCode',

src/views/home/navMenu.vue

@@ -271,7 +271,7 @@ export default {
             {
               id: 5,
               path: '',
-              label: '系统服务',
+              label: '服务管理',
               icon: 'el-icon-s-order',
               index: '/saas/services',
               children: []