修改模块管理

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

@@ -1,5 +1,6 @@
 <template>
   <el-dialog
+    :modal="modal"
     :title="title"
     :visible.sync="visible"
     :fullscreen="fullscreen"
@@ -7,6 +8,7 @@
     :before-close="handleCancel"
     :modal-append-to-body="false"
     :width="width"
+    :destroy-on-close="destroy"
   >
     <!-- 表格主体部分 -->
     <slot></slot>
@@ -45,9 +47,16 @@ export default {
       type: Boolean,
       default: false,
     },
+    modal: {
+      type: Boolean,
+      default: true,
+    },
+    destroy: {
+      type: Boolean,
+      default: false
+    }
   },
   mounted() {
-    console.log("我被初始化了");
   },
   methods: {
     //   确定的回调

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

@@ -2,49 +2,226 @@
  * @Author       : yuanrunwei
  * @Date         : 2021-12-04 14:23:58
  * @LastEditors  : yuanrunwei
- * @LastEditTime : 2021-12-15 19:38:31
+ * @LastEditTime : 2021-12-24 10:05:55
  * @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-upload
-                class="margin-right-10"
-                action
-                :on-change="handleChange"
-                :show-file-list="false"
+            <el-button type="primary" @click="handleVisible"
+                >权限设置</el-button
             >
-                <el-button type="primary">上传</el-button>
-            </el-upload>
-            <el-button type="primary" @click="handleSave">保存</el-button>
             <el-button type="primary" @click="handleDownload">导出</el-button>
-            <el-button type="primary">返回</el-button>
-            <el-button type="primary">全屏显示</el-button>
+            <el-button type="primary" @click="handleFullscreen()"
+                >全屏显示</el-button
+            >
+            <template v-if="type === 'edit'">
+                <el-upload
+                    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()"
+                    >保存</el-button
+                >
+            </template>
         </div>
         <div id="luckysheet" class="sheet-container-block"></div>
+        <simple-dialog
+            title="权限设置"
+            :visible="visible"
+            :modal="false"
+            width="700px"
+            @confirm="handlePower"
+            @cancel="handleVisible"
+        >
+            <el-form ref="form" :model="form" label-width="100px">
+                <el-form-item
+                    label="可编辑列"
+                    prop="array"
+                    :rules="{
+                        required: true,
+                        message: '可编辑列不能为空',
+                        trigger: 'change',
+                    }"
+                    ><el-select
+                        v-model="form.array"
+                        placeholder="可编辑列"
+                        multiple
+                    >
+                        <el-option
+                            v-for="(value, index) in 10"
+                            :key="index"
+                            :label="index"
+                            :value="index"
+                        >
+                        </el-option> </el-select
+                ></el-form-item>
+                <el-form-item
+                    label="权限规则"
+                    prop="type"
+                    :rules="{
+                        required: true,
+                        message: '权限规则不能为空',
+                        trigger: 'change',
+                    }"
+                >
+                    <el-select v-model="form.type">
+                        <el-option
+                            v-for="item in type_options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        ></el-option> </el-select
+                ></el-form-item>
+                <el-form-item
+                    label="负责人"
+                    prop="charge"
+                    :rules="{
+                        required: true,
+                        message: '负责人不能为空',
+                        trigger: 'blur',
+                    }"
+                >
+                    <div
+                        class="flex-justify-start"
+                        v-for="(item, index) in form.charge"
+                        :key="index"
+                    >
+                        <el-select
+                            v-model="item.key"
+                            class="margin-bottom-20 margin-right-10 flex-1"
+                            placeholder="请选择指定列/行"
+                            multiple
+                        >
+                            <el-option
+                                v-for="(value, index) in 10"
+                                :key="index"
+                                :label="index"
+                                :value="index"
+                            >
+                            </el-option>
+                        </el-select>
+                        <el-select
+                            class="margin-bottom-20"
+                            placeholder="请选择负责人"
+                            v-model="item.value"
+                            filterable
+                        >
+                            <el-option
+                                v-for="({ label, value }, index) in charge_list"
+                                :key="index"
+                                :label="label"
+                                :value="value"
+                            ></el-option>
+                        </el-select>
+                    </div>
+
+                    <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-form>
+        </simple-dialog>
     </div>
 </template>
 
 <script>
 import luckyexcel from "luckyexcel";
