sasp-flow-render 1.0.1

package/src/components/messageMould/messageMould.vue

@@ -0,0 +1,547 @@
+<template>
+    <el-container style="height: 100%">
+        <el-header style="height: auto">
+            <div class="search-form-parent el-card" style="padding-left:10px;padding-right:10px">
+                <el-form size="small" :inline="true"
+                         @keyup.enter.native="crud.doSearch()" onSubmit="return false;">
+                    <el-form-item label="模板名称" label-width="80px">
+                        <el-input placeholder="请输入" v-model="crud.searchForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="模板类型" label-width="80px">
+                        <el-select placeholder="请选择" v-model="crud.searchForm.type" clearable>
+                            <el-option
+                                    v-for="item in typeArr"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="模板状态" label-width="80px">
+                        <el-select placeholder="请选择" v-model="crud.searchForm.useMould" clearable>
+                            <el-option
+                                    v-for="item in useMouldArr"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="small" style="margin-top: 5px" @click="doSearch()">查询</el-button>
+                    <el-button icon="el-icon-close" size="small" style="margin-top: 5px" @click="resetSearch()">清空</el-button>
+                </el-form>
+            </div>
+        </el-header>
+        <el-main id="tableMain" style="height: 100%">
+            <el-container style="height:100%" class="table-list-container">
+                <el-header style="height: auto;" size="small">
+                    <el-button type="primary" round size="small" icon="el-icon-circle-plus" @click="addRecord()"> 新增</el-button>
+                    <el-button type="danger" round size="small" icon="el-icon-delete"  @click="remove()">删除</el-button>
+                    <span style="font-size:16px;color: red;margin-left: 5px">
+                        {{'常用系统字段(点击按钮直接插入到模板中)：'}}
+                    </span>
+                    <el-tooltip content="${loginUser*}">
+                        <el-button type="primary" @click="appendContent('${loginUser*}')">登录人名称</el-button>
+                    </el-tooltip>
+                    <el-tooltip content="${flowName*}">
+                        <el-button type="primary" @click="appendContent('${flowName*}')">流程名称</el-button>
+                    </el-tooltip>
+                    <el-tooltip content="${count*}">
+                        <el-button type="primary" @click="appendContent('${count*}')">数据条目</el-button>
+                    </el-tooltip>
+                </el-header>
+                <el-main style="height:100%">
+                    <el-table v-if="tableShow" :data="dataList" :ref="crud.tableRef" stripe border height="100%" style="width: 100%;"
+                              header-row-class-name="list-default-row">
+                        <el-table-column type="selection" width="40" align="center"></el-table-column>
+                        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
+                        <el-table-column label="模板名称" prop="name" width="150">
+                            <template slot-scope="scope">
+                                <span v-if="isRowNotEdit(scope.row,scope.$index)">{{scope.row.name}}</span>
+                                <el-input v-if="isRowEdit(scope.row,scope.$index)" @blur="changeContent(scope.row,scope.$index)" v-model="scope.row.name"></el-input>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="模板类型" prop="type" width="100">
+                            <template slot-scope="scope">
+                                <span v-if="isRowNotEdit(scope.row,scope.$index)">{{formartType(scope.row.type)}}</span>
+                                <el-select placeholder="请选择" v-model="scope.row.type" v-if="isRowEdit(scope.row,scope.$index)">
+                                    <el-option
+                                            v-for="item in typeArr"
+                                            :key="item.value"
+                                            :label="item.label"
+                                            :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="提醒方式" prop="remindType" width="250">
+                            <template slot-scope="scope">
+                                <span v-if="isRowNotEdit(scope.row,scope.$index)">{{formartRemind(scope.row.remindType)}}</span>
+                                <el-select placeholder="请选择" v-model="scope.row.remindTypeArr" v-if="isRowEdit(scope.row,scope.$index)" multiple>
+                                    <el-option
+                                            v-for="item in remindTypeArr"
+                                            :key="item.value"
+                                            :label="item.label"
+                                            :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="模板内容" prop="content">
+                            <template slot-scope="scope">
+                                <span v-if="isRowNotEdit(scope.row,scope.$index)">{{scope.row.content}}</span>
+                                <el-input v-if="isRowEdit(scope.row,scope.$index)" :ref="'content' + scope.$index" @blur="changeContent(scope.row,scope.$index)" v-model="scope.row.content"></el-input>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="模板示例" prop="example">
+                            <template slot-scope="scope">
+                                <span v-if="isRowNotEdit(scope.row,scope.$index)">{{scope.row.example}}</span>
+                                <el-input v-if="isRowEdit(scope.row,scope.$index)" v-model="scope.row.example"></el-input>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="默认模板"  width="90" prop="defaultMould" align="center">
+                            <template slot-scope="scope">
+                                <el-tag v-if="isRowNotEdit(scope.row,scope.$index)" :type="scope.row.defaultMould=='1'?'success':'info'">{{scope.row.defaultMould=="1"?"是":"否"}}</el-tag>
+                                <el-checkbox v-model="scope.row.defaultMould" true-label="1" false-label="0"  v-if="isRowEdit(scope.row,scope.$index)" @change="defaultMouldChange(scope.row,scope.$index)"/>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="启用模板" prop="useMould"  width="90" align="center">
+                            <template slot-scope="scope">
+                                <el-tag v-if="isRowNotEdit(scope.row,scope.$index)" :type="scope.row.useMould=='1'?'success':'info'">{{scope.row.useMould=="1"?"启用":"禁用"}}</el-tag>
+                                <el-checkbox v-model="scope.row.useMould"  true-label="1" false-label="0" v-if="isRowEdit(scope.row,scope.$index)" @change="useMouldChange(scope.row,scope.$index)"/>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作" align="center" width="150">
+                            <template slot-scope="scope">
+                                <el-button size="small" type="primary" v-if="isRowNotEdit(scope.row,scope.$index)" @click="clickRowEdit(scope.row,scope.$index)">修改</el-button>
+                                <el-button size="small" type="primary" v-if="isRowEdit(scope.row,scope.$index)" @click="saveUpdate(scope.row,scope.$index)">保存</el-button>
+                                <el-button size="small" v-if="isRowEdit(scope.row,scope.$index)" @click="cancelUpdate(scope.row,scope.$index)" style="margin-left: 10px;">取消</el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-main>
+            </el-container>
+        </el-main>
+        <el-footer>
+            <el-pagination
+                    :ref="crud.pageRef"
+                    :page-sizes="crud.pageSizes"
+                    :page-size="crud.pageSize"
+                    :current-page="crud.page"
+                    :total="crud.dataStore.total"
+                    @size-change="crud.sizeChange()"
+                    @current-change="crud.currentPage()"
+                    layout="total, sizes, prev, pager, next, jumper">
+            </el-pagination>
+        </el-footer>
+    </el-container>
+</template>
+<script>
+    export default {
+        name:'message-mould',
+        data() {
+            return {
+                crud: new this.CrudUtil({
+                    vue: this,
+                    entityName: "messageMould",
+                    url: this.api.messageMould.url,
+                    searchForm: {
+                        order: 'DEFAULT_MOULD DESC, USE_MOULD DESC,UPDATE_TIME DESC',
+                    },
+                    noClearSearchColumns: ["order"],
+                    afterRemoveSuccess:()=>{
+                        this.afterRemoveSuccess()
+                    },
+                }),
+                messageTip:"说明:模板内容通过${ *}通配符进行解释，目前支持的通配符名称有:${flowName*}、${count*}、${loginUser*}",
+                typeArr:[{
+                    value: 'pengding',
+                    label: '待办提醒'
+                },
+                {
+                    value: 'cancel',
+                    label: '撤销提醒'
+                }, {
+                    value: 'stopped',
+                    label: '中止提醒'
+                }, {
+                    value: 'end',
+                    label: '办结提醒'
+                    },
+                ],
+                remindTypeArr:[{
+                    value: 'sys',
+                    label: '系统提醒'
+                },{
+                    value: 'email',
+                    label: '邮件提醒'
+                },
+                  {
+                    value: 'message',
+                    label: '短信提醒'
+                }],
+                useMouldArr:[{
+                    value: '1',
+                    label: '启用'
+                }, {
+                    value: '0',
+                    label: '禁用'
+                }],
+                dataList:[],
+                dataObj:"",
+                lastRowIndex: -1,
+                dataListBak:"",
+                tableShow:true,
+                defaultMouldObj:"",
+                defaultMouldObj2:"",
+                initList:[],
+                initListBak:[],
+            }
+        },
+        watch :{
+           "crud.dataStore.records"(){
+               this.dataList=this.crud.dataStore.records;
+           }
+        },
+        created() {
+
+           this.initData();
+        },
+        methods:{
+            /*
+                初始化数据
+            */
+            initData(){
+                this.axios.post(this.api.messageMould.find).then(res=>{
+                    this.initList=res.data;
+                    this.initListBak=JSON.parse(JSON.stringify(this.initList));
+                })
+            },
+            doSearch(){
+                if(this.lastRowIndex!=-1){
+                    this.$message({
+                        message: '请先保存或取消编辑内容再进行操作',
+                        type: 'error'
+                    });
+                }else{
+                    this.crud.doSearch();
+                }
+            },
+            resetSearch(){
+                if(this.lastRowIndex!=-1){
+                    this.$message({
+                        message: '请先保存或取消编辑内容再进行操作',
+                        type: 'error'
+                    });
+                }else{
+                    this.crud.resetSearch();
+                }
+            },
+            /*
+                格式化 模板类型
+            */
+            formartType(type){
+                if(type=='pengding'){
+                    return '待办提醒';
+                }else if(type=='cancel'){
+                    return '撤销提醒';
+                }else if(type=='stopped'){
+                    return '中止提醒';
+                }else if(type=='end'){
+                    return '办结提醒';
+                }else if(type=='email'){
+                    return '邮件提醒';
+                }else if(type=='message'){
+                    return '短信提醒';
+                }
+            },
+            /*
+                格式化 模板类型
+            */
+            formartRemind(remind){
+                let obj = {"email":"邮件提醒","sys":"系统提醒","message":"短信提醒"};
+                if(!remind){
+                    return "";
+                }
+                let arr = [];
+                remind.split(",").forEach(key => {
+                    arr.push(obj[key]);
+                })
+                return arr.join(",");
+            },
+            /*
+             增加行
+             */
+            addRecord(){
+                this.dataObj={"name":"","content":"","example":"","defaultMould":"0","useMould":"1","defaultData":"0"};
+                let lastObj=this.dataList[0];
+                if(this.dataList.length == 0){
+                    this.dataList.push(this.dataObj);
+                    this.lastRowIndex=this.dataList.length-1;
+                }else{
+                    if(this.lastRowIndex != -1){ //编辑状态下不许新增
+                        this.$message({
+                            message: '请先保存或取消编辑内容再进行添加数据操作',
+                            type: 'error'
+                        });
+                    }else if(lastObj.name==""&&lastObj.content==""&&lastObj.example==""){ //不允许同时新增多条
+                        this.$message({
+                            message: '禁止重复进行添加数据操作',
+                            type: 'error'
+                        });
+                    }else{
+                        this.dataListBak=JSON.parse(JSON.stringify(this.dataList));
+                        this.dataList.unshift(this.dataObj);
+                        this.lastRowIndex=0;
+                    }
+                }
+
+            },
+
+            isRowEdit(row,index){
+                let flag = false;
+                if(index == this.lastRowIndex){
+                    flag = true;
+                }
+                return flag;
+            },
+            isRowNotEdit(row,index){
+                let flag = false;
+                if(index != this.lastRowIndex){
+                    flag = true;
+                }
+                return flag;
+            },
+            // 可编辑
+            clickRowEdit(row,index){
+                let lastObj=this.dataList[0];
+                if(lastObj.name==""&&lastObj.content==""&&lastObj.example=="" ||this.lastRowIndex != -1 ){ //不允许新增数据 或编辑状态后未保存编辑其他数据
+                    this.$message({
+                        message: '请保存或取消当前编辑的内容！',
+                        type: 'error'
+                    });
+                }else{
+                    if(!(row.remindTypeArr && row.remindTypeArr.constructor == Array)){
+                        if(row.remindType){
+                            this.$set(row,"remindTypeArr",row.remindType.split(","));
+                        }else{
+                            this.$set(row,"remindTypeArr",[]);
+                        }
+                    }
+                    this.lastRowIndex=index;
+                    this.defaultMouldObj="";
+                    this.defaultMouldObj2="";
+                    this.dataListBak=JSON.parse(JSON.stringify(this.dataList));
+                }
+            },
+
+            /*
+                通配符 =》模板示例
+            */
+            changeContent(row,index){
+                let content=row.content;
+                content=content.replace(/\$\{count\*\}/g,"1");
+                content=content.replace(/\$\{flowName\*\}/g,"意见与建议");
+                content=content.replace(/\$\{loginUser\*\}/g,"用户");
+                row.example=content;
+            },
+            /*
+                默认模板 遍历
+                返回改类型的默认模板数据
+            */
+            foreachDefaultMould(type){
+                let arr=[];
+                this.initList.forEach(data=>{
+                    if(data.type==type && data.defaultMould=="1"){
+                        arr.push(data);
+                    }
+                });
+                return arr;
+            },
+            /*
+               默认数据更改
+            */
+            defaultMouldChange(row,num){
+                if(row.defaultMould=="1"){
+                    this.$set(row,"useMould","1");
+                }
+            },
+
+            /*
+                保存修改
+             */
+            saveUpdate(row,num){
+                if(row.name==""){
+                    this.$message.error("模板名称不能为空！");
+                } else if(row.content==""){
+                    this.$message.error("模板内容不能为空！");
+                }else if(row.type=="" || row.type==undefined){
+                    this.$message.error("模板类型不能为空！");
+                }else if(!row.remindTypeArr || row.remindTypeArr.length == 0){
+                    this.$message.error("提醒方式不能为空！");
+                } else{
+                    let arr=this.foreachDefaultMould(row.type);
+                    let obj="";
+                    if(row.id!=undefined){
+                       let index=this.initList.findIndex(data =>{
+                            if(row.id == data.id){
+                                return true;
+                            }
+                        });
+                       if(index >=0){
+                           obj=this.initList[index];
+                       }
+                    }
+                    if(obj !="" && obj.defaultMould =="1" && row.type != obj.type){
+                        this.$message.error("默认模板不允许更换类型！");
+                    }else if(row.useMould=="0" && row.defaultMould=="1"){
+                        this.$message({
+                            type: 'error',
+                            message: '默认模板不许禁用！'
+                        });
+                        this.$set(row,"useMould","1");
+                    }else if(arr.length>0 && row.defaultMould=="1"){
+                        if(row.id==undefined || row.id !=arr[0].id){
+                            this.defaultMouldObj=JSON.parse(JSON.stringify(arr[0]));
+                            this.$set(this.defaultMouldObj,"defaultMould","0");
+                            this.addOrUpdate(this.defaultMouldObj);
+                        }
+                        this.addOrUpdate(row);
+                    }else if(row.defaultMould=="0"){
+                        if(arr.length >0 && row.id !=undefined && row.id==arr[0].id){
+                            this.$message.error("默认模板不允许取消！");
+                            this.$set(row,"defaultMould","1");
+                            this.$set(row,"useMould","1");
+                        }else{
+                            this.addOrUpdate(row);
+                        }
+                    } else{
+                        this.addOrUpdate(row);
+                    }
+                }
+            },
+
+            /*
+               add or update 后台交互
+            */
+            addOrUpdate(row){
+                let operate = "update";
+                if(row.id==undefined || row.id==""){
+                    operate="add";
+                }
+                let obj={};
+                if(operate=="update"){
+                    obj={"id":row.id,"type":row.type,"name":row.name,"content":row.content,
+                        "example":row.example,"defaultMould":row.defaultMould,"useMould":row.useMould,"defaultData":row.defaultData};
+                    if(row.remindTypeArr && row.remindTypeArr.length > 0){
+                        obj.remindType = row.remindTypeArr.join(",")
+                    }
+                }else{
+                    obj=JSON.parse(JSON.stringify(row));
+                    obj.remindType = obj.remindTypeArr.join(",");
+                    delete obj["remindTypeArr"];
+                }
+                this.axios.post(this.api.messageMould[operate],obj).then(res =>{
+                    this.lastRowIndex=-1;
+                    this.crud.search();
+                    this.initData();
+                });
+            },
+
+            /*
+               取消修改
+            */
+            cancelUpdate(row,index){
+                this.lastRowIndex=-1;
+                this.defaultMouldObj="";
+                this.dataList=JSON.parse(JSON.stringify(this.dataListBak));
+                //this.initData();
+                this.initList=JSON.parse(JSON.stringify(this.initListBak));
+            },
+
+            /*
+                删除
+             */
+            remove(){
+                let selection = this.$refs[this.crud.tableRef].selection;
+                let tag=true;
+                selection.forEach(data =>{
+                    if(data.defaultMould==1){
+                        this.$message({
+                            type: 'error',
+                            message: '默认模板不允许删除！'
+                        });
+                        tag=false;
+                    }else if(data.defaultData==1){
+                        this.$message({
+                            type: 'error',
+                            message: '系统数据不允许删除！'
+                        });
+                        tag=false;
+                    }
+                });
+                if(tag){
+                    if(this.lastRowIndex == -1){
+                        this.crud.remove();
+                        this.initData();
+                    }else{
+                        this.$message({
+                            type: 'error',
+                            message: '请保存或取消当前编辑的内容！'
+                        });
+                    }
+                }
+            },
+            afterRemoveSuccess(){
+                this.lastRowIndex=-1;
+            },
+            useMouldChange(row,index){
+                if(row.useMould=="0" && row.defaultMould=="1"){
+                    this.$message({
+                        type: 'error',
+                        message: '默认模板不许禁用！'
+                    });
+                    this.$set(row,"useMould","1");
+                }
+            },
+            remindSuccess(){
+                this.$message.success("复制成功！");
+            },
+            appendContent(val){
+                if(this.lastRowIndex === -1){
+                    this.$message.error("没有正在编辑的数据！");
+                    return;
+                }
+                let data = this.dataList[this.lastRowIndex];
+                let content = data.content;
+                let index = this.$refs['content' + this.lastRowIndex].$el.children[0].selectionStart;
+                // 开始判断此处是否允许插入
+                let subStringData = content.substring(0,index);
+                let indexBefore = subStringData.lastIndexOf("${");
+                let indexAfter = subStringData.lastIndexOf("}");
+                if(indexBefore > indexAfter){
+                    this.$message.error("不能在系统字段中间插入！");
+                    return;
+                }
+                // 判断end
+                let insertValue = val;
+                if(index == content.length){
+                    content += insertValue;
+                }else{
+                    if(index === 0){
+                        content = insertValue + content;
+                    }else{
+                        content = content.slice(0,index) + insertValue + content.slice(index);
+                    }
+                }
+                this.$set(data, "content", content);
+                this.summaryVisible = false;
+                this.$nextTick(() => {
+                    this.$refs['content' + this.lastRowIndex].$el.children[0].selectionStart = index + insertValue.length;
+                    this.$refs['content' + this.lastRowIndex].$el.children[0].selectionEnd = index + insertValue.length;
+                    this.$refs['content' + this.lastRowIndex].focus();
+                })
+            },
+        }
+    }
+</script>