流程模板定义页面

 Source/plt-web/plt-web-ui/src/api/processTemplate/define.js

@@ -50,3 +50,12 @@
    params
  })
}

// 停用启用
export function stopProcessTemp(params) {
  return request({
    url: "/api/userQueryController/stopUsers",
    method: "post",
    params
  });
}

 Source/plt-web/plt-web-ui/src/styles/ui.scss

@@ -413,17 +413,22 @@
  display: flex;
  align-items: center;
}
/**右侧侧操作栏**/
.avue-crud__right{
  display: flex;
  align-items: center;
}
/**表内操作栏**/
.avue-crud .avue-crud__menu{
  min-height: 18px;
  display: flex;
  justify-content: space-around;
  justify-content: flex-start;
}
.avue-crud .avue-crud__menu .el-button{

}
.avue-crud .avue-crud__menu .el-button--text{
  padding: 2px 6px;
  padding: 2px 3px;
  display: flex;
}
.avue-crud .avue-crud__menu .el-button--text > span {
@@ -594,7 +599,7 @@
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  margin-right: 6px;
  margin-right: 2px;
}

.el-table td.el-table__cell div.iconShow{
@@ -602,7 +607,7 @@
  width: 14px !important;
  height: 14px !important;
  margin-top: -1px;
  margin-right: 3px;
  margin-right: 1px;
}

