Sfoglia il codice sorgente

Merge branch 'master' of https://git.agilestar.cn/spfm-group/spfm-market-front

daiqisheng 3 anni fa
parent
commit
dfbfe2a04d
2 ha cambiato i file con 422 aggiunte e 160 eliminazioni
  1. 349 0
      src/pages/main/performance/common/export.js
  2. 73 160
      src/pages/main/performance/mould.vue

+ 349 - 0
src/pages/main/performance/common/export.js

@@ -0,0 +1,349 @@
+// import { createCellPos } from './translateNumToLetter'
+const Excel = require("exceljs");
+import FileSaver from "file-saver";
+export var exportExcel = function (luckysheet, value) {
+    // 参数为luckysheet.getluckysheetfile()获取的对象
+    // 1.创建工作簿,可以为工作簿添加属性
+    const workbook = new Excel.Workbook();
+    // 2.创建表格,第二个参数可以配置创建什么样的工作表
+    if (Object.prototype.toString.call(luckysheet) === "[object Object]") {
+        luckysheet = [luckysheet];
+    }
+    luckysheet.forEach(function (table) {
+        if (table.data.length === 0) return true;
+        // ws.getCell('B2').fill = fills.
+        const worksheet = workbook.addWorksheet(table.name);
+        const merge = (table.config && table.config.merge) || {};
+        const borderInfo = (table.config && table.config.borderInfo) || {};
+        // 3.设置单元格合并,设置单元格边框,设置单元格样式,设置值
+        setStyleAndValue(table.data, worksheet);
+        setMerge(merge, worksheet);
+        setBorder(borderInfo, worksheet);
+        return true;
+    });
+
+    // return
+    // 4.写入 buffer
+    const buffer = workbook.xlsx.writeBuffer().then((data) => {
+        // console.log('data', data)
+        const blob = new Blob([data], {
+            type: "application/vnd.ms-excel;charset=utf-8",
+        });
+        console.log("导出成功!");
+        FileSaver.saveAs(blob, `${value}.xlsx`);
+    });
+    return buffer;
+};
+
+var setMerge = function (luckyMerge = {}, worksheet) {
+    const mergearr = Object.values(luckyMerge);
+    mergearr.forEach(function (elem) {
+        // elem格式:{r: 0, c: 0, rs: 1, cs: 2}
+        // 按开始行,开始列,结束行,结束列合并(相当于 K10:M12)
+        worksheet.mergeCells(
+            elem.r + 1,
+            elem.c + 1,
+            elem.r + elem.rs,
+            elem.c + elem.cs
+        );
+    });
+};
+
+var setBorder = function (luckyBorderInfo, worksheet) {
+    if (!Array.isArray(luckyBorderInfo)) return;
+    // console.log('luckyBorderInfo', luckyBorderInfo)
+    luckyBorderInfo.forEach(function (elem) {
+        // 现在只兼容到borderType 为range的情况
+        // console.log('ele', elem)
+        if (elem.rangeType === "range") {
+            let border = borderConvert(elem.borderType, elem.style, elem.color);
+            let rang = elem.range[0];
+            // console.log('range', rang)
+            let row = rang.row;
+            let column = rang.column;
+            for (let i = row[0] + 1; i < row[1] + 2; i++) {
+                for (let y = column[0] + 1; y < column[1] + 2; y++) {
+                    worksheet.getCell(i, y).border = border;
+                }
+            }
+        }
+        if (elem.rangeType === "cell") {
+            // col_index: 2
+            // row_index: 1
+            // b: {
+            //   color: '#d0d4e3'
+            //   style: 1
+            // }
+            const { col_index, row_index } = elem.value;
+            const borderData = Object.assign({}, elem.value);
+            delete borderData.col_index;
+            delete borderData.row_index;
+            let border = addborderToCell(borderData, row_index, col_index);
+            // console.log('bordre', border, borderData)
+            worksheet.getCell(row_index + 1, col_index + 1).border = border;
+        }
+        // console.log(rang.column_focus + 1, rang.row_focus + 1)
+        // worksheet.getCell(rang.row_focus + 1, rang.column_focus + 1).border = border
+    });
+};
+var setStyleAndValue = function (cellArr, worksheet) {
+    if (!Array.isArray(cellArr)) return;
+    cellArr.forEach(function (row, rowid) {
+        row.every(function (cell, columnid) {
+            if (!cell) return true;
+            let fill = fillConvert(cell.bg);
+
+            let font = fontConvert(
+                cell.ff,
+                cell.fc,
+                cell.bl,
+                cell.it,
+                cell.fs,
+                cell.cl,
+                cell.ul
+            );
+            let alignment = alignmentConvert(
+                cell.vt,
+                cell.ht,
+                cell.tb,
+                cell.tr
+            );
+            let value = "";
+
+            if (cell.f) {
+                value = { formula: cell.f, result: cell.v };
+            } else if (!cell.v && cell.ct && cell.ct.s) {
+                // xls转为xlsx之后,内部存在不同的格式,都会进到富文本里,即值不存在与cell.v,而是存在于cell.ct.s之后
+                // value = cell.ct.s[0].v
+                cell.ct.s.forEach((arr) => {
+                    value += arr.v;
+                });
+            } else {
+                value = cell.v;
+            }
+            //  style 填入到_value中可以实现填充色
+            let letter = createCellPos(columnid);
+            let target = worksheet.getCell(letter + (rowid + 1));
+            // console.log('1233', letter + (rowid + 1))
+            // eslint-disable-next-line no-unused-vars
+            for (const key in fill) {
+                target.fill = fill;
+                break;
+            }
+            target.font = font;
+            target.alignment = alignment;
+            target.value = value;
+
+            return true;
+        });
+    });
+};
+
+var fillConvert = function (bg) {
+    if (!bg) {
+        return {};
+    }
+    // const bgc = bg.replace('#', '')
+    let fill = {
+        type: "pattern",
+        pattern: "solid",
+        fgColor: { argb: bg.replace("#", "") },
+    };
+    return fill;
+};
+
+var fontConvert = function (
+    ff = 0,
+    fc = "#000000",
+    bl = 0,
+    it = 0,
+    fs = 10,
+    cl = 0,
+    ul = 0
+) {
+    // luckysheet:ff(样式), fc(颜色), bl(粗体), it(斜体), fs(大小), cl(删除线), ul(下划线)
+    const luckyToExcel = {
+        0: "微软雅黑",
+        1: "宋体(Song)",
+        2: "黑体(ST Heiti)",
+        3: "楷体(ST Kaiti)",
+        4: "仿宋(ST FangSong)",
+        5: "新宋体(ST Song)",
+        6: "华文新魏",
+        7: "华文行楷",
+        8: "华文隶书",
+        9: "Arial",
+        10: "Times New Roman ",
+        11: "Tahoma ",
+        12: "Verdana",
+        num2bl: function (num) {
+            return num === 0 ? false : true;
+        },
+    };
+    // 出现Bug,导入的时候ff为luckyToExcel的val
+
+    let font = {
+        name: typeof ff === "number" ? luckyToExcel[ff] : ff,
+        family: 1,
+        size: fs,
+        color: { argb: fc.replace("#", "") },
+        bold: luckyToExcel.num2bl(bl),
+        italic: luckyToExcel.num2bl(it),
+        underline: luckyToExcel.num2bl(ul),
+        strike: luckyToExcel.num2bl(cl),
+    };
+
+    return font;
+};
+
+var alignmentConvert = function (
+    vt = "default",
+    ht = "default",
+    tb = "default",
+    tr = "default"
+) {
+    // luckysheet:vt(垂直), ht(水平), tb(换行), tr(旋转)
+    const luckyToExcel = {
+        vertical: {
+            0: "middle",
+            1: "top",
+            2: "bottom",
+            default: "top",
+        },
+        horizontal: {
+            0: "center",
+            1: "left",
+            2: "right",
+            default: "left",
+        },
+        wrapText: {
+            0: false,
+            1: false,
+            2: true,
+            default: false,
+        },
+        textRotation: {
+            0: 0,
+            1: 45,
+            2: -45,
+            3: "vertical",
+            4: 90,
+            5: -90,
+            default: 0,
+        },
+    };
+
+    let alignment = {
+        vertical: luckyToExcel.vertical[vt],
+        horizontal: luckyToExcel.horizontal[ht],
+        wrapText: luckyToExcel.wrapText[tb],
+        textRotation: luckyToExcel.textRotation[tr],
+    };
+    return alignment;
+};
+
+var borderConvert = function (borderType, style = 1, color = "#000") {
+    // 对应luckysheet的config中borderinfo的的参数
+    if (!borderType) {
+        return {};
+    }
+    const luckyToExcel = {
+        type: {
+            "border-all": "all",
+            "border-top": "top",
+            "border-right": "right",
+            "border-bottom": "bottom",
+            "border-left": "left",
+        },
+        style: {
+            0: "none",
+            1: "thin",
+            2: "hair",
+            3: "dotted",
+            4: "dashDot", // 'Dashed',
+            5: "dashDot",
+            6: "dashDotDot",
+            7: "double",
+            8: "medium",
+            9: "mediumDashed",
+            10: "mediumDashDot",
+            11: "mediumDashDotDot",
+            12: "slantDashDot",
+            13: "thick",
+        },
+    };
+    let template = {
+        style: luckyToExcel.style[style],
+        color: { argb: color.replace("#", "") },
+    };
+    let border = {};
+    if (luckyToExcel.type[borderType] === "all") {
+        border["top"] = template;
+        border["right"] = template;
+        border["bottom"] = template;
+        border["left"] = template;
+    } else {
+        border[luckyToExcel.type[borderType]] = template;
+    }
+    // console.log('border', border)
+    return border;
+};
+
+function addborderToCell(borders) {
+    let border = {};
+    const luckyExcel = {
+        type: {
+            l: "left",
+            r: "right",
+            b: "bottom",
+            t: "top",
+        },
+        style: {
+            0: "none",
+            1: "thin",
+            2: "hair",
+            3: "dotted",
+            4: "dashDot", // 'Dashed',
+            5: "dashDot",
+            6: "dashDotDot",
+            7: "double",
+            8: "medium",
+            9: "mediumDashed",
+            10: "mediumDashDot",
+            11: "mediumDashDotDot",
+            12: "slantDashDot",
+            13: "thick",
+        },
+    };
+    // console.log('borders', borders)
+    for (const bor in borders) {
+        // console.log(bor)
+        if (borders[bor].color.indexOf("rgb") === -1) {
+            border[luckyExcel.type[bor]] = {
+                style: luckyExcel.style[borders[bor].style],
+                color: { argb: borders[bor].color.replace("#", "") },
+            };
+        } else {
+            border[luckyExcel.type[bor]] = {
+                style: luckyExcel.style[borders[bor].style],
+                color: { argb: borders[bor].color },
+            };
+        }
+    }
+
+    return border;
+}
+
+function createCellPos(n) {
+    let ordA = "A".charCodeAt(0);
+
+    let ordZ = "Z".charCodeAt(0);
+    let len = ordZ - ordA + 1;
+    let s = "";
+    while (n >= 0) {
+        s = String.fromCharCode((n % len) + ordA) + s;
+
+        n = Math.floor(n / len) - 1;
+    }
+    return s;
+}

