级联选择

src/pages/main/performance/department.vue

@@ -1,13 +1,11 @@
 <template>
   <div class="simple-container">
-    <!-- <simple-drawer
-      title="新增服务类别"
-      :visible="visible_class"
-      :form="visible_class_form"
-      :config="visible_class_config"
-      @confirm="handleClassSubmit"
-      @cancel="handleDrawer('class')"
-    ></simple-drawer> -->
+    <simple-form :form="table_form" @search="handleSearch">
+      <!-- :handle="table_handle"
+      @add="handleRulesVisible"
+      @class="handleDrawer('class')"
+      @download="handleDownload" -->
+    </simple-form>
     <simple-table
       :list="table_list"
       :config="table_config"
@@ -37,7 +35,7 @@
           ><el-col :span="2" />
           <el-col :span="6">
             <!-- 标签 -->
-            {{ label }} + {{ props }}
+            {{ label }}
           </el-col>
           <el-col :span="12">
             <el-input v-if="type === 'input'" v-model="params[props]" />
@@ -49,6 +47,12 @@
                 :value="item.value"
               ></el-option>
             </el-select>
+            <el-cascader
+              v-model="params[props]"
+              :options="options"
+              v-if="type === 'cascader'"
+              @change="handleCascader"
+            />
           </el-col>
         </el-row>
       </div>
@@ -57,11 +61,13 @@
 </template>
 
 <script>
+import simpleForm from "./components/form.vue";
 import simpleTable from "./components/table.vue";
 import simplePagination from "./components/pagination.vue";
 import simpleDialog from "./components/dialog.vue";
 export default {
   components: {
+    simpleForm,
     simpleTable,
     simplePagination,
     simpleDialog,
@@ -88,15 +94,86 @@ export default {
           type: "select",
           options: [
             {
-              value: "value",
-              label: "label",
+              value: "按行号",
+              label: "按行号",
+            },
+            {
+              value: "按科室分配",
+              label: "按科室分配",
+            },
+            {
+              value: "按负责人分配",
+              label: "按负责人分配",
+            },
+            {
+              value: "所有人员",
+              label: "",
             },
           ],
         },
         {
           label: "负责人",
           props: "charge",
-          type: "input",
+          type: "cascader",
+          options: [
+            {
+              label: "科室名称1",
+              value: "科室名称1",
+              children: [
+                {
+                  label: "负责人",
+                  value: "负责人",
+                  children: [{ label: "尹强", value: "尹强" }],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      //   顶部form
+      table_form: [
+        {
+          label: "绩效分类",
+          props: "department",
+          type: "select",
+          dictionary: [
+            {
+              label: "GS",
+              value: "1",
+            },
+            {
+              label: "KPI",
+              value: "2",
+            },
+          ],
+        },
+        {
+          label: "下发月份",
+          props: "date",
+          type: "date",
+        },
+        {
+          label: "状态",
+          props: "service",
+          type: "select",
+          dictionary: [
+            {
+              label: "待处理",
+              value: "1",
+            },
+            {
+              label: "待汇总",
+              value: "2",
+            },
+            {
+              label: "待审批",
+              value: "3",
+            },
+            {
+              label: "已完成",
+              value: "4",
+            },
+          ],
         },
       ],
       //   列表数据
@@ -196,19 +273,26 @@ export default {
     };
   },
   methods: {
+    //   初始化
     handleInit() {},
     handleChange(page) {
       this.page = page;
       this.handleInit();
     },
+    // 搜索时间
+    handleSearch(data) {
+      console.log(data);
+    },
     // 编辑按钮
     handleEdit(row) {
-      console.log(row, "row")
-      this.visible = true
+      console.log(row, "row");
+      this.visible = true;
     },
+    // 级联选择
+    handleCascader() {},
     handleCheck() {},
     handleDelete() {},
-    handleConfirm({ params, visible }) {
+    handleConfirm(visible) {
       this.reload++;
       this.visible = visible;
       console.log(this.params, "handleConFirm");