云小微

src/views/device/yxw/index.vue

@@ -3,35 +3,27 @@
     <!-- 搜索 -->
     <el-form inline label-width="100px" size="mini">
       <el-form-item label="设备型号：">
-        <el-input v-model="form.clientType" placeholder="请输入设备型号" />
+        <el-input v-model="form1.clientType" placeholder="请输入设备型号" />
       </el-form-item>
       <el-form-item label="设备类型：">
-        <el-select v-model="form.deviceType" placeholder="请选择设备类型">
-          <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+        <el-select v-model="form1.deviceType" placeholder="请选择设备类型">
+          <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.label"
+            :value="item.value" />
         </el-select>
       </el-form-item>
       <el-form-item label="当前状态：">
-        <el-select v-model="form.status" placeholder="请选择当前状态">
-          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
+        <el-select v-model="form1.status" placeholder="请选择当前状态">
+          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
+            :value="item.value" />
         </el-select>
       </el-form-item>
       <el-form-item label="创建时间：">
-        <el-date-picker
-          v-model="createTime"
-          type="datetimerange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          value-format="yyyy-MM-dd HH:mm:ss"
-        />
+        <el-date-picker v-model="createTime" type="datetimerange" start-placeholder="开始日期"
+          end-placeholder="结束日期" value-form1at="yyyy-MM-dd HH:mm:ss" />
       </el-form-item>
       <el-form-item label="激活时间：">
-        <el-date-picker
-          v-model="updateTime"
-          type="datetimerange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          value-format="yyyy-MM-dd HH:mm:ss"
-        />
+        <el-date-picker v-model="updateTime" type="datetimerange" start-placeholder="开始日期"
+          end-placeholder="结束日期" value-form1at="yyyy-MM-dd HH:mm:ss" />
       </el-form-item>
       <el-form-item>
         <el-button icon="el-icon-search" type="primary" @click="getSearch">搜索</el-button>
@@ -51,18 +43,15 @@
       <el-table-column prop="updateTimeStr" label="激活时间" align="center" />
       <el-table-column prop="statusStr" label="当前状态" align="center" />
     </el-table>
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="form.pageIndex"
-      :limit.sync="form.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total>0" :total="total" :page.sync="form1.pageIndex" :limit.sync="form1.pageSize"
+      @pagination="getList" />
     <!-- 弹窗 -->
     <el-dialog title="新增" :visible.sync="dialogVisible" width="500px">
-      <el-form label-width="100px">
-        <el-form-item label="设备数量：">
-          <el-input v-model="num" placeholder="请输入设备数量"></el-input>
+      <el-form :model="form2" ref="form" label-width="100px">
+        <el-form-item prop="num" label="设备数量：" :rules="[{
+          required: true, message: '请输入设备数量', trigger: 'blur'
+        }]">
+          <el-input v-model="form2.num" placeholder="请输入设备数量" />
         </el-form-item>
       </el-form>
       <div slot="footer">
@@ -111,7 +100,7 @@ export default {
         },
       ],
       // 表单
-      form: {
+      form1: {
         pageIndex: 1,
         pageSize: 10,
       },
@@ -126,15 +115,19 @@ export default {
       // 弹窗
       dialogVisible: false,
       // 新增设备数量
-      num: "",
+      form2: {
+        num: ""
+      }
     };
   },
   watch: {
     createTime(val) {
-      (this.form.startCreateTime = val[0]), (this.form.endCreateTime = val[1]);
+      this.form1.startCreateTime = val[0]
+      this.form1.endCreateTime = val[1]
     },
     updateTime(val) {
-      (this.form.startUpdateTime = val[0]), (this.form.endUpdateTime = val[1]);
+      this.form1.startUpdateTime = val[0]
+      this.form1.endUpdateTime = val[1]
     },
   },
   mounted() {
@@ -143,13 +136,13 @@ export default {
   methods: {
     // 搜索
     getSearch() {
-      this.form.pageIndex = 1;
+      this.form1.pageIndex = 1;
       this.getList();
     },
 
     // 重置
     getRefresh() {
-      this.form = {
+      this.form1 = {
         pageIndex: 1,
         pageSize: 10,
       };
@@ -160,7 +153,7 @@ export default {
     // 分页
     getList() {
       this.loading = true;
-      getYxwPage(this.form).then((res) => {
+      getYxwPage(this.form1).then((res) => {
         if (res.code === 0) {
           this.tableData = res.data.records;
           this.total = res.data.total;
@@ -171,20 +164,27 @@ export default {
 
     // 新建设备号
     getSubmit() {
-      getYxwAdd({ num: this.num }).then((res) => {
-        if (res.code === 0) {
-          this.$message.success("新增成功！");
-          this.dialogVisible = false;
-          this.getList();
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          getYxwAdd(this.form2).then((res) => {
+            if (res.code === 0) {
+              this.$message.success("新增成功！");
+              this.dialogVisible = false;
+              this.getList();
+            }
+          });
+        } else {
+          return false
         }
-      });
+      })
+
     },
 
     // 导出设备号
     getDownLoadNo() {
       this.download(
         `/device/yunxiaowei/exportDeviceNo`,
-        this.form,
+        this.form1,
         `云小微设备号.xlsx`
       );
     },
@@ -193,7 +193,7 @@ export default {
     getDownLoadData() {
       this.download(
         `/device/yunxiaowei/exportDeviceData`,
-        this.form,
+        this.form1,
         `云小微设备数据.xlsx`
       );
     },