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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,303 @@
<template>
  <!--流程模板定义-->
  <basic-container>
    <div>
      æµç¨‹åˆ†ç±»ï¼š
      <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"
          :label="item.name"
          :value="item.oid">
        </el-option>
      </el-select>
      æµç¨‹æ¨¡æ¿åç§°ï¼š
      <el-input size="small" v-model="tempName" style="width: 300px;margin-right: 10px;"></el-input>
      <el-button icon="el-icon-search" plain size="small" style="margin-right: 40px;" type="primary"
                 @click="searchData">
        æŸ¥è¯¢
      </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>

            <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)">
                <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">
                  <icon-show :name="permissionList.actionBtn.source"></icon-show>
                  å¯ç”¨
                </span>
              </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"
          >
            <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>
            </span>
          </el-dialog>
      </el-main>

      <el-aside width="35%">
        <div></div>
      </el-aside>
    </div>
  </basic-container>
</template>

<script>
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 func from "@/util/func";

export default {
  name: "index",
  data(){
    return {
      tempType:'',
      tempName:'',
      tempTypeData:[],
      form:{},
      tableLoading: false,
      tableData: [],
      currentRow:null,
      selectionList: [],
    }
  },
  computed: {
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission[this.$route.query.id].ADD, false),
        delBtn: this.vaildData(this.permission[this.$route.query.id].DELETE, false),
        editBtn: this.vaildData(this.permission[this.$route.query.id].EDIT, false),
        exportBtn: this.vaildData(this.permission[this.$route.query.id].EXPORT, false),
        importBtn: this.vaildData(this.permission[this.$route.query.id].IMPORT, false),
        downloadImportTemplateBtn: this.vaildData(this.permission[this.$route.query.id].DOWNLOADFILE, false),
        stopBtn: this.vaildData(this.permission[this.$route.query.id].FREEZE, false),
        actionBtn: this.vaildData(this.permission[this.$route.query.id].UNFREZE, false),
      };
    },
    option(){
      return  {
        ...basicOption,
        addBtn:false,
        editBtn:false,
        delBtn:false,
        calcHeight: -60,
        align:'left',
        headerAlign:'center',
        menuWidth:160,
        dialogMenuPosition: 'right',
        dialogWidth:600,
        column: [
          {
            label: '流程模板名称',
            prop: 'name'
          },{
            label: '版本',
            prop: 'desc'
          },{
            label: '状态',
            prop: 'status'
          }]
      }
    }
  },
  created() {
    getTypeList().then(res => {
      this.tempTypeData = res.data.data;
    })
  },
  methods:{
    getTableList(){
      this.tableLoading = true;
      getProcessTempList({tempType:this.tempType,tempName:this.tempName}).then(res => {
        this.tableData = res.data.data;
        this.tableLoading = false;
      })
    },
    //流程分类选择
    tempTypeChange(val){
      this.getTableList();
    },
    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);
    },

    // ç¼–辑
    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()
      });
    },

    // åˆ é™¤
    handleDel(row,index) {
      let params = {
        ids: row.id
      }

      this.$confirm('您确定要删除当前数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteProcessTemp(params).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.obj);
            this.getTableList();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //选择的行
    selectionChange(list) {
      this.selectionList = list;
    },

    // è¡Œå•é€‰
    rowClickHandler(row) {
      func.rowClickHandler(
        row,
        this.$refs.crud,
        this.lastIndex,
        (newIndex) => {
          this.lastIndex = newIndex;
        },
        () => {
          this.selectionList = [row];
        }
      );
    },

    // å¯¼å‡º
    downloadHandler() {
      if (this.selectionList.length <= 0) {
        this.$message.warning('请至少选择一条数据进行导出');
        return;
      }

      download({enumNames: this.ids}).then(res => {
        func.downloadFileByBlobHandler(res);
        this.$message.success('导出成功');
      }).catch(err => {
      })
    },

    // ä¸‹è½½å¯¼å…¥æ¨¡æ¿
    downloadTemplateHandler() {
      downloadTemplate().then(res => {
        func.downloadFileByBlobHandler(res);
        this.$message.success('下载成功');
      }).catch(err => {
      })
    },

    //导入
    uploadHandler() {
      this.$refs.upload.visible = true;
    }
  }
}
</script>

<style scoped>

</style>