+ 73 - 160
src/pages/main/performance/mould.vue

@@ -12,7 +12,7 @@
                 :config="table_config"
                 :loading="table_loading"
                 :handle-row="table_handle_row"
-                @issue="handleVisible('issue')"
+                @issue="(params) => handleVisible('issue', params)"
                 @detail="handleVisible('template')"
                 @delete="handleDelete"
             ></simple-table>
@@ -51,27 +51,17 @@
             @confirm="handleIssue"
             :visible="issue_visible"
         >
-            <el-form label-width="100px" :model="form">
+            <el-form label-width="100px" :model="issue_form">
                 <el-form-item label="填报事由">
-                    <el-input v-model="form.reason"></el-input>
+                    <el-input v-model="issue_form.reason"></el-input>
                 </el-form-item>
                 <el-form-item label="填报注意事项">
-                    <el-input v-model="form.note"></el-input>
+                    <el-input v-model="issue_form.precautions"></el-input>
                 </el-form-item>
                 <el-form-item label="截止时间">
-                    <el-date-picker v-model="form.date" type="date">
+                    <el-date-picker v-model="issue_form.endTime" type="date">
                     </el-date-picker>
                 </el-form-item>
-                <el-form-item label="">
-                    <el-upload
-                        drag
-                        action="https://jsonplaceholder.typicode.com/posts/"
-                        multiple
-                    >
-                        <i class="el-icon-upload"></i>
-                        <div>上传附件</div>
-                    </el-upload>
-                </el-form-item>
             </el-form>
         </simple-dialog>
         <simple-dialog
