el-dialog修改

src/pages/main/performance/components/dialog.vue

@@ -8,34 +8,7 @@
       width="700px"
     >
       <!-- 表格主体部分 -->
-      <div>
-        <el-row
-          v-for="({ label, props, type, options }, index) in content"
-          :key="index"
-          :gutter="24"
-          class="padding-bottom-20"
-          ><el-col :span="2" />
-          <el-col :span="6">
-            <!-- 标签 -->
-            {{ label }} + {{ props }}
-          </el-col>
-          <el-col :span="12">
-            <el-input v-if="type === 'input'" v-model="object[props]" />
-            <el-select
-              v-if="type === 'select'"
-              v-model="object[props]"
-              @change="changeSelect"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              ></el-option>
-            </el-select>
-          </el-col>
-        </el-row>
-      </div>
+      <slot></slot>
       <!-- 表格底部 -->
       <div slot="footer">
         <el-button @click="handleCancel" size="small">取消</el-button>
@@ -66,10 +39,6 @@ export default {
       type: Number,
       default: 0,
     },
-    content: {
-      type: Array,
-      default: () => [],
-    },
   },
   data: () => ({
     object: {},
@@ -78,10 +47,6 @@ export default {
     console.log("我被初始化了");
   },
   methods: {
-    //   change事件
-    changeSelect(props) {
-      console.log(props);
-    },
     //   确定的回调
     handleConfirm() {
       this.object = {};

src/pages/main/performance/department.vue

@@ -1,9 +1,225 @@
 <template>
-    <div>Department</div>
+  <div>
+    <!-- <simple-drawer
+      title="新增服务类别"
+      :visible="visible_class"
+      :form="visible_class_form"
+      :config="visible_class_config"
+      @confirm="handleClassSubmit"
+      @cancel="handleDrawer('class')"
+    ></simple-drawer> -->
+    <simple-table
+      :list="table_list"
+      :config="table_config"
+      :loading="table_loading"
+      :handle-row="table_handle_row"
+      @check="handleCheck"
+      @edit="handleEdit"
+    ></simple-table>
+    <simple-pagination
+      :page="page"
+      :total="total"
+      @change="handleChange"
+    ></simple-pagination>
+    <simple-dialog
+      :title="title"
+      :visible="visible"
+      :reload="reload"
+      @confirm="handleConfirm"
+      @cancel="handleCancel"
+    >
+      <div>
+        <el-row
+          v-for="({ label, props, type, options }, index) in dialog_content"
+          :key="index"
+          :gutter="24"
+          class="padding-bottom-20"
+          ><el-col :span="2" />
+          <el-col :span="6">
+            <!-- 标签 -->
+            {{ label }} + {{ props }}
+          </el-col>
+          <el-col :span="12">
+            <el-input v-if="type === 'input'" v-model="params[props]" />
+            <el-select v-if="type === 'select'" v-model="params[props]">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-col>
+        </el-row>
+      </div>
+    </simple-dialog>
+  </div>
 </template>
 
 <script>
-export default {};
+import simpleTable from "./components/table.vue";
+import simplePagination from "./components/pagination.vue";
+import simpleDialog from "./components/dialog.vue";
+export default {
+  components: {
+    simpleTable,
+    simplePagination,
+    simpleDialog,
+  },
+  data() {
+    return {
+      page: 1,
+      total: 5,
+      //   dialog 参数
+      title: "权限设置",
+      visible: false,
+      reload: 0,
+      params: {},
+      //   弹出层具体的内容
+      dialog_content: [
+        {
+          label: "可编辑列",
+          props: "editrows",
+          type: "input",
+        },
+        {
+          label: "权限规则",
+          props: "rule",
+          type: "select",
+          options: [
+            {
+              value: "value",
+              label: "label",
+            },
+          ],
+        },
+        {
+          label: "负责人",
+          props: "charge",
+          type: "input",
+        },
+      ],
+      //   列表数据
+      table_list: [
+        {
+          preCata1: "GS",
+          preCata2: "信息技术中心2021年度部门GS绩效计划",
+          preCata3: "XXXXXXXXX",
+          preCata4: "XXXXXXXXX",
+          preCata5: "2021.02.01",
+          preCata6: "周钰",
+          preCata7: "待处理",
+        },
+        {
+          preCata1: "GS",
+          preCata2: "信息技术中心2021年度部门GS绩效计划",
+          preCata3: "XXXXXXXXX",
+          preCata4: "XXXXXXXXX",
+          preCata5: "2021.02.01",
+          preCata6: "周钰",
+          preCata7: "待汇总",
+        },
+        {
+          preCata1: "GS",
+          preCata2: "信息技术中心2021年度部门GS绩效计划",
+          preCata3: "XXXXXXXXX",
+          preCata4: "XXXXXXXXX",
+          preCata5: "2021.02.01",
+          preCata6: "周钰",
+          preCata7: "待审批",
+        },
+        {
+          preCata1: "GS",
+          preCata2: "信息技术中心2021年度部门GS绩效计划",
+          preCata3: "XXXXXXXXX",
+          preCata4: "XXXXXXXXX",
+          preCata5: "2021.02.01",
+          preCata6: "周钰",
+          preCata7: "待处理",
+        },
+        {
+          preCata1: "GS",
+          preCata2: "信息技术中心2021年度部门GS绩效计划",
+          preCata3: "XXXXXXXXX",
+          preCata4: "XXXXXXXXX",
+          preCata5: "2021.02.01",
+          preCata6: "周钰",
+          preCata7: "已完成",
+        },
+      ],
+      table_loading: false,
+      //   表格里的操作按钮
+      table_handle_row: [
+        {
+          label: "查看",
+          props: "check",
+        },
+        {
+          label: "处理",
+          props: "edit",
+          visible: {
+            preCata7: ["待处理", "待审批"],
+          },
+        },
+      ],
+      //  表头配置
+      table_config: [
+        {
+          label: "绩效分类",
+          props: "preCata1",
+        },
+        {
+          label: "模板名称",
+          props: "preCata2",
+        },
+        {
+          label: "填报事由",
+          props: "preCata3",
+        },
+        {
+          label: "填报注意事项",
+          props: "preCata4",
+        },
+        {
+          label: "截止时间",
+          props: "preCata5",
+        },
+        {
+          label: "发起人",
+          props: "preCata6",
+        },
+        {
+          label: "状态",
+          props: "preCata7",
+        },
+      ],
+    };
+  },
+  methods: {
+    handleInit() {},
+    handleChange(page) {
+      this.page = page;
+      this.handleInit();
+    },
+    // 编辑按钮
+    handleEdit(row) {
+      console.log(row, "row")
+      this.visible = true
+    },
+    handleCheck() {},
+    handleDelete() {},
+    handleConfirm({ params, visible }) {
+      this.reload++;
+      this.visible = visible;
+      console.log(this.params, "handleConFirm");
+    },
+    handleCancel(data) {
+      this.reload++;
+      this.visible = data;
+      console.log(data, "handleCancel");
+    },
+  },
+};
 </script>
 
 <style></style>