资讯crud与图片上传

src/views/information/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">
       <el-form-item label="标题" prop="titleName">
         <el-input
           v-model="queryParams.titleName"
@@ -91,12 +91,14 @@
       <el-table-column label="标题" align="center" prop="titleName" show-overflow-tooltip/>
       <el-table-column label="是否政策推荐" align="center" prop="isGovernment">
         <template slot-scope="scope">
-          {{scope.row.isGovernment=='1'?'是':'否'}}
+          <el-tag type="success" v-if="scope.row.isGovernment == '1'">是</el-tag>
+          <el-tag type="warning" v-if="scope.row.isGovernment == '0'">否</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="是否置顶" align="center" prop="isTop">
         <template slot-scope="scope">
-          {{scope.row.isTop=='1'?'是':'否'}}
+          <el-tag type="success" v-if="scope.row.isTop == '1'">是</el-tag>
+          <el-tag type="warning" v-if="scope.row.isTop == '0'">否</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="点赞数" align="center" prop="likeNum" show-overflow-tooltip/>
@@ -133,36 +135,62 @@
 
     <!-- 添加或修改资讯对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="标题" prop="titleName">
-          <el-input v-model="form.titleName" placeholder="请输入标题" maxlength="50"/>
-        </el-form-item>
-        <el-form-item label="正文" prop="textDetails">
-          <editor v-model="form.textDetails" :min-height="192"/>
-        </el-form-item>
-        <el-form-item label="是否政策推荐" prop="isGovernment">
-          <el-switch
-            v-model="form.isGovernment"
-            active-value="0"
-            inactive-value="1">
-          </el-switch>
-        </el-form-item>
-        <el-form-item label="是否置顶" prop="isTop">
-          <el-switch
-            v-model="form.isTop"
-            active-value="0"
-            inactive-value="1">
-          </el-switch>
-        </el-form-item>
-        <el-form-item label="点赞数" prop="likeNum">
-          <el-input-number v-model="form.likeNum" :min="1" :max="999999999" label="点赞数"></el-input-number>
-        </el-form-item>
-        <el-form-item label="浏览数" prop="watchNum">
-          <el-input-number v-model="form.watchNum" :min="1" :max="999999999" label="浏览数"></el-input-number>
-        </el-form-item>
-        <el-form-item label="图片" prop="imgUrlList">
-          <image-upload v-model="form.imgUrlList"/>
-        </el-form-item>
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="标题" prop="titleName">
+              <el-input v-model="form.titleName" placeholder="请输入标题" maxlength="50"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="是否置顶" prop="isTop">
+              <el-switch
+                v-model="form.isTop"
+                :active-value="1"
+                :inactive-value="0">
+              </el-switch>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="是否政策推荐" prop="isGovernment">
+              <el-switch
+                v-model="form.isGovernment"
+                :active-value="1"
+                :inactive-value="0">
+              </el-switch>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="浏览数" prop="watchNum">
+              <el-input-number v-model="form.watchNum" :min="0" :max="999999999" label="浏览数"></el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="点赞数" prop="likeNum">
+              <el-input-number v-model="form.likeNum" :min="0" :max="999999999" label="点赞数"></el-input-number>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="正文" prop="textDetails">
+              <editor v-model="form.textDetails" :min-height="192"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="图片" prop="imgUrlList">
+              <image-upload v-model="form.imgUrlList"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -184,8 +212,8 @@ export default {
       loading: true,
       // 选中数组
       ids: [],
-      isGovernments: [{label:'是',value:'1'},{label: '否',value: '0'}],
-      isTops: [{label:'是',value:'1'},{label: '否',value: '0'}],
+      isGovernments: [{label: '是', value: '1'}, {label: '否', value: '0'}],
+      isTops: [{label: '是', value: '1'}, {label: '否', value: '0'}],
       // 非单个禁用
       single: true,
       // 非多个禁用
@@ -213,7 +241,26 @@ export default {
       // 表单参数
       form: {},
       // 表单校验
-      rules: {}
+      rules: {
+        titleName: [
+          {required: true, message: "标题不能为空", trigger: "blur"},
+        ],
+        titleDetails: [
+          {required: true, message: "正文不能为空", trigger: "blur"},
+        ],
+        isGovernment: [
+          {required: true, message: "政策推荐不能为空", trigger: "change"},
+        ],
+        isTop: [
+          {required: true, message: "置顶不能为空", trigger: "change"},
+        ],
+        likeNum: [
+          {required: true, message: "点赞数不能为空", trigger: ["change",'blur']},
+        ],
+        watchNum: [
+          {required: true, message: "浏览数不能为空", trigger: ["change",'blur']},
+        ],
+      }
     };
   },
   created() {
@@ -245,14 +292,13 @@ export default {
         createTime: null,
         watchNum: 0,
         likeNum: 0,
-        isTop: null,
-        isGovernment: null,
+        isTop: '0',
+        isGovernment: '0',
         updateBy: null,
         updateTime: null,
         imgUrlList: '',
         delFlag: 0,
       };
-      this.resetForm("form");
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -271,8 +317,8 @@ export default {
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
+    async handleAdd() {
+      await this.reset();
       this.open = true;
       let str = ''
       if (this.$route.query.type == 10) {
@@ -282,11 +328,11 @@ export default {
       } else if (this.$route.query.type == 12) {
         str = '资讯'
       }
-      this.title = "修改" + str;
+      this.title = "新增" + str;
     },
     /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
+    async handleUpdate(row) {
+      await this.reset();
       const id = row.id || this.ids
       getServer(id).then(response => {
         this.form = response.data;