@@ -83,64 +73,10 @@
             @confirm="handleVisible('add')"
             @cancel="handleVisible('add')"
         >
-            <el-form inline :model="form" label-width="100px">
-                <el-form-item label="绩效类型">
-                    <el-select v-model="form.type">
-                        <el-option label="部门绩效" value="部门绩效"></el-option
-                        ><el-option
-                            label="员工绩效"
-                            value="员工绩效"
-                        ></el-option> </el-select
-                ></el-form-item>
-                <el-form-item label="绩效分类">
-                    <el-select v-model="form.class">
-                        <el-option label="GS" value="GS"></el-option
-                        ><el-option
-                            label="KPI"
-                            value="KPI"
-                        ></el-option> </el-select
-                ></el-form-item>
-                <el-form-item label="">
-                    <el-button type="primary" @click="handleVisible('power')"
-                        >权限设置</el-button
-                    >
-                </el-form-item>
-            </el-form>
+            <el-form inline :model="form" label-width="100px"> </el-form>
             <simple-sheet />
             <template v-slot:footer><div></div></template>
         </simple-dialog>
-        <simple-dialog
-            title="权限设置"
-            :visible="power_visible"
-            :reload="reload"
-            width="700px"
-            @confirm="handleVisible('power')"
-            @cancel="handleVisible('power')"
-        >
-            <el-form :model="form" label-width="100px">
-                <el-form-item label="可编辑列"
-                    ><el-input v-model="form.editrows"
-                /></el-form-item>
-                <el-form-item label="权限规则">
-                    <el-select v-model="form.rule">
-                        <el-option
-                            v-for="item in ruleoptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        ></el-option> </el-select
-                ></el-form-item>
-                <el-form-item label="负责人">
-                    <div>
-                        <el-cascader-panel
-                            v-model="form.charge"
-                            :options="charge_options"
-                            clearable
-                            @change="handleCascader"
-                        ></el-cascader-panel></div
-                ></el-form-item>
-            </el-form>
-        </simple-dialog>
     </div>
 </template>
 
