|
|
@@ -0,0 +1,530 @@
|
|
|
+<!--
|
|
|
+ * @Author : yuanrunwei
|
|
|
+ * @Date : 2021-12-04 14:23:58
|
|
|
+ * @LastEditors : yuanrunwei
|
|
|
+ * @LastEditTime : 2021-12-28 20:20: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
|
|
|
+ >
|
|
|
+ <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="700px"
|
|
|
+ @confirm="handleAuth"
|
|
|
+ @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 + 1"
|
|
|
+ :value="index + 1"
|
|
|
+ >
|
|
|
+ </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 + 1"
|
|
|
+ :value="index + 1"
|
|
|
+ >
|
|
|
+ </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>
|
|
|
+ <template v-if="!id" v-slot:footer><div></div></template>
|
|
|
+ </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", // view 查看 edit 编辑
|
|
|
+ },
|
|
|
+ attribute: {
|
|
|
+ type: String,
|
|
|
+ default: "template", // template 模板 order 工单 file 文件
|
|
|
+ },
|
|
|
+ id: {
|
|
|
+ default: null,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 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: "按列",
|
|
|
+ // },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleInit() {
|
|
|
+ if (this.id) {
|
|
|
+ this.handleQuery();
|
|
|
+ } else {
|
|
|
+ this.handleCreate();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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",
|
|
|
+ },
|
|
|
+ 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)
|
|
|
+ : [];
|
|
|
+ }
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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>
|
|
|
+
|
|
|
+<style lang="scss" scope>
|
|
|
+.sheet-container {
|
|
|
+ position: fixed;
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ height: 100%;
|
|
|
+ &-block {
|
|
|
+ overflow: hidden;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 75%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
houlf