政策库添加筛选

src/views/policy/library/add.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <div>{{ editPage ? '修改' : '添加' }}政策</div>
     <el-form
-      style="width:50%;margin:15px 0 0 15px"
+      style="width: 50%; margin: 15px 0 0 15px"
       label-position="left"
       :model="ruleForm"
       :rules="rules"
@@ -16,8 +16,8 @@
           :disabled="editPage"
         ></el-input>
       </el-form-item>
-      <el-form-item label="级别" prop="level">
-        <el-select
+      <el-form-item label="城市" prop="ids">
+        <!-- <el-select
           v-model="ruleForm.level"
           placeholder="请选择"
           :disabled="editPage"
@@ -28,7 +28,15 @@
             :label="item.label"
             :value="item.value"
           />
-        </el-select>
+        </el-select> -->
+        <el-cascader
+          v-model="ruleForm.ids"
+          :options="levelOptions"
+          :props="{ expandTrigger: 'hover' }"
+          :show-all-levels="false"
+          :disabled="editPage"
+        >
+        </el-cascader>
       </el-form-item>
       <el-form-item label="归口" prop="attribute">
         <el-select
@@ -51,7 +59,7 @@
             placeholder="选择日期"
             value-format="yyyy-MM-dd"
             v-model="ruleForm.listDate"
-            style="width: 30%;"
+            style="width: 30%"
             :disabled="editPage"
           ></el-date-picker>
         </el-form-item>
@@ -80,77 +88,81 @@
 <script>
 import Editor from '@/components/Editor';
 import { addPolicy, updatePolicy, getPolicyInfo } from '@/api/policy/library';
+import { getCityByLevel } from '@/api/policy/library';
 export default {
   components: {
-    Editor
+    Editor,
   },
   data() {
     return {
       editPage: false,
       ruleForm: {
         title: '',
-        level: '',
+        ids: '',
         attribute: '',
         listDate: '',
         source: '',
-        text: ''
+        text: '',
       },
       // 归口选项
       attributeOptions: [
         {
           value: 'KJJ',
-          label: '科技'
+          label: '科技',
         },
         {
           value: 'JXJ',
-          label: '经信'
+          label: '经信',
         },
         {
           value: 'FGW',
-          label: '发改'
+          label: '发改',
         },
         {
           value: 'OTHER',
-          label: '其他'
-        }
+          label: '其他',
+        },
       ],
       // 级别选项
       levelOptions: [
         {
-          value: 1,
-          label: '省级'
+          value: '1',
+          label: '安徽省',
         },
         {
-          value: 2,
-          label: '市级'
+          value: '2',
+          label: '地级市',
+          children: [],
         },
         {
-          value: 3,
-          label: '区级'
-        }
+          value: '3',
+          label: '合肥区县',
+          children: [],
+        },
       ],
       rules: {
         title: [{ required: true, message: '请输入政策标题', trigger: 'blur' }],
-        level: [{ required: true, message: '请选择级别', trigger: 'change' }],
+        ids: [{ required: true, message: '请选择级别', trigger: 'change' }],
         attribute: [
-          { required: true, message: '请选择归口', trigger: 'change' }
+          { required: true, message: '请选择归口', trigger: 'change' },
         ],
         listDate: [
           {
-            // type: 'date',
             required: true,
             message: '请选择日期',
-            trigger: 'change'
-          }
+            trigger: 'change',
+          },
         ],
         source: [{ required: true, message: '请填写来源', trigger: 'blur' }],
-        text: [{ required: true, message: '请填写富文本内容', trigger: 'blur' }]
-      }
+        text: [
+          { required: true, message: '请填写富文本内容', trigger: 'blur' },
+        ],
+      },
     };
   },
   methods: {
     submitForm(formName) {
-      this.$refs[formName].validate(valid => {
+      this.$refs[formName].validate((valid) => {
         if (valid) {
           if (this.editPage) {
             // 修改
@@ -169,20 +181,20 @@ export default {
           return false;
         }
       });
-    }
+    },
     // resetForm(formName) {
     //   this.$refs[formName].resetFields();
     // }
   },
   watch: {
     ruleForm: {
-      handler: function() {
+      handler: function () {
         this.$nextTick(() => {
           this.formatRichText(this.ruleForm.downloadUrl);
         });
-      }
+      },
     },
-    deep: true
+    deep: true,
   },
   created() {
     let { id } = this.$route.query;
@@ -192,7 +204,13 @@ export default {
         this.ruleForm = data;
       });
     }
-  }
+    getCityByLevel({ level: 2 }).then(({ data }) => {
+      this.levelOptions[1].children = data;
+    });
+    getCityByLevel({ level: 3 }).then(({ data }) => {
+      this.levelOptions[2].children = data;
+    });
+  },
 };
 </script>
 <style lang="scss" scoped>