@@ -167,47 +103,19 @@ export default {
             total: 0,
             form: {},
             reload: 0,
-            ruleoptions: [
-                {
-                    value: "按行号",
-                    label: "按行号",
-                },
-                {
-                    value: "按科室分配",
-                    label: "按科室分配",
-                },
-                {
-                    value: "按负责人分配",
-                    label: "按负责人分配",
-                },
-                {
-                    value: "所有人员",
-                    label: "",
-                },
-            ],
-            charge_options: [
-                {
-                    label: "科室名称1",
-                    value: "科室名称1",
-                    children: [
-                        {
-                            label: "负责人",
-                            value: "负责人",
-                            children: [{ label: "尹强", value: "尹强" }],
-                        },
-                    ],
-                },
-            ],
             add_visible: false,
-            power_visible: false,
             template_visible: false,
+            // issue
             issue_visible: false,
+            issue_form: {},
+            issue_id: null,
+            // table
             table_loading: false,
             table_search: {},
             table_form: [
                 {
                     label: "模板名称",
-                    props: "template_name",
+                    props: "templateName",
                     type: "input",
                 },
             ],
@@ -236,15 +144,15 @@ export default {
             table_config: [
                 {
                     label: "模板名称",
-                    props: "template_name",
+                    props: "templateName",
                 },
                 {
                     label: "配置时间",
-                    props: "template_date",
+                    props: "updateTime",
                 },
                 {
-                    label: "配置工号",
-                    props: "template_number",
+                    label: "配置人员",
+                    props: "createId",
                 },
                 {
                     label: "模板分类",
@@ -252,11 +160,12 @@ export default {
                 },
                 {
                     label: "模板状态",
-                    props: "template_status",
-                },
-                {
-                    label: "模板类型",
-                    props: "template_type",
+                    props: "status",
+                    type: "dictionary",
+                    dictionary: {
+                        0: "在用",
+                        1: "停用",
+                    },
                 },
             ],
         };
@@ -264,82 +173,86 @@ export default {
     methods: {
         async handleInit() {
             this.table_loading = true;
-            const data = [];
-            let index = 0;
-            while (index < 1) {
-                data.push(...JSON.parse(sessionStorage.global_data));
-                index = index + 1;
-            }
-            this.total = index;
-            this.table_list = data;
-            this.table_loading = false;
+            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({ template_name }) {
-            this.table_search = { template_name };
+        handleSearch({ templateName }) {
+            this.table_search = { templateName };
             this.handleReset();
             this.handleInit();
         },
         handleAdd() {},
-        // 级联选择
-        handleCascader(data) {
-            console.log(data, "data");
-        },
-        handlePower() {},
         handleChange(page) {
             this.page = page;
             this.handleInit();
         },
-        handleVisible(props) {
+        handleVisible(props, params) {
             switch (props) {
                 case "add":
                     this.add_visible = !this.add_visible;
                     break;
-                case "power":
-                    this.power_visible = !this.power_visible;
-                    break;
                 case "template":
                     this.template_visible = !this.template_visible;
                     break;
                 case "issue":
                     this.issue_visible = !this.issue_visible;
+                    this.issue_id = params?.id;
                     break;
             }
         },
         handleReset() {
             this.page = 1;
         },
-        handleDelete() {
-            sessionStorage.setItem("global_data", JSON.stringify([]));
-            sessionStorage.setItem("global_process", JSON.stringify([]));
-            this.$message.success("删除成功");
-            this.handleInit();
+        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() {
-            const array = [
-                {
-                    ...JSON.parse(sessionStorage.global_data)[0],
-                    department_status: "待处理",
-                    issue_status: 1,
-                    performance_type: "GS",
-                    reason: this.form.reason,
-                    note: this.form.note,
-                    date: this.form.date,
-                    receiver: `刘洁,李方岩,吴磊,孙震,赵洪松,孙川,韦琳娜`,
+            this.$http({
+                url: "/market/CMKFileTemplate/issuedCMKFileTemplateById",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
                 },
-            ];
-            sessionStorage.setItem("global_data", JSON.stringify(array));
-            const process_array = JSON.parse(sessionStorage.global_process);
-            process_array.push({
-                link: "发起工单",
-                creatperson: `ADMIN ${this.$formatDate(new Date(), "YYYY-MM-DD")}`,
-                explain: "",
+                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();
             });
-            sessionStorage.setItem(
-                "global_process",
-                JSON.stringify(process_array)
-            );
-            this.$message.success("下发成功");
-            this.handleVisible("issue");
         },
     },
     mounted() {