晚上

src/api/basicTable/category.js

@@ -11,8 +11,8 @@ export default {
   edit(params) {
     return axios.put('/category/edit', params)
   },
-  del(params) {
-    return axios.delete('/category/delete', params)
+  delete(params) {
+    return axios.delete('/category/delete/'+params)
   },
   getDetail(index) {
     return axios.get("/category/info" + index)

src/api/basicTable/conventionl.js

@@ -1,4 +1,6 @@
 import axios from "@/config/axios"
-export function getList(params){
-    return axios.get("/quota/index",{params})
+export default{
+     getList(params){
+        return axios.get("/quota/index",{params})
+    }
 }

src/styles/global.css

@@ -8,7 +8,6 @@
 /* 搜索行边距 */
 .search{
     margin-bottom:20px;
-    border-bottom:1px solid rgb(207, 207, 207);
 }
 
 /* 搜索行样式*/

src/views/basicTable/category.vue

@@ -4,14 +4,17 @@
       <search :search-params="searchParams" />
       <div class="operating">
         <el-button size="small" type="warning" @click="add">新增</el-button>
-        <el-button size="small" type="default">批量删除</el-button>
-        <el-button size="small" type="default">批量导入</el-button>
+        <el-button size="small" type="default" @click="remove()"
+          >批量删除</el-button
+        >
+        <!-- <el-button size="small" type="default">批量导入</el-button> -->
       </div>
       <el-table
         highlight-current-row
         :data="dataList"
         border
         :height="tableHeight"
+        @selection-change="selectionChange"
       >
         <el-table-column
           type="selection"
@@ -60,20 +63,40 @@
           align="center"
           prop="createUser"
         ></el-table-column>
-        <el-table-column
-          label="操作"
-          min-width="150"
-          align="center"
-        ></el-table-column>
+        <el-table-column label="操作" min-width="120" align="center">
+          <template slot-scope="{ row }">
+            <el-link
+              @click="edit(row)"
+              icon="el-icon-edit"
+              type="primary"
+              :underline="false"
+              >修改</el-link
+            >
+            <el-popconfirm
+              title="确定要删除此表格？"
+              @confirm="remove(row)"
+              class="ele-action"
+            >
+              <el-link
+                slot="reference"
+                icon="el-icon-delete"
+                type="danger"
+                :underline="false"
+                >删除</el-link
+              >
+            </el-popconfirm>
+          </template>
+        </el-table-column>
       </el-table>
       <el-pagination
-        :current-page="page.page"
+        :current-page.sync="page.page"
         :page-size="page.limit"
         :total="count"
         :background="true"
         layout="total, prev, pager, next, jumper"
         :pager-count="5"
         class="ele-pagination-circle"
+        @current-change="getDataList()"
       />
     </el-card>
     <el-dialog
@@ -81,6 +104,9 @@
       :visible.sync="showAdd"
       width="400px"
       custom-class="ele-dialog-form"
+      :lock-scroll="false"
+      :destroy-on-close="true"
+      @closed="form = {}"
     >
       <el-form
         :model="form"
@@ -92,14 +118,29 @@
         :rules="rules"
       >
         <el-form-item label="考核年度:" prop="year">
-          <el-date-picker  type="year" placeholder="选择考核年度" style="width:100%" clearable v-model="form.year">
+          <el-date-picker
+            type="year"
+            placeholder="选择考核年度"
+            style="width: 100%"
+            v-model="form.year"
+            format="yyyy"
+            value-format="yyyy"
+          >
           </el-date-picker>
         </el-form-item>
         <el-form-item label="表格名称:" prop="name">
-          <el-input placeholder="请输入如表格名称" clearable v-model="form.name"></el-input>
+          <el-input
+            placeholder="请输入如表格名称"
+            clearable
+            v-model="form.name"
+          ></el-input>
         </el-form-item>
-        <el-form-item label="表编号:" prop='code'>
-          <el-input placeholder="请输入表编号" clearable v-model="form.code"></el-input>
+        <el-form-item label="表编号:" prop="code">
+          <el-input
+            placeholder="请输入表编号"
+            clearable
+            v-model="form.code"
+          ></el-input>
         </el-form-item>
         <el-form-item label="备注:">
           <el-input type="textarea" :rows="4" v-model="form.note"></el-input>
@@ -123,69 +164,121 @@ export default {
   data() {
     return {
       searchParams: {},
-      dataList: [
-        { code: "fadfadf", name: "fadfadf", note: "fdafa", year: "fdfadf" },
-      ],
+      dataList: [],
       count: 0,
       page: {
         page: 1,
-        limit: Math.floor((document.documentElement.clientHeight - 360-45) / 45),
+        limit: Math.floor(
+          (document.documentElement.clientHeight - 360 - 45) / 45
+        ),
       },
       showAdd: false,
       form: {},
+      multipleSelection: [],
       tableHeight: document.documentElement.clientHeight - 360,
       rules: {
         code: [{ required: true, message: "表编号", trigger: "blur" }],
         name: [{ required: true, message: "请输入表格名称", trigger: "blur" }],
-        year: [{ required: true, message: "请输入考核年度" }],
+        year: [{ required: true, message: "请输入考核年度", trigger: "blur" }],
       },
     };
   },
   created() {
-    this.getDataList(this.page);
+    this.getDataList();
   },
   methods: {
+    selectionChange(rows) {
+      this.multipleSelection = rows;
+    },
     getDataList(params) {
       const loading = this.$loading({ lock: true });
+      console.log(this.page);
       api
-        .getList(params)
+        .getList(params ? Object.assign(this.page, params) : this.page)
         .then((res) => {
           loading.close();
-          this.dataList = res.data.data.records;
-          this.count=res.data.data.total
+          let data = res.data.data.records;
+          data = data.map((item) => {
+            item.year = item.year + "";
+            return item;
+          });
+          this.dataList = data;
+          this.count = res.data.data.total;
         })
         .catch(() => {
           loading.close();
           this.dataList = [];
-          this.count=0
+          this.count = 0;
         });
     },
-    add(row) {
-      console.log(row)
+    add() {
       this.form = { code: "", name: "", note: "", year: "" };
       this.showAdd = true;
     },
     edit(row) {
-      console.log(row)
       this.form = Object.assign({}, row);
       this.showAdd = true;
     },
+    remove(row) {
+      if (!row) {
+        // 批量删除
+        if (this.multipleSelection.length === 0)
+          return this.$message.error("请至少选择一条数据");
+        let ids = this.multipleSelection.map((d) => d.id);
+        ids.join(",");
+        this.$confirm("确定要删除选中表格?", "提示", { type: "warning" })
+          .then(() => {
+            const loading = this.$loading({ lock: true });
+            api
+              .delete(ids)
+              .then(() => {
+                loading.close();
+                this.$message({ type: "success", message: "删除成功" });
+              })
+              .catch(() => {
+                loading.close();
+                this.$message.error("删失败");
+              });
+          })
+          .catch(() => 0);
+      } else {
+        // 单个删除
+        const loading = this.$loading({ lock: true });
+        api
+          .delete(row.id)
+          .then(() => {
+            loading.close();
+            this.$message({ type: "success", message: "删除成功" });
+          })
+          .catch(() => {
+            loading.close();
+            this.$message.error("删除失败");
+          });
+      }
+    },
     save() {
       this.$refs["editForm"].validate((valid) => {
-        console.log(valid)
         if (valid) {
           const loading = this.$loading({ lock: true });
           let action = this.form.id ? "edit" : "add";
           api[action](this.form)
-            .then((res) => {
-              console.log(res);
+            .then(() => {
               loading.close();
+              this.$message({
+                type: "success",
+                message: this.form.id ? "修改成功" : "添加成功",
+              });
+              this.getDataList(this.page);
             })
-            .catch((e) => {
-              console.log(e)
+            .catch(() => {
               loading.close();
               this.$message.error(this.form.id ? "修改失败" : "添加失败");
+            })
+            .finally(() => {
+              this.showAdd = false;
             });
+        } else {
+          return false;
         }
       });
     },

src/views/basicTable/conventional.vue

@@ -2,18 +2,17 @@
   <div class="conventional ele-body">
     <el-card shadow="never">
       <search :search-params="searchParams" />
-      <div class="operating">
-        <el-button size="small" type="warning">新增</el-button>
+      <!-- <div class="operating">
+        <el-button size="small" type="warning" @click="add">新增</el-button>
         <el-button size="small" type="default">批量删除</el-button>
         <el-button size="small" type="default">批量导入</el-button>
-      </div>
+      </div> -->
 
       <el-table
         highlight-current-row
         border
         :data="dataList"
-        height="calc(100vh - 360px)"
-        s
+        :height="tableHeight"
       >
         <el-table-column
           type="selection"
@@ -30,54 +29,193 @@
           label="考核年度"
           min-width="80"
           align="center"
+          prop="year"
         ></el-table-column>
         <el-table-column
           label="表编号"
           min-width="80"
           align="center"
+          prop="code"
         ></el-table-column>
         <el-table-column
           label="表格名称"
           min-width="100"
           align="center"
+          prop="name"
         ></el-table-column>
         <el-table-column
           label="一级指标"
           align="center"
           min-width="150"
+          prop="quota1"
         ></el-table-column>
         <el-table-column
           label="二级指标"
           align="center"
           min-width="150"
+          prop="quota2"
         ></el-table-column>
         <el-table-column
           label="考核内容数"
           align="center"
           min-width="80"
+          prop="num"
         ></el-table-column>
-        <el-table-column
+        <!-- <el-table-column
           label="操作"
           min-width="150"
           align="center"
-        ></el-table-column>
+        ></el-table-column> -->
       </el-table>
+      <el-pagination
+        :current-page.sync="page.page"
+        :page-size="page.limit"
+        :total="count"
+        :background="true"
+        layout="total, prev, pager, next, jumper"
+        :pager-count="5"
+        class="ele-pagination-circle"
+        @current-change="getDataList()"
+      />
     </el-card>
+
+    <!-- 新增 -->
+    <el-dialog
+      title="添加表"
+      :visible.sync="showAdd"
+      width="600px"
+      custom-class="ele-dialog-form"
+    >
+      <el-form
+        :model="form"
+        label-width="90px"
+        custom-class="editForm"
+        @keyup.enter.native="save"
+        @submit.native.prevent
+        ref="editForm"
+        :rules="rules"
+      >
+        <el-row :gutter="15">
+          <el-col :md="11">
+            <el-form-item label="考核年度:" prop="year">
+              <el-date-picker
+                type="year"
+                placeholder="选择考核年度"
+                style="width: 100%"
+                clearable
+                v-model="form.year"
+              >
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="表格名称:" prop="name">
+              <el-input
+                placeholder="请输入表格名称"
+                clearable
+                v-model="form.name"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="表编号:" prop="code">
+              <el-input
+                placeholder="请输入表编号"
+                clearable
+                v-model="form.code"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :md="12">
+            <el-form-item label="一级指标:" prop="first">
+              <el-input
+                placeholder="请输入一级指标"
+                clearable
+                v-model="form.name"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="二级指标:" prop="second">
+              <el-input
+                placeholder="请输入二级指标"
+                clearable
+                v-model="form.code"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="考核内容数:" prop="number">
+              <el-input
+                placeholder="请输入考核内容数"
+                clearable
+                v-model="form.code"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="showAdd = false">取消</el-button>&nbsp;
+        <el-button type="primary" @click="save">保存</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import search from "./search";
+import api from "@/api/basicTable/conventionl.js";
 export default {
   components: {
     search,
   },
   data() {
     return {
-      dataList: [],
       searchParams: {},
+      dataList: [],
+      count: 0,
+      page: {
+        page: 1,
+        limit: Math.floor(
+          (document.documentElement.clientHeight - 360 - 45) / 45
+        ),
+      },
+      showAdd: false,
+      form: {},
+      multipleSelection: [],
+      tableHeight: document.documentElement.clientHeight - 320,
+      rules: {
+        code: [{ required: true, message: "表编号", trigger: "blur" }],
+        name: [{ required: true, message: "请输入表格名称", trigger: "blur" }],
+        year: [{ required: true, message: "请输入考核年度" }],
+      },
     };
   },
+  created() {
+    this.getDataList();
+  },
+  methods: {
+    
+    getDataList(params) {
+      const loading = this.$loading({ lock: true });
+      api
+        .getList(params ? Object.assign(this.page, params) : this.page)
+        .then((res) => {
+          loading.close();
+          let data = res.data.data.records;
+          data = data.map((item) => {
+            item.year = item.year + "";
+            return item;
+          });
+          this.dataList = data;
+          this.count = res.data.data.total;
+        })
+        .catch(() => {
+          loading.close();
+          this.dataList = [];
+          this.count = 0;
+        });
+    },
+    add() {
+      this.$nextTick(function () {
+        this.showAdd = true;
+      });
+    },
+    save() {},
+  },
 };
 </script>