+import { exportExcel } from "../common/export";
+import simpleDialog from "./dialog.vue";
 export default {
+    components: {
+        simpleDialog,
+    },
+    props: {
+        type: {
+            type: String,
+            default: "view",
+        },
+        id: {
+            type: Number,
+            default: null,
+        },
+    },
     data() {
         return {
-            row_list: [3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-            column_list: [4, 5, 6, 7, 8],
+            form: {
+                charge: [{ value: "" }],
+            },
+            visible: false,
+            row_list: [],
+            column_list: [],
+            charge_list: [],
+            type_options: [
+                {
+                    value: 1,
+                    label: "按行",
+                },
+                {
+                    value: 2,
+                    label: "按列",
+                },
+            ],
         };
     },
     methods: {
         handleInit() {
-            this.handleCreate();
+            if (this.id) {
+                this.handleQuery();
+            } else {
+                this.handleCreate();
+            }
         },
         handleAllow({ row, column }) {
             return (
                 this.row_list.includes(row) && this.column_list.includes(column)
             );
         },
-        async handleCreate({ file, json, type } = {}) {
+        async handleQuery() {
+            const {
+                data: { templateContent, templateName },
+            } = await this.$http({
+                url: "/market/CMKFileTemplate/QueryCMKFileTemplateById",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: {
+                    templateId: this.id,
+                },
+            });
+            this.handleCreate({
+                json: 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;
+                }
+            });
+            return !(Object.keys(object).length && array.length && type);
+        },
+        async handleCreate({ file, json, type, name } = {}) {
             let that = this;
             const options = {
                 container: "luckysheet",
@@ -97,7 +274,13 @@ export default {
                     break;
                 case "json":
                     if (json) {
-                        options.data = [json];
+                        options.data = [
+                            {
+                                ...json,
+                                zoomRatio: 0.75,
+                            },
+                        ];
+                        options.title = name;
                     }
                     break;
             }
@@ -107,16 +290,123 @@ export default {
         async handleChange(response) {
             this.handleCreate({ file: response.raw, type: "file" });
         },
-        handleDownload() {},
-        handleSave() {
+        handleDownload() {
+            exportExcel(
+                window.luckysheet.getAllSheets(),
+                window.luckysheet.getWorkbookName()
+            );
+        },
+        async handleSave() {
             const sheet_name = window.luckysheet.getSheet().name;
             const data = window.luckysheet.getSheet(sheet_name);
-            console.log(JSON.stringify(data.data));
-            this.handleCreate({ json: data, type: "json" });
+            const workbook_name = window.luckysheet.getWorkbookName();
+            const {
+                data: { body },
+            } = await this.$http({
+                url: "/market/CMKFileTemplate/CMKFileTemplateAdd",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: {
+                    templateContent: JSON.stringify(data),
+                    templateName: workbook_name,
+                },
+            });
+            const object = {};
+            const { array, charge, type } = this.form;
+            charge.map(({ key, value }) => {
+                if (key && value) {
+                    object[key] = value;
+                }
+            });
+            await this.$http({
+                url: "/market/CMKFileTemplateAuthority/CMKFileTemplateAuthorityAdd",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: {
+                    allowEditingColumns: array.join(","),
+                    auth: JSON.stringify(object),
+                    templateId: body,
+                    type,
+                },
+            });
+            this.$message.success("保存成功");
+        },
+        handlePower() {
+            this.$refs["form"].validate((valid) => {
+                if (valid) {
+                    if (this.handleForbid()) {
+                        this.$message.error("请选择负责人编辑权限");
+                        return false;
+                    }
+                    this.handleVisible();
+                    this.$message.success("设置成功");
+                }
+            });
+        },
+        handleCharge(type) {
+            switch (type) {
+                case "add":
+                    this.form.charge.push({
+                        value: "",
+                    });
+                    break;
+                case "delete":
+                    this.form.charge.pop();
+                    break;
+            }
+        },
+        handleVisible() {
+            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>

src/pages/main/performance/mould.vue

@@ -13,7 +13,7 @@
                 :loading="table_loading"
                 :handle-row="table_handle_row"
                 @issue="(params) => handleVisible('issue', params)"
-                @detail="handleVisible('template')"
+                @detail="(params) => handleVisible('template', params)"
                 @delete="handleDelete"
             ></simple-table>
             <simple-pagination
@@ -23,28 +23,6 @@
             ></simple-pagination>
         </div>
         <simple-dialog
-            title="查看模板"
-            fullscreen
-            @cancel="handleVisible('template')"
-            @confirm="handleVisible('template')"
-            :visible="template_visible"
-        >
-            <div class="flex-justify-between padding-right-20 padding-left-20">
-                <div>
-                    <el-button type="primary" @click="handleVisible('power')"
-                        >权限设置</el-button
-                    ><el-button type="primary">导出</el-button>
-                </div>
-                <div>
-                    <el-button @click="handleVisible('template')" type="primary"
-                        >返回</el-button
-                    >
-                </div>
-            </div>
-            <analysis />
-            <template v-slot:footer><div></div></template>
-        </simple-dialog>
-        <simple-dialog
             title="下发"
             width="500px"
             @cancel="handleVisible('issue')"
@@ -68,20 +46,28 @@
             fullscreen
             title="新增模板"
             :visible="add_visible"
-            :reload="reload"
             width="1200px"
             @confirm="handleVisible('add')"
             @cancel="handleVisible('add')"
         >
             <el-form inline :model="form" label-width="100px"> </el-form>
-            <simple-sheet />
+            <simple-sheet v-if="add_visible" 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>
-import analysis from "./analysis.vue";
 import simpleForm from "./components/form.vue";
 import simpleSheet from "./components/sheet.vue";
 import simpleTable from "./components/table.vue";
@@ -89,7 +75,6 @@ import simpleDialog from "./components/dialog.vue";
 import simplePagination from "./components/pagination.vue";
 export default {
     components: {
-        analysis,
         simpleTable,
         simpleDialog,
         simpleForm,
@@ -102,9 +87,10 @@ export default {
             rows: 10,
             total: 0,
             form: {},
-            reload: 0,
             add_visible: false,
+            // template
             template_visible: false,
+            template_id: null,
             // issue
             issue_visible: false,
             issue_form: {},
@@ -155,10 +141,6 @@ export default {
                     props: "createId",
                 },
                 {
-                    label: "模板分类",
-                    props: "template_class",
-                },
-                {
                     label: "模板状态",
                     props: "status",
                     type: "dictionary",
@@ -207,6 +189,7 @@ export default {
                     break;
                 case "template":
                     this.template_visible = !this.template_visible;
+                    this.template_id = params?.id;
                     break;
                 case "issue":
                     this.issue_visible = !this.issue_visible;