/*

 Source/plt-web/plt-web-ui/src/views/processTemplate/customDefine/index.vue

@@ -1,16 +1,16 @@
<template>
  <!--流程模板定义-->
  <basic-container>
    <div>
  <basic-container style="height: calc(100vh - 123px)">
    <div style="margin-bottom: 5px;">
      流程分类：
      <el-select v-model="tempType" :clearable="true" placeholder="请选择" size="small"
                 style="width: 300px;margin-right: 20px;"
                 @change="tempTypeChange">
        <el-option
          v-for="item in tempTypeData"
          :key="item.oid"
          :key="item.id"
          :label="item.name"
          :value="item.oid">
          :value="item.id">
        </el-option>
      </el-select>
      流程模板名称：
@@ -20,87 +20,90 @@
        查询
      </el-button>
    </div>
    <div>
      <el-main>
          <avue-crud
            ref="userCrud"
            :data="tableData"
            :option="option"
            :table-loading="tableLoading"
            @on-load="getTableList"
            @refresh-change="getTableList"
            @selection-change="selectionChange"
            @row-click="rowClickHandler"
          >
            <template slot="menuLeft" slot-scope="scope">
              <el-button v-if="permissionList.addBtn" class="button-custom-icon" plain size="small" type="primary"
                         @click="addHandler">
                <icon-show :name="permissionList.addBtn.source"></icon-show>
                增加
              </el-button>
              <el-button v-if="permissionList.downloadImportTemplateBtn" class="button-custom-icon" plain size="small"
                         type="primary" @click="downloadTemplateHandler">
                <icon-show :name="permissionList.downloadImportTemplateBtn.source"></icon-show>
                下载导入模板
              </el-button>
              <el-button v-if="permissionList.importBtn" class="button-custom-icon" plain size="small" type="primary"
                         @click="uploadHandler">
                <icon-show :name="permissionList.importBtn.source"></icon-show>
                导入
              </el-button>
              <el-button v-if="permissionList.exportBtn" class="button-custom-icon" plain size="small" type="primary"
                         @click="downloadHandler">
                <icon-show :name="permissionList.exportBtn.source"></icon-show>
                导出
              </el-button>
            </template>
    <el-container style="height: calc(100% - 100px)">
      <el-aside style="width: 40%;min-width: 500px;margin-right: 5px;">
        <avue-crud
          ref="crud"
          :data="tableData"
          :option="option"
          :table-loading="tableLoading"
          @on-load="getTableList"
          @refresh-change="getTableList"
          @selection-change="selectionChange"
          @row-click="rowClickHandler"
        >
          <template slot="menuLeft" slot-scope="scope">
            <el-button v-if="permissionList.addBtn" class="button-custom-icon" plain size="small" type="primary"
                       @click="handlerAdd">
              <icon-show :name="permissionList.addBtn.source"></icon-show>
              增加
            </el-button>
            <el-button v-if="permissionList.downloadImportTemplateBtn" class="button-custom-icon" plain size="small"
                       type="primary" @click="downloadTemplateHandler">
              <icon-show :name="permissionList.downloadImportTemplateBtn.source"></icon-show>
              下载导入模板
            </el-button>
            <el-button v-if="permissionList.importBtn" class="button-custom-icon" plain size="small" type="primary"
                       @click="uploadHandler">
              <icon-show :name="permissionList.importBtn.source"></icon-show>
              导入
            </el-button>
            <el-button v-if="permissionList.exportBtn" class="button-custom-icon" plain size="small" type="primary"
                       @click="downloadHandler">
              <icon-show :name="permissionList.exportBtn.source"></icon-show>
              导出
            </el-button>
          </template>

            <template slot="menu" slot-scope="scope">
              <el-button v-if="permissionList.editBtn" size="small" type="text"
                         @click="editBtnClick(scope.row)">
                <icon-show :name="permissionList.editBtn.source"></icon-show>
                编辑
              </el-button>
              <el-button v-if="permissionList.delBtn" size="small" type="text"
                         @click="rowDeleteHandler(scope.row)">
                <icon-show :name="permissionList.delBtn.source"></icon-show>
                删除
              </el-button>
              <el-button size="small" type="text" @click.stop="stopUserHandler(scope.row)">
          <template slot="menu" slot-scope="scope">
            <el-button v-if="permissionList.editBtn" size="small" type="text"
                       @click="handleEdit(scope.row)">
              <icon-show :name="permissionList.editBtn.source"></icon-show>
              编辑
            </el-button>
            <el-button v-if="permissionList.delBtn" size="small" type="text"
                       @click="handleDel(scope.row)">
              <icon-show :name="permissionList.delBtn.source"></icon-show>
              删除
            </el-button>
            <el-button size="small" type="text" @click.stop="stopHandler(scope.row)">
                <span v-if="scope.row.status === 0 && permissionList.stopBtn" style="color: #fa3434;display: flex">
                  <icon-show :name="permissionList.stopBtn.source"></icon-show>
                  停用
                </span>
                      <span v-if="scope.row.status === 1 && permissionList.actionBtn" style="color: #55b61d;display: flex">
              <span v-if="scope.row.status === 1 && permissionList.actionBtn" style="color: #55b61d;display: flex">
                  <icon-show :name="permissionList.actionBtn.source"></icon-show>
                  启用
                </span>
              </el-button>
            </template>
            </el-button>
          </template>

          </avue-crud>
          <!-- 创建编辑自定义对话框    -->
          <el-dialog
            v-dialogDrag
            v-loading="dialogLoading"
            :title="dialogType === 'add' ? ' 创建' : '编辑'"
            :visible.sync="dialogVisible"
            append-to-body="true"
            class="avue-dialog"
            width="1000px"
            @close="dialogClose"
          >
        </avue-crud>
        <!-- 创建编辑自定义对话框    -->
        <el-dialog
          v-dialogDrag
          v-loading="dialogLoading"
          :title="dialogType === 'add' ? ' 创建' : '编辑'"
          :visible.sync="dialogVisible"
          append-to-body="true"
          class="avue-dialog"
          width="1000px"
          @close="dialogClose"
        >
            <span slot="footer" class="dialog-footer">
              <el-button size="small" type="primary" @click="rowSaveHandler">确 定</el-button>
              <el-button size="small" @click="dialogVisible = false">取 消</el-button>
              <el-button size="small" type="primary" @click="saveHandler">确 定</el-button>
              <el-button size="small" @click="dialogClose">取 消</el-button>
            </span>
          </el-dialog>
      </el-main>

      <el-aside width="35%">
        <div></div>
        </el-dialog>
        <!-- 导入   -->
        <upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" :tipList="tipList" title="导入流程模板"
                     @updata="getTableList"></upload-file>
      </el-aside>
    </div>

      <el-main width="60%">
        <div style="height: 100%;background-color: #eeeeea">设计器</div>
      </el-main>
    </el-container>
  </basic-container>
</template>

@@ -108,7 +111,7 @@
import {mapGetters} from "vuex";
import basicOption from "@/util/basic-option";
import {getTypeList} from "@/api/processTemplate/type";
import {getProcessTempList,saveProcessTemp,updateProcessTemp,deleteProcessTemp,downloadTemplate,download} from "@/api/processTemplate/define";
import {getProcessTempList,saveProcessTemp,updateProcessTemp,deleteProcessTemp,downloadTemplate,download,stopProcessTemp} from "@/api/processTemplate/define";
import func from "@/util/func";

export default {
@@ -123,6 +126,12 @@
      tableData: [],
      currentRow:null,
      selectionList: [],
      upFileType: ['xls', 'xlsx'],
      fileUrl: 'api/userQueryController/importUser',
      tipList:[],
      dialogLoading:false,
      dialogVisible:false,
      dialogType:'add'
    }
  },
  computed: {
@@ -152,10 +161,13 @@
        addBtn:false,
        editBtn:false,
        delBtn:false,
        calcHeight: -60,
        columnBtn:false,
        gridBtn:false,
        width:500,
        calcHeight: -50,
        align:'left',
        headerAlign:'center',
        menuWidth:160,
        menuWidth:190,
        dialogMenuPosition: 'right',
        dialogWidth:600,
        column: [
@@ -164,10 +176,12 @@
            prop: 'name'
          },{
            label: '版本',
            prop: 'desc'
            prop: 'desc',
            width:50
          },{
            label: '状态',
            prop: 'status'
            prop: 'status',
            width:65
          }]
      }
    }
@@ -192,36 +206,43 @@
    searchData(){
      this.getTableList();
    },
    // 新增
    saveHandler(row, done, loading) {
      saveProcessTemp(row).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.getTableList();
          done();
        }
      }).catch(err => {
        loading()
      });
    },

    handleEdit(row,index){
      this.$refs.crud.rowEdit(row, index);
    handlerAdd(){
      this.form={};
      this.dialogVisible=true;
      this.dialogType='add'
    },

    // 编辑
    updateHandler(row, index, done, loading) {
      updateProcessTemp(row).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.getTableList();
          done()
        }
      }).catch(err => {
        loading()
      });
    handleEdit(row,index) {
      this.form={
        ...row
      }
      this.dialogVisible = true;
      this.dialogType = 'edit'
    },
    // 编辑保存
    saveHandler() {
      if(this.dialogType=='add'){
        saveProcessTemp(this.form).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.obj);
            this.getTableList();
          }
        });
      }else{
        updateProcessTemp(this.form).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.obj);
            this.getTableList();
          }
        })
      }

    },
    dialogClose(){
      this.form={};
      this.dialogLoading=false;
      this.dialogVisible=false;
    },
    // 删除
    handleDel(row,index) {
      let params = {
@@ -293,7 +314,19 @@
    //导入
    uploadHandler() {
      this.$refs.upload.visible = true;
    }
    },
    // 停用启用
    stopHandler(row) {
      let params = {};
      params = {
        ids: row.oid,
        flag: row.status === 0 ? true : false
      }
      stopProcessTemp(params).then(res => {
        this.$message.success(res.data.obj);
        this.getTableList();
      });
    },
  }
}
</script>