加个序号，模板规则改动，文件收集改动

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

@@ -1,63 +1,120 @@
 <!--
  * @Author       : yuanrunwei
  * @Date         : 2021-12-04 14:23:58
- * @LastEditors  : yuanrunwei
- * @LastEditTime : 2021-12-28 20:20:48
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-01-06 17:06:48
  * @FilePath     : \spfm-market-front\src\pages\main\performance\components\sheet.vue
 -->
 
 <template>
-    <div class="sheet-container">
-        <div class="flex-justify-align-end margin-bottom-20">
-            <el-button
-                type="primary"
-                @click="handleVisible"
-                v-if="['template'].includes(attribute)"
-                >权限设置</el-button
-            >
-            <el-button type="primary" @click="handleDownload">导出</el-button>
-            <el-button type="primary" @click="handleFullscreen()"
-                >全屏显示</el-button
+  <div class="sheet-container">
+    <div class="flex-justify-align-end margin-bottom-20">
+      <el-button
+        type="primary"
+        @click="handleVisible"
+        v-if="['template'].includes(attribute)"
+        >权限设置</el-button
+      >
+      <el-button type="primary" @click="handleDownload">导出</el-button>
+      <el-button type="primary" @click="handleFullscreen()">全屏显示</el-button>
+      <template v-if="['edit'].includes(type)">
+        <el-upload
+          v-if="!id"
+          class="margin-right-10 margin-left-10"
+          action
+          :on-change="handleChange"
+          :show-file-list="false"
+        >
+          <el-button type="primary">上传</el-button>
+        </el-upload>
+        <el-button type="primary" @click="handleSave" :disabled="handleForbid()"
+          ><span>{{ id ? "提交" : "新增" }}</span
+          ><span>{{
+            handleForbid() ? `（请先设置权限）` : ""
+          }}</span></el-button
+        >
+      </template>
+    </div>
+    <div id="luckysheet" class="sheet-container-block"></div>
+    <simple-dialog
+      title="权限设置"
+      :visible="visible"
+      :modal="false"
+      width="1400px"
+      @confirm="handleAuth"
+      @cancel="handleVisible"
+    >
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-radio-group v-model="form.permission_type">
+          <el-form-item>
+            <el-radio :label="0"><span>公共权限：</span></el-radio>
+            <div class="form-input">
+              <span class="form-content"> 可编辑行：从</span>
+              <el-input v-model="form.col_start" />
+              <span class="form-content">到</span
+              ><el-input v-model="form.col_end" />
+            </div>
+            <div class="form-input">
+              <span class="form-content">可编辑列：从</span>
+              <el-input v-model="form.row_start" />
+              <span class="form-content">到</span>
+              <el-input v-model="form.row_end" />
+            </div>
+          </el-form-item>
+          <el-form-item>
+            <el-radio :label="1"><span>特殊权限：</span></el-radio>
+            <el-form-item
+              label="负责人"
+              prop="charge"
+              v-for="(item, index) in form.charge"
+              :key="index"
+              :rules="{
+                required: true,
+                message: '负责人不能为空',
+                trigger: 'blur',
+              }"
             >
-            <template v-if="['edit'].includes(type)">
-                <el-upload
-                    v-if="!id"
-                    class="margin-right-10 margin-left-10"
-                    action
-                    :on-change="handleChange"
-                    :show-file-list="false"
+              <div class="flex">
+                <el-select
+                  class="margin-bottom-20 margin-right-10"
+                  placeholder="请选择负责人"
+                  v-model="item.person"
+                  filterable
                 >
-                    <el-button type="primary">上传</el-button>
-                </el-upload>
-                <el-button
-                    type="primary"
-                    @click="handleSave"
-                    :disabled="handleForbid()"
-                    ><span>{{ id ? "提交" : "新增" }}</span
-                    ><span>{{
-                        handleForbid() ? `（请先设置权限）` : ""
-                    }}</span></el-button
-                >
-            </template>
-        </div>
-        <div id="luckysheet" class="sheet-container-block"></div>
-        <simple-dialog
-            title="权限设置"
-            :visible="visible"
-            :modal="false"
-            width="700px"
-            @confirm="handleAuth"
-            @cancel="handleVisible"
-        >
-            <el-form ref="form" :model="form" label-width="100px">
-                <el-form-item
+                  <el-option
+                    v-for="({ label, value }, index) in charge_list"
+                    :key="index"
+                    :label="label"
+                    :value="value"
+                  ></el-option>
+                </el-select>
+                <div class="form-select">
+                  <span class="form-content">可编辑行：从</span>
+                  <el-input v-model="item.col_start" />
+                  <span class="form-content">到</span>
+                  <el-input v-model="item.col_end" />
+                </div>
+                <div class="form-select">
+                  <span class="form-content">可编辑列：从</span>
+                  <el-input v-model="item.row_start" />
+                  <span class="form-content">到</span>
+                  <el-input v-model="item.row_end" />
+                </div>
+              </div>
+            </el-form-item>
+            <div>
+              <el-button @click.prevent="handleCharge('add')">添加</el-button>
+              <el-button
+                v-if="form.charge.length - 1"
+                @click.prevent="handleCharge('delete')"
+                >删除</el-button
+              >
+            </div>
+          </el-form-item>
+        </el-radio-group>
+        <!-- <el-form-item
                     label="可编辑列"
                     prop="array"
-                    :rules="{
-                        required: true,
-                        message: '可编辑列不能为空',
-                        trigger: 'change',
-                    }"
                     ><el-select
                         v-model="form.array"
                         placeholder="可编辑列"
@@ -141,11 +198,11 @@
                             >删除</el-button
                         >
                     </div>
-                </el-form-item>
-            </el-form>
-            <template v-if="!id" v-slot:footer><div></div></template>
-        </simple-dialog>
-    </div>
+                </el-form-item> -->
+      </el-form>
+      <!-- <template v-if="!id" v-slot:footer><div></div></template> -->
+    </simple-dialog>
+  </div>
 </template>
 
 <script>
