manager 升级到vue3

manager/src/views/distribution/distributionSetting.vue

@@ -1,22 +1,17 @@
 <template>
-  <div style="background-color: #fff;">
-
-    <Form ref="form" :model="form" :rules="formRule" :label-width="120" style="padding: 10px;">
-
-      <Divider orientation="left">分销设置</Divider>
-      <FormItem label="是否开启分销" prop="isOpen">
-        <i-switch size="large" v-model="form.isOpen" :true-value="true" :false-value="false">
-          <span slot="open">开启</span>
-          <span slot="close">关闭</span>
-        </i-switch>
-      </FormItem>
-      <FormItem label="分销关系绑定天数" prop="distributionDay">
-        <InputNumber :min="1" :max="365" style="width:100px;" v-model="form.distributionDay"></InputNumber>
-      </FormItem>
-      <FormItem>
-        <Button type="primary" @click="submit">保存</Button>
-      </FormItem>
-    </Form>
+  <div style="background-color: #fff">
+    <el-form ref="form" :model="form" :rules="formRule" label-width="140px" style="padding: 10px">
+      <el-divider content-position="left">分销设置</el-divider>
+      <el-form-item label="是否开启分销" prop="isOpen">
+        <el-switch v-model="form.isOpen" active-text="开启" inactive-text="关闭" />
+      </el-form-item>
+      <el-form-item label="分销关系绑定天数" prop="distributionDay">
+        <el-input-number v-model="form.distributionDay" :min="1" :max="365" style="width: 120px" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submit">保存</el-button>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
@@ -28,26 +23,22 @@ export default {
   data() {
     return {
       form: {
-        // 添加或编辑表单对象初始化数据
         isOpen: true,
-        distributionDay: 0, //分销关系绑定天数
+        distributionDay: 1,
       },
       formRule: {
-        isOpen: [
-          regular.REQUIRED
-        ],
-        distributionDay: [
-          regular.REQUIRED
-        ],
-      }
+        isOpen: [regular.REQUIRED],
+        distributionDay: [regular.REQUIRED],
+      },
     };
   },
+  mounted() {
+    this.init();
+  },
   methods: {
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    // 获取分销设置数据
     getDataList() {
       getSetting("DISTRIBUTION_SETTING").then((res) => {
         if (res.success) {
@@ -55,20 +46,17 @@ export default {
         }
       });
     },
-    // 提交api
     submit() {
-      setSetting("DISTRIBUTION_SETTING", this.form).then((res) => {
-        if (res.success) {
-          this.$Message.success("操作成功");
-          this.getDataList();
-        }
+      this.$refs.form.validate((valid) => {
+        if (!valid) return;
+        setSetting("DISTRIBUTION_SETTING", this.form).then((res) => {
+          if (res.success) {
+            this.$Message.success("操作成功");
+            this.getDataList();
+          }
+        });
       });
     },
   },
-  mounted() {
-    this.init();
-  },
 };
 </script>
-<style lang="scss" scoped>
-</style>