@@ -153,378 +210,450 @@ import luckyexcel from "luckyexcel";
 import { exportExcel } from "../common/export";
 import simpleDialog from "./dialog.vue";
 export default {
-    components: {
-        simpleDialog,
+  components: {
+    simpleDialog,
+  },
+  props: {
+    type: {
+      type: String,
+      default: "view", // view 查看 edit 编辑
+    },
+    attribute: {
+      type: String,
+      default: "template", // template 模板 order 工单 file 文件
     },
-    props: {
-        type: {
-            type: String,
-            default: "view", // view 查看 edit 编辑
+    id: {
+      default: null,
+    },
+  },
+  data() {
+    return {
+      form: {
+        charge: [
+          {
+            person: "",
+            col_start: "",
+            col_end: "",
+            row_start: "",
+            row_end: "",
+          },
+        ],
+        array: [],
+        type: null,
+        permission_type: 0,
+        col_start: "",
+        col_end: "",
+        row_start: "",
+        row_end: "",
+      },
+      isDisable: true,
+      issued_id: null,
+      template_id: null,
+      visible: false,
+      row_list: [],
+      column_list: [],
+      charge_list: [],
+      type_options: [
+        {
+          value: 1,
+          label: "按行",
         },
-        attribute: {
-            type: String,
-            default: "template", // template 模板 order 工单 file 文件
+        // {
+        //     value: 2,
+        //     label: "按列",
+        // },
+      ],
+    };
+  },
+  methods: {
+    handleInit() {
+      if (this.id) {
+        this.handleQuery();
+      } else {
+        this.handleCreate();
+      }
+    },
+    // // 权限选择
+    // handleRadio(e){
+    //     console.log(e,'e');
+    // },
+    handleAllow({ row, column }) {
+      return this.row_list.includes(row) && this.column_list.includes(column);
+    },
+    async handleQuery() {
+      let url = "";
+      let key = "";
+      switch (this.attribute) {
+        case "template":
+          url = "/market/CMKFileTemplate/QueryCMKFileTemplateById";
+          key = "templateId";
+          break;
+        case "order":
+          url = "/market/CMKIssued/CMKQueryIssuedById";
+          key = "id";
+          break;
+        case "file":
+          url = "/market/CMKIssued/CMKIssuedProcessByUser";
+          key = "id";
+          break;
+      }
+      const {
+        data: { templateContent, templateName, issuedId, templateId, list },
+      } = await this.$http({
+        url,
+        method: "post",
+        headers: {
+          "Content-Type": "application/json",
         },
-        id: {
-            default: null,
+        data: {
+          [key]: this.id,
         },
-    },
-    data() {
-        return {
-            form: {
-                charge: [{ value: "" }],
-            },
-            issued_id: null,
-            template_id: null,
-            visible: false,
-            row_list: [],
-            column_list: [],
-            charge_list: [],
-            type_options: [
-                {
-                    value: 1,
-                    label: "按行",
-                },
-                // {
-                //     value: 2,
-                //     label: "按列",
-                // },
-            ],
+      });
+      this.template_id = templateId;
+      this.issued_id = issuedId;
+      if (list && list.length) {
+        const [{ type, allowEditingColumns, rowNum }] = list;
+        this.form = {
+          ...this.form,
+          type: JSON.parse(type),
+          array: allowEditingColumns ? allowEditingColumns.split(",") : [],
+          charge: list.map(({ principalId, principalName, rowNum }) => ({
+            value: `${principalId},${principalName}`,
+            key: rowNum.split(","),
+          })),
         };
+        this.row_list =
+          this.type === "edit"
+            ? rowNum.split(",").map((element) => JSON.parse(element) - 1)
+            : [];
+        this.column_list =
+          this.type === "edit"
+            ? allowEditingColumns
+                .split(",")
+                .map((element) => JSON.parse(element) - 1)
+            : [];
+      }
+      this.handleCreate({
+        json: templateContent ? JSON.parse(templateContent) : {},
+        name: templateName,
+        type: "json",
+      });
     },
-    methods: {
-        handleInit() {
-            if (this.id) {
-                this.handleQuery();
-            } else {
-                this.handleCreate();
+    handleForbid() {
+      // const object = {};
+      const { permission_type } = this.form;
+      if (permission_type === 0) {
+        // 公共权限
+        const { col_start, col_end, row_start, row_end } = this.form;
+        if (col_start && col_end && row_start && row_end) {
+          return false;
+        }
+        return true;
+      } else if (permission_type === 1) {
+        console.log("特殊权限");
+        // 特殊权限
+        let flag = 1;
+        const { charge } = this.form;
+        charge.forEach((el) => {
+          if (
+            Object.values(el).filter((v) => {
+              return v !== "";
+            }).length === 5
+          ) {
+            flag = flag * 1;
+          } else {
+            flag = flag * 0;
+          }
+        });
+        return !flag;
+      }
+      //  form: {
+      //   charge: [
+      //     {
+      //       person: "",
+      //       col_start: "",
+      //       col_End: "",
+      //       row_start: "",
+      //       row_end: "",
+      //     },
+      //   ],
+      //   array: [],
+      //   type: null,
+      //   permission_type: 0,
+      //   col_start: "",
+      //   col_end: "",
+      //   row_start: "",
+      //   row_end: "",
+      // },
+
+      // charge.map(({ key }) => {
+      //   console.log(key);
+      //   // if (key && value) {
+      //   //   object[key] = value;
+      //   // }
+      // });
+      // return !(Object.keys(object).length && type);
+    },
+    async handleCreate({ file, json, type, name } = {}) {
+      let that = this;
+      const options = {
+        container: "luckysheet",
+        lang: "zh",
+        showsheetbar: false,
+        hook: {
+          cellEditBefore: function ([
+            { row_focus: row, column_focus: column },
+          ]) {
+            if (!that.handleAllow({ row, column })) {
+              that.$message.error("您没有编辑权限");
             }
-        },
-        handleAllow({ row, column }) {
-            return (
-                this.row_list.includes(row) && this.column_list.includes(column)
-            );
-        },
-        async handleQuery() {
-            let url = "";
-            let key = "";
-            switch (this.attribute) {
-                case "template":
-                    url = "/market/CMKFileTemplate/QueryCMKFileTemplateById";
-                    key = "templateId";
-                    break;
-                case "order":
-                    url = "/market/CMKIssued/CMKQueryIssuedById";
-                    key = "id";
-                    break;
-                case "file":
-                    url = "/market/CMKIssued/CMKIssuedProcessByUser";
-                    key = "id";
-                    break;
+          },
+          cellUpdateBefore: function (row, column) {
+            if (!that.handleAllow({ row, column })) {
+              return false;
             }
-            const {
-                data: {
-                    templateContent,
-                    templateName,
-                    issuedId,
-                    templateId,
-                    list,
-                },
-            } = await this.$http({
-                url,
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                data: {
-                    [key]: this.id,
-                },
-            });
-            this.template_id = templateId;
-            this.issued_id = issuedId;
-            if (list && list.length) {
-                const [{ type, allowEditingColumns, rowNum }] = list;
-                this.form = {
-                    ...this.form,
-                    type: JSON.parse(type),
-                    array: allowEditingColumns
-                        ? allowEditingColumns.split(",")
-                        : [],
-                    charge: list.map(
-                        ({ principalId, principalName, rowNum }) => ({
-                            value: `${principalId},${principalName}`,
-                            key: rowNum.split(","),
-                        })
-                    ),
-                };
-                this.row_list =
-                    this.type === "edit"
-                        ? rowNum
-                              .split(",")
-                              .map((element) => JSON.parse(element) - 1)
-                        : [];
-                this.column_list =
-                    this.type === "edit"
-                        ? allowEditingColumns
-                              .split(",")
-                              .map((element) => JSON.parse(element) - 1)
-                        : [];
+          },
+          cellRenderAfter: function (cell, position) {
+            const { r: row, c: column } = position;
+            if (cell) {
+              if (!that.handleAllow({ row, column })) {
+                cell.bg = "#d5d5d5";
+              } else {
+                cell.bg = "#ffffff";
+              }
             }
-            this.handleCreate({
-                json: templateContent ? JSON.parse(templateContent) : {},
-                name: templateName,
-                type: "json",
-            });
+          },
         },
-        handleForbid() {
-            const object = {};
-            const { array, type, charge } = this.form;
-            charge.map(({ key, value }) => {
-                if (key && value) {
-                    object[key] = value;
-                }
+      };
+      switch (type) {
+        case "file":
+          if (file) {
+            await new Promise((resolve) => {
+              luckyexcel.transformExcelToLucky(file, (export_json) => {
+                options.data = [
+                  ...export_json.sheets.map((element) => ({
+                    ...element,
+                    zoomRatio: 0.75,
+                  })),
+                ];
+                options.title = export_json.info.name;
+                resolve();
+              });
             });
-            return !(Object.keys(object).length && array.length && type);
-        },
-        async handleCreate({ file, json, type, name } = {}) {
-            let that = this;
-            const options = {
-                container: "luckysheet",
-                lang: "zh",
-                showsheetbar: false,
-                hook: {
-                    cellEditBefore: function ([
-                        { row_focus: row, column_focus: column },
-                    ]) {
-                        if (!that.handleAllow({ row, column })) {
-                            that.$message.error("您没有编辑权限");
-                        }
-                    },
-                    cellUpdateBefore: function (row, column) {
-                        if (!that.handleAllow({ row, column })) {
-                            return false;
-                        }
-                    },
-                    cellRenderAfter: function (cell, position) {
-                        const { r: row, c: column } = position;
-                        if (cell) {
-                            if (!that.handleAllow({ row, column })) {
-                                cell.bg = "#d5d5d5";
-                            } else {
-                                cell.bg = "#ffffff";
-                            }
-                        }
-                    },
-                },
-            };
-            switch (type) {
-                case "file":
-                    if (file) {
-                        await new Promise((resolve) => {
-                            luckyexcel.transformExcelToLucky(
-                                file,
-                                (export_json) => {
-                                    options.data = [
-                                        ...export_json.sheets.map(
-                                            (element) => ({
-                                                ...element,
-                                                zoomRatio: 0.75,
-                                            })
-                                        ),
-                                    ];
-                                    options.title = export_json.info.name;
-                                    resolve();
-                                }
-                            );
-                        });
-                    }
-                    break;
-                case "json":
-                    if (json) {
-                        options.data = [
-                            {
-                                ...json,
-                                zoomRatio: 0.75,
-                            },
-                        ];
-                        options.title = name;
-                    }
-                    break;
-            }
+          }
+          break;
+        case "json":
+          if (json) {
+            options.data = [
+              {
+                ...json,
+                zoomRatio: 0.75,
+              },
+            ];
+            options.title = name;
+          }
+          break;
+      }
+      window.luckysheet.create(options);
 
-            window.luckysheet.create(options);
-            let clock = setInterval(() => {
-                if (window.luckysheet) {
-                    window.luckysheet.refresh();
-                    clearInterval(clock);
-                }
-            }, 1000);
-        },
-        async handleChange(response) {
-            this.handleCreate({ file: response.raw, type: "file" });
-        },
-        handleDownload() {
-            exportExcel(
-                window.luckysheet.getAllSheets(),
-                window.luckysheet.getWorkbookName()
-            );
-        },
-        async handleAddAuth({ id }) {
-            const object = {};
-            const { array, charge, type } = this.form;
-            charge.map(({ key, value }) => {
-                if (key && value) {
-                    object[key] = value;
-                }
-            });
-            await this.$http({
-                url: this.id
-                    ? "/market/CMKFileTemplateAuthority/CMKFileTemplateAuthorityUpdate"
-                    : "/market/CMKFileTemplateAuthority/CMKFileTemplateAuthorityAdd",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                data: {
-                    allowEditingColumns: array.join(","),
-                    auth: JSON.stringify(object),
-                    templateId: id,
-                    type,
-                },
-            });
-            this.$message.success("操作成功");
-        },
-        async handleSave() {
-            let edit_url = "";
-            switch (this.attribute) {
-                case "template":
-                    edit_url = "";
-                    break;
-                case "order":
-                    edit_url = "";
-                    break;
-                case "file":
-                    edit_url = "/market/CMKIssued/CMKIssuedSubmit";
-                    break;
-            }
-            const sheet_name = window.luckysheet.getSheet().name;
-            const data = window.luckysheet.getSheet(sheet_name);
-            const workbook_name = window.luckysheet.getWorkbookName();
-            const {
-                data: { body },
-            } = await this.$http({
-                url: this.id
-                    ? edit_url // 编辑
-                    : "/market/CMKFileTemplate/CMKFileTemplateAdd", // 新增
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                data: {
-                    id: this.template_id,
-                    templateContent: JSON.stringify(data),
-                    templateName: workbook_name,
-                    issuedId: this.issued_id,
-                },
-            });
-            // 新增时添加权限
-            if (!this.id) {
-                this.handleAddAuth({ id: body });
-            } else {
-                this.$message.success("提交成功");
-            }
-            this.$emit("save");
-        },
-        handleAuth() {
-            this.$refs["form"].validate((valid) => {
-                if (valid) {
-                    if (this.handleForbid()) {
-                        this.$message.error("请选择负责人编辑权限");
-                        return false;
-                    }
-                    this.handleVisible();
-                    if (this.id) {
-                        this.handleAddAuth({ id: this.id });
-                    } else {
-                        this.$message.success("设置成功");
-                    }
-                }
-            });
-        },
-        handleCharge(type) {
-            switch (type) {
-                case "add":
-                    this.form.charge.push({
-                        value: "",
-                    });
-                    break;
-                case "delete":
-                    this.form.charge.pop();
-                    break;
-            }
+      let clock = setInterval(() => {
+        if (window.luckysheet) {
+          window.luckysheet.refresh();
+          clearInterval(clock);
+        }
+      }, 1000);
+    },
+    async handleChange(response) {
+      this.handleCreate({ file: response.raw, type: "file" });
+    },
+    handleDownload() {
+      exportExcel(
+        window.luckysheet.getAllSheets(),
+        window.luckysheet.getWorkbookName()
+      );
+    },
+    async handleAddAuth({ id }) {
+      const object = {};
+      const { array, charge, type } = this.form;
+      charge.map(({ key, value }) => {
+        if (key && value) {
+          object[key] = value;
+        }
+      });
+      await this.$http({
+        url: this.id
+          ? "/market/CMKFileTemplateAuthority/CMKFileTemplateAuthorityUpdate"
+          : "/market/CMKFileTemplateAuthority/CMKFileTemplateAuthorityAdd",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json",
         },
-        handleVisible() {
-            this.visible = !this.visible;
+        data: {
+          allowEditingColumns: array.join(","),
+          auth: JSON.stringify(object),
+          templateId: id,
+          type,
         },
-        handleFullscreen() {
-            const element = document.body;
-            const is_fullscreen =
-                document.fullScreen ||
-                document.mozFullScreen ||
-                document.webkitIsFullScreen;
-            if (!is_fullscreen) {
-                //进入全屏,多重短路表达式
-                (element.requestFullscreen && element.requestFullscreen()) ||
-                    (element.mozRequestFullScreen &&
-                        element.mozRequestFullScreen()) ||
-                    (element.webkitRequestFullscreen &&
-                        element.webkitRequestFullscreen()) ||
-                    (element.msRequestFullscreen &&
-                        element.msRequestFullscreen());
-            } else {
-                //退出全屏,三目运算符
-                document.exitFullscreen
-                    ? document.exitFullscreen()
-                    : document.mozCancelFullScreen
-                    ? document.mozCancelFullScreen()
-                    : document.webkitExitFullscreen
-                    ? document.webkitExitFullscreen()
-                    : "";
-            }
+      });
+      this.$message.success("操作成功");
+    },
+    async handleSave() {
+      let edit_url = "";
+      switch (this.attribute) {
+        case "template":
+          edit_url = "";
+          break;
+        case "order":
+          edit_url = "";
+          break;
+        case "file":
+          edit_url = "/market/CMKIssued/CMKIssuedSubmit";
+          break;
+      }
+      const sheet_name = window.luckysheet.getSheet().name;
+      const data = window.luckysheet.getSheet(sheet_name);
+      const workbook_name = window.luckysheet.getWorkbookName();
+      const {
+        data: { body },
+      } = await this.$http({
+        url: this.id
+          ? edit_url // 编辑
+          : "/market/CMKFileTemplate/CMKFileTemplateAdd", // 新增
+        method: "post",
+        headers: {
+          "Content-Type": "application/json",
         },
-        handleChargeList() {
-            this.$http({
-                url: "/market/techcentergj/queryLeaderList",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                data: {},
-            }).then((response) => {
-                this.charge_list = response.data.map((element) => ({
-                    label: `${element.ou} ${element.secLeaderName}`,
-                    value: `${element.secLeaderLogin},${element.secLeaderName}`,
-                }));
-            });
+        data: {
+          id: this.template_id,
+          templateContent: JSON.stringify(data),
+          templateName: workbook_name,
+          issuedId: this.issued_id,
         },
+      });
+      // 新增时添加权限
+      if (!this.id) {
+        this.handleAddAuth({ id: body });
+      } else {
+        this.$message.success("提交成功");
+      }
+      this.$emit("save");
+    },
+    handleAuth() {
+      this.handleForbid();
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.handleForbid()) {
+            this.$message.error("请选择负责人编辑权限");
+            return false;
+          }
+          this.handleVisible();
+          if (this.id) {
+            this.handleAddAuth({ id: this.id });
+          } else {
+            this.$message.success("设置成功");
+          }
+        }
+      });
     },
-    mounted() {
-        this.handleInit();
-        this.handleChargeList();
+    handleCharge(type) {
+      switch (type) {
+        case "add":
+          this.form.charge.push({
+            person: "",
+          });
+          this.handleForbid();
+          break;
+        case "delete":
+          this.form.charge.pop();
+          this.handleForbid();
+          break;
+      }
     },
+    handleVisible() {
+      console.log(this.form, "aada");
+      this.visible = !this.visible;
+    },
+    handleFullscreen() {
+      const element = document.body;
+      const is_fullscreen =
+        document.fullScreen ||
+        document.mozFullScreen ||
+        document.webkitIsFullScreen;
+      if (!is_fullscreen) {
+        //进入全屏,多重短路表达式
+        (element.requestFullscreen && element.requestFullscreen()) ||
+          (element.mozRequestFullScreen && element.mozRequestFullScreen()) ||
+          (element.webkitRequestFullscreen &&
+            element.webkitRequestFullscreen()) ||
+          (element.msRequestFullscreen && element.msRequestFullscreen());
+      } else {
+        //退出全屏,三目运算符
+        document.exitFullscreen
+          ? document.exitFullscreen()
+          : document.mozCancelFullScreen
+          ? document.mozCancelFullScreen()
+          : document.webkitExitFullscreen
+          ? document.webkitExitFullscreen()
+          : "";
+      }
+    },
+    handleChargeList() {
+      this.$http({
+        url: "/market/techcentergj/queryLeaderList",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        data: {},
+      }).then((response) => {
+        this.charge_list = response.data.map((element) => ({
+          label: `${element.ou} ${element.secLeaderName}`,
+          value: `${element.secLeaderLogin},${element.secLeaderName}`,
+        }));
+      });
+    },
+  },
+  mounted() {
+    this.handleInit();
+    this.handleChargeList();
+  },
 };
 </script>
 
 <style lang="scss" scope>
 .sheet-container {
-    position: fixed;
-    width: calc(100% - 40px);
-    height: 100%;
-    &-block {
-        overflow: hidden;
-        position: absolute;
-        width: 100%;
-        height: 75%;
+  position: fixed;
+  width: calc(100% - 40px);
+  height: 100%;
+  &-block {
+    overflow: hidden;
+    position: absolute;
+    width: 100%;
+    height: 75%;
+  }
+}
+.form {
+  &-input {
+    margin-top: 5px;
+    .el-input {
+      width: 150px;
+      .el-input__inner {
+        height: 30px !important;
+        line-height: 30px !important;
+      }
+    }
+  }
+  &-content {
+    margin: 0px 10px;
+  }
+  &-select {
+    .el-input {
+      width: 150px;
+      .el-input__inner {
+        height: 30px !important;
+        line-height: 30px !important;
+      }
     }
+  }
 }
 </style>

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

@@ -2,166 +2,159 @@
  * @Author       : yuanrunwei
  * @Date         : 2021-11-01 18:02:58
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-12-22 19:55:28
+ * @LastEditTime: 2022-01-06 11:43:18
  * @FilePath     : \spfm-market-front\src\pages\main\performance\components\table.vue
 -->
 <template>
-    <el-table class="simple-table" :data="computed_list" v-loading="loading">
+  <el-table class="simple-table" :data="computed_list" v-loading="loading" >
+    <el-table-column
+      v-for="(
+        { props, label, type, width, align, children, dictionary }, index
+      ) in config"
+      :key="index"
+      :prop="props"
+      :width="width"
+      :label="label"
+      :align="align || 'center'"
+    >
+      <template #default="scope">
+        <div v-if="type === 'edit'">
+          <el-input
+            v-if="scope.row[`edit`]"
+            v-model="scope.row[props]"
+            autosize
+            type="textarea"
+            @change="handleModify"
+          />
+        </div>
+        <div v-else-if="type === 'textarea'">
+          <pre class="simple-table-break">{{ scope.row[props] }}</pre>
+        </div>
+        <div v-else-if="type === 'date'">
+          <div>{{ $formatDate(scope.row[props], "YYYY-MM-DD") }}</div>
+        </div>
+        <div v-if="type === 'number'">{{scope.$index+1}}</div>
+        <div v-else-if="type === 'click'">
+          <div
+            class="simple-table-click cursor-pointer"
+            @click="handleClick(props, scope.row)"
+          >
+            {{ scope.row[props] }}
+          </div>
+        </div>
+        <div v-else-if="type === 'dictionary'">
+          {{ dictionary[scope.row[props]] }}
+        </div>
+        <div v-else>{{ scope.row[props] }}</div>
+      </template>
+      <template v-if="children">
         <el-table-column
-            v-for="(
-                { props, label, type, width, align, children, dictionary },
-                index
-            ) in config"
-            :key="index"
-            :prop="props"
-            :width="width"
-            :label="label"
-            :align="align || 'center'"
+          v-for="({ props, label, width, align, type }, index) in children"
+          :key="index"
+          :prop="props"
+          :width="width"
+          :label="label"
+          :align="align || 'center'"
         >
-            <template #default="scope">
-                <div v-if="type === 'edit'">
-                    <el-input
-                        v-if="scope.row[`edit`]"
-                        v-model="scope.row[props]"
-                        autosize
-                        type="textarea"
-                        @change="handleModify"
-                    />
-                </div>
-                <div v-else-if="type === 'textarea'">
-                    <pre class="simple-table-break">{{ scope.row[props] }}</pre>
-                </div>
-                <div v-else-if="type === 'date'">
-                    <div>{{ $formatDate(scope.row[props], "YYYY-MM-DD") }}</div>
-                </div>
-                <div v-else-if="type === 'click'">
-                    <div
-                        class="simple-table-click cursor-pointer"
-                        @click="handleClick(props, scope.row)"
-                    >
-                        {{ scope.row[props] }}
-                    </div>
-                </div>
-                <div v-else-if="type === 'dictionary'">
-                    {{ dictionary[scope.row[props]] }}
-                </div>
-                <div v-else>{{ scope.row[props] }}</div>
-            </template>
-            <template v-if="children">
-                <el-table-column
-                    v-for="(
-                        { props, label, width, align, type }, index
-                    ) in children"
-                    :key="index"
-                    :prop="props"
-                    :width="width"
-                    :label="label"
-                    :align="align || 'center'"
-                >
-                    <template #default="scope">
-                        <div v-if="type === 'edit'">
-                            <el-input
-                                v-model="scope.row[props]"
-                                @change="handleModify"
-                                autosize
-                                type="textarea"
-                            />
-                        </div>
-                        <div v-else>{{ scope.row[props] }}</div>
-                    </template>
-                </el-table-column>
-            </template>
+          <template #default="scope">
+            <div v-if="type === 'edit'">
+              <el-input
+                v-model="scope.row[props]"
+                @change="handleModify"
+                autosize
+                type="textarea"
+              />
+            </div>
+            <div v-else>{{ scope.row[props] }}</div>
+          </template>
         </el-table-column>
-        <el-table-column
-            v-if="handleRow.length"
-            label="操作"
-            :width="handleRow.length * 50"
+      </template>
+    </el-table-column>
+    <el-table-column
+      v-if="handleRow.length"
+      label="操作"
+      :width="handleRow.length * 50"
+    >
+      <template slot-scope="scope">
+        <span
+          v-for="({ label, props, popconfirm, visible }, index) in handleRow"
+          :key="index"
+          class="padding-right-5"
         >
-            <template slot-scope="scope">
-                <span
-                    v-for="(
-                        { label, props, popconfirm, visible }, index
-                    ) in handleRow"
-                    :key="index"
-                    class="padding-right-5"
-                >
-                    <span v-if="handleFormat(visible, scope.row)">
-                        <el-popconfirm
-                            v-if="popconfirm"
-                            :title="`确定要${label}吗？`"
-                            @confirm="handleClick(props,scope.row)"
-                            @cancel="handleCancel"
-                        >
-                            <el-button
-                                slot="reference"
-                                type="text"
-                                size="small"
-                                >{{ label }}</el-button
-                            >
-                        </el-popconfirm>
-                        <el-button
-                            v-else
-                            @click="handleClick(props, scope.row)"
-                            type="text"
-                            size="small"
-                            >{{ label }}</el-button
-                        >
-                    </span>
-                </span>
-            </template>
-        </el-table-column>
-    </el-table>
+          <span v-if="handleFormat(visible, scope.row)">
+            <el-popconfirm
+              v-if="popconfirm"
+              :title="`确定要${label}吗？`"
+              @onConfirm="handleClick(props, scope.row)"
+              @cancel="handleCancel"
+            >
+              <el-button slot="reference" type="text" size="small">{{
+                label
+              }}</el-button>
+            </el-popconfirm>
+            <el-button
+              v-else
+              @click="handleClick(props, scope.row)"
+              type="text"
+              size="small"
+              >{{ label }}</el-button
+            >
+          </span>
+        </span>
+      </template>
+    </el-table-column>
+  </el-table>
 </template>
 <script>
 export default {
-    props: {
-        list: {
-            type: Array,
-            default: () => [],
-        },
-        config: {
-            type: Array,
-            default: () => [],
-        },
-        loading: {
-            type: Boolean,
-            default: false,
-        },
-        handleRow: {
-            type: Array,
-            default: () => [],
-        },
+  props: {
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    config: {
+      type: Array,
+      default: () => [],
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    handleRow: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    computed_list() {
+      return this.list.map((element) => ({
+        ...element,
+      }));
+    },
+  },
+  methods: {
+    handleFormat(params, data) {
+      let visible = true;
+      if (params) {
+        visible = false;
+        Object.keys(params).forEach((element) => {
+          if (params[element].includes(data[element])) {
+            visible = true;
+          }
+        });
+      }
+      return visible;
+    },
+    handleClick(props, row) {
+      console.log("aaaaaaaaa");
+      this.$emit(props, row);
     },
-    computed: {
-        computed_list() {
-            return this.list.map((element) => ({
-                ...element,
-            }));
-        },
+    handleCancel() {
+      console.log("我被关闭了");
     },
-    methods: {
-        handleFormat(params, data) {
-            let visible = true;
-            if (params) {
-                visible = false;
-                Object.keys(params).forEach((element) => {
-                    if (params[element].includes(data[element])) {
-                        visible = true;
-                    }
-                });
-            }
-            return visible;
-        },
-        handleClick(props, row) {
-            console.log('aaaaaaaaa')
-            this.$emit(props, row);
-        },
-        handleCancel(){
-            console.log('我被关闭了')
-        },
-        handleModify() {
-            this.$emit("modify", this.computed_list);
-        },
+    handleModify() {
+      this.$emit("modify", this.computed_list);
     },
+  },
 };
 </script>

src/pages/main/performance/department.vue

@@ -14,6 +14,7 @@
         :handle-row="table_handle_row"
         @check="handleCheck"
         @edit="handleEdit"
+        @delete="handleDelete"
       ></simple-table>
       <simple-pagination
         :page="page"
@@ -315,7 +316,7 @@ export default {
       //   列表数据
       table_list: [],
       table_loading: false,
-      //   表格里的操作按钮
+      //   表格里的操作按钮delete
       table_handle_row: [
         {
           label: "查看",
@@ -328,10 +329,22 @@ export default {
             status: ["0", "1", "2"],
           },
         },
+        {
+          label: "撤回",
+          props: "delete",
+          popconfirm: true,
+          visible: {
+            status: ["0"],
+          },
+        },
       ],
       //  表头配置
       table_config: [
         {
+          label: "序号",
+          type:'number'
+        },
+        {
           label: "模板名称",
           props: "templateName",
         },
@@ -353,6 +366,10 @@ export default {
           props: "loginNameStr",
         },
         {
+          label: "接受人",
+          props: "receiverName",
+        },
+        {
           label: "状态",
           props: "status",
           type: "dictionary",
@@ -389,7 +406,7 @@ export default {
   methods: {
     //   初始化
     handleInit(data) {
-      this.table_loading = true
+      this.table_loading = true;
       this.$http({
         url: "/market/CMKIssued/CMKIssuedListByUser",
         method: "post",
@@ -398,47 +415,9 @@ export default {
         },
         data: data,
       }).then(({ data: { count, data } }) => {
-        this.table_loading = false
+        this.table_loading = false;
         this.total = count;
         this.table_list = data || [];
-        // this.table_list = [
-        //   {
-        //     id: 10,
-        //     templateName: "模板名称",
-        //     loginNameStr: "发起人",
-        //     status: "0",
-        //     reason: "填报事由",
-        //     precautions: "填报注意事项",
-        //     endTime: new Date(),
-        //   },
-        //   {
-        //     id: 11,
-        //     templateName: "模板名称",
-        //     loginNameStr: "发起人",
-        //     status: "1",
-        //     reason: "填报事由",
-        //     precautions: "填报注意事项",
-        //     endTime: new Date(),
-        //   },
-        //   {
-        //     id: 12,
-        //     templateName: "模板名称",
-        //     loginNameStr: "发起人",
-        //     status: "2",
-        //     reason: "填报事由",
-        //     precautions: "填报注意事项",
-        //     endTime: new Date(),
-        //   },
-        //   {
-        //     id: 13,
-        //     templateName: "模板名称",
-        //     loginNameStr: "发起人",
-        //     status: "3",
-        //     reason: "填报事由",
-        //     precautions: "填报注意事项",
-        //     endTime: new Date(),
-        //   },
-        // ];
       });
     },
     handleChange(page) {
@@ -499,7 +478,27 @@ export default {
       this.edit_visible = false;
       this.edit_form = row;
     },
-    handleDelete() {},
+    // 原下发管理的撤回
+    handleDelete({ id }) {
+      console.log(id, "id");
+      this.$http({
+        url: "/market/CMKIssued/CMKDelIssuedById",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        data: {
+          id,
+        },
+      }).then(() => {
+        this.$message.success("撤回成功");
+        this.handleInit({
+          ...this.table_search,
+          page: this.page,
+          pageSize: this.rows,
+        });
+      });
+    },
     // dialog事件
     //权限管理事件
     handleApprove() {

src/pages/main/performance/index.vue

@@ -47,10 +47,10 @@ export default {
                     label: "模板管理",
                     name: "mould",
                 },
-                {
-                    label: "下发管理",
-                    name: "issue",
-                },
+                // {
+                //     label: "下发管理",
+                //     name: "issue",
+                // },
                 {
                     label: "回复统计",
                     name: "reply",

src/pages/main/performance/mould.vue

@@ -1,94 +1,94 @@
 <template>
-    <div>
-        <div class="simple-container">
-            <simple-form
-                :form="table_form"
-                :handle="table_handle"
-                @search="handleSearch"
-                @add="handleVisible('add')"
-            ></simple-form>
-            <simple-table
-                :list="table_list"
-                :config="table_config"
-                :loading="table_loading"
-                :handle-row="table_handle_row"
-                @issue="(params) => handleVisible('issue', params)"
-                @detail="(params) => handleVisible('template', params)"
-                @delete="handleDelete"
-            ></simple-table>
-            <simple-pagination
-                :page="page"
-                :total="total"
-                @change="handleChange"
-            ></simple-pagination>
-        </div>
-        <simple-dialog
-            title="下发"
-            width="500px"
-            @cancel="handleVisible('issue')"
-            @confirm="handleIssue"
-            :visible="issue_visible"
+  <div>
+    <div class="simple-container">
+      <simple-form
+        :form="table_form"
+        :handle="table_handle"
+        @search="handleSearch"
+        @add="handleVisible('add')"
+      ></simple-form>
+      <simple-table
+        :list="table_list"
+        :config="table_config"
+        :loading="table_loading"
+        :handle-row="table_handle_row"
+        @issue="(params) => handleVisible('issue', params)"
+        @detail="(params) => handleVisible('template', params)"
+        @delete="handleDelete"
+      ></simple-table>
+      <simple-pagination
+        :page="page"
+        :total="total"
+        @change="handleChange"
+      ></simple-pagination>
+    </div>
+    <simple-dialog
+      title="下发"
+      width="500px"
+      @cancel="handleVisible('issue')"
+      @confirm="handleIssue"
+      :visible="issue_visible"
+    >
+      <el-form label-width="120px" :model="issue_form" ref="issue_ref">
+        <el-form-item
+          label="填报事由"
+          prop="reason"
+          :rules="{
+            required: true,
+            message: '填报事由不能为空',
+            trigger: 'blur',
+          }"
         >
-            <el-form label-width="120px" :model="issue_form" ref="issue_ref">
-                <el-form-item
-                    label="填报事由"
-                    prop="reason"
-                    :rules="{
-                        required: true,
-                        message: '填报事由不能为空',
-                        trigger: 'blur',
-                    }"
-                >
-                    <el-input v-model="issue_form.reason"></el-input>
-                </el-form-item>
-                <el-form-item
-                    label="填报注意事项"
-                    prop="precautions"
-                    :rules="{
-                        required: true,
-                        message: '填报注意事项不能为空',
-                        trigger: 'blur',
-                    }"
-                >
-                    <el-input v-model="issue_form.precautions"></el-input>
-                </el-form-item>
-                <el-form-item
-                    label="截止时间"
-                    prop="endTime"
-                    :rules="{
-                        required: true,
-                        message: '截止时间不能为空',
-                        trigger: 'change',
-                    }"
-                >
-                    <el-date-picker v-model="issue_form.endTime" type="date">
-                    </el-date-picker>
-                </el-form-item>
-            </el-form>
-        </simple-dialog>
-        <simple-dialog
-            fullscreen
-            title="新增模板"
-            :visible="add_visible"
-            width="1200px"
-            @confirm="handleVisible('add')"
-            @cancel="handleVisible('add')"
+          <el-input v-model="issue_form.reason"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="填报注意事项"
+          prop="precautions"
+          :rules="{
+            required: true,
+            message: '填报注意事项不能为空',
+            trigger: 'blur',
+          }"
         >
-            <el-form inline :model="form" label-width="100px"> </el-form>
-            <simple-sheet v-if="add_visible" @save="handleSave" type="edit" />
-            <template v-slot:footer><div></div></template>
-        </simple-dialog>
-        <simple-dialog
-            title="查看模板"
-            fullscreen
-            @cancel="handleVisible('template')"
-            @confirm="handleVisible('template')"
-            :visible="template_visible"
+          <el-input v-model="issue_form.precautions"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="截止时间"
+          prop="endTime"
+          :rules="{
+            required: true,
+            message: '截止时间不能为空',
+            trigger: 'change',
+          }"
         >
-            <simple-sheet v-if="template_visible" :id="template_id" />
-            <template v-slot:footer><div></div></template>
-        </simple-dialog>
-    </div>
+          <el-date-picker v-model="issue_form.endTime" type="date">
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+    </simple-dialog>
+    <simple-dialog
+      fullscreen
+      title="新增模板"
+      :visible="add_visible"
+      width="1200px"
+      @confirm="handleVisible('add')"
+      @cancel="handleVisible('add')"
+    >
+      <el-form inline :model="form" label-width="100px"> </el-form>
+      <simple-sheet v-if="add_visible" @save="handleSave" type="edit" />
+      <template v-slot:footer><div></div></template>
+    </simple-dialog>
+    <simple-dialog
+      title="查看模板"
+      fullscreen
+      @cancel="handleVisible('template')"
+      @confirm="handleVisible('template')"
+      :visible="template_visible"
+    >
+      <simple-sheet v-if="template_visible" :id="template_id" />
+      <template v-slot:footer><div></div></template>
+    </simple-dialog>
+  </div>
 </template>
 
 <script>
@@ -98,180 +98,182 @@ import simpleTable from "./components/table.vue";
 import simpleDialog from "./components/dialog.vue";
 import simplePagination from "./components/pagination.vue";
 export default {
-    components: {
-        simpleTable,
-        simpleDialog,
-        simpleForm,
-        simpleSheet,
-        simplePagination,
-    },
-    data() {
-        return {
-            page: 1,
-            rows: 10,
-            total: 0,
-            form: {},
-            add_visible: false,
-            // template
-            template_visible: false,
-            template_id: null,
-            // issue
-            issue_visible: false,
-            issue_form: {},
-            issue_id: null,
-            // table
-            table_loading: false,
-            table_search: {},
-            table_form: [
-                {
-                    label: "模板名称",
-                    props: "templateName",
-                    type: "input",
-                },
-            ],
-            table_list: [],
-            table_handle: [
-                {
-                    label: "新增模板",
-                    props: "add",
-                },
-            ],
-            table_handle_row: [
-                {
-                    label: "下发",
-                    props: "issue",
-                },
-                {
-                    label: "查看",
-                    props: "detail",
-                },
-                {
-                    label: "删除",
-                    props: "delete",
-                    popconfirm: true,
-                },
-            ],
-            table_config: [
-                {
-                    label: "模板名称",
-                    props: "templateName",
-                },
-                {
-                    label: "配置时间",
-                    props: "updateTime",
-                },
-                {
-                    label: "配置人员",
-                    props: "createId",
-                },
-                {
-                    label: "模板状态",
-                    props: "status",
-                    type: "dictionary",
-                    dictionary: {
-                        0: "在用",
-                        1: "停用",
-                    },
-                },
-            ],
-        };
-    },
-    methods: {
-        async handleInit() {
-            this.table_loading = true;
-            this.$http({
-                url: "/market/CMKFileTemplate/CMKFileTemplateList",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                data: {
-                    page: this.page,
-                    pageSize: this.rows,
-                    templateName: this.table_search.templateName,
-                },
-            }).then(({ data: { count, data } }) => {
-                this.total = count;
-                this.table_list = data;
-                this.table_loading = false;
-            });
+  components: {
+    simpleTable,
+    simpleDialog,
+    simpleForm,
+    simpleSheet,
+    simplePagination,
+  },
+  data() {
+    return {
+      page: 1,
+      rows: 10,
+      total: 0,
+      form: {},
+      add_visible: false,
+      // template
+      template_visible: false,
+      template_id: null,
+      // issue
+      issue_visible: false,
+      issue_form: {},
+      issue_id: null,
+      // table
+      table_loading: false,
+      table_search: {},
+      table_form: [
+        {
+          label: "模板名称",
+          props: "templateName",
+          type: "input",
         },
-        handleSearch({ templateName }) {
-            this.table_search = { templateName };
-            this.handleReset();
-            this.handleInit();
+      ],
+      table_list: [],
+      table_handle: [
+        {
+          label: "新增模板",
+          props: "add",
         },
-        handleAdd() {},
-        handleChange(page) {
-            this.page = page;
-            this.handleInit();
+      ],
+      table_handle_row: [
+        {
+          label: "下发",
+          props: "issue",
         },
-        handleVisible(props, params) {
-            switch (props) {
-                case "add":
-                    this.add_visible = !this.add_visible;
-                    break;
-                case "template":
-                    this.template_visible = !this.template_visible;
-                    this.template_id = params?.id;
-                    break;
-                case "issue":
-                    this.issue_visible = !this.issue_visible;
-                    this.issue_id = params ? params.id : null;
-                    break;
-            }
+        {
+          label: "查看",
+          props: "detail",
         },
-        handleReset() {
-            this.page = 1;
+        {
+          label: "删除",
+          props: "delete",
+          popconfirm: true,
         },
-        handleDelete({ id }) {
-            this.$http({
-                url: "/market/CMKFileTemplate/delCMKFileTemplateById",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                data: {
-                    templateId: id,
-                },
-            }).then(() => {
-                this.$message.success("删除成功");
-                this.handleInit();
-            });
+      ],
+      table_config: [
+        {
+          label: "序号",
+          type: "number",
         },
-        handleIssue() {
-            this.$refs["issue_ref"].validate((valid) => {
-                if (valid) {
-                    this.$http({
-                        url: "/market/CMKFileTemplate/issuedCMKFileTemplateById",
-                        method: "post",
-                        headers: {
-                            "Content-Type": "application/json",
-                        },
-                        data: {
-                            ...this.issue_form,
-                            endTime: this.$formatDate(
-                                this.issue_form.endTime,
-                                "YYYY-MM-DD"
-                            ),
-                            templateId: this.issue_id,
-                        },
-                    }).then(() => {
-                        this.handleVisible("issue");
-                        this.$message.success("下发成功");
-                        this.handleInit();
-                    });
-                }
-            });
+        {
+          label: "模板名称",
+          props: "templateName",
         },
-        handleSave() {
-            this.handleVisible("add");
-            this.handleInit();
+        {
+          label: "配置时间",
+          props: "updateTime",
+        },
+        {
+          label: "配置人员",
+          props: "createId",
+        },
+        {
+          label: "模板状态",
+          props: "status",
+          type: "dictionary",
+          dictionary: {
+            0: "在用",
+            1: "停用",
+          },
+        },
+      ],
+    };
+  },
+  methods: {
+    async handleInit() {
+      this.table_loading = true;
+      this.$http({
+        url: "/market/CMKFileTemplate/CMKFileTemplateList",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json",
         },
+        data: {
+          page: this.page,
+          pageSize: this.rows,
+          templateName: this.table_search.templateName,
+        },
+      }).then(({ data: { count, data } }) => {
+        this.total = count;
+        this.table_list = data;
+        this.table_loading = false;
+      });
+    },
+    handleSearch({ templateName }) {
+      this.table_search = { templateName };
+      this.handleReset();
+      this.handleInit();
+    },
+    handleAdd() {},
+    handleChange(page) {
+      this.page = page;
+      this.handleInit();
+    },
+    handleVisible(props, params) {
+      switch (props) {
+        case "add":
+          this.add_visible = !this.add_visible;
+          break;
+        case "template":
+          this.template_visible = !this.template_visible;
+          // this.template_id = params?.id;
+          this.template_id = params ? params.id : null;
+          break;
+        case "issue":
+          this.issue_visible = !this.issue_visible;
+          this.issue_id = params ? params.id : null;
+          break;
+      }
+    },
+    handleReset() {
+      this.page = 1;
     },
-    mounted() {
+    handleDelete({ id }) {
+      this.$http({
+        url: "/market/CMKFileTemplate/delCMKFileTemplateById",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        data: {
+          templateId: id,
+        },
+      }).then(() => {
+        this.$message.success("删除成功");
         this.handleInit();
+      });
+    },
+    handleIssue() {
+      this.$refs["issue_ref"].validate((valid) => {
+        if (valid) {
+          this.$http({
+            url: "/market/CMKFileTemplate/issuedCMKFileTemplateById",
+            method: "post",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            data: {
+              ...this.issue_form,
+              endTime: this.$formatDate(this.issue_form.endTime, "YYYY-MM-DD"),
+              templateId: this.issue_id,
+            },
+          }).then(() => {
+            this.handleVisible("issue");
+            this.$message.success("下发成功");
+            this.handleInit();
+          });
+        }
+      });
+    },
+    handleSave() {
+      this.handleVisible("add");
+      this.handleInit();
     },
+  },
+  mounted() {
+    this.handleInit();
+  },
 };
 </script>