<template>
 <div class="process-contain">
      <div class="ls-search-form">
          <el-row :gutter="20" class="search-style">
              <el-col :span="6" >
                <label>流程定义 ID</label>
                <el-input v-model="queryParam.processRefId" size="small"
                  @keyup.enter.native="doQuery(pager.curPage)"
                  v-inputFilter:trim
                  placeholder="请输入" clearable></el-input>
              </el-col>
              <el-col :span="6" >
                <label>流程名称</label>
                <el-input v-model="queryParam.processName" size="small"
                  @keyup.enter.native="doQuery(pager.curPage)"
                  v-inputFilter:trim
                  placeholder="请输入" clearable ></el-input>
              </el-col>
              <div  class="query-btn" >
                 <el-button type="primary" size="small"  @click="doQuery(1)">查询</el-button>
                 <el-button type="primary" size="small" @click="handleAdd" >新增</el-button>
              </div>
            </el-row>
         </div>
         <!-- search end -->

      <div class="table-wrap">
        <el-table
           class="todo-table"
           size="mini" stripe
           border height="100%"
           :data="tableData"
           ref="tableRef"
        >
            <el-table-column type="index"  width="50" label="#" >
            </el-table-column>

             <el-table-column  v-for="(item,index) in colunms" :key="index"
                     :prop="item.prop"
                     :label="item.label"
                     :min-width="item.width"
                     :formatter="formatter"
                     :show-overflow-tooltip="item.tooltip"
                     >

             </el-table-column>

             <el-table-column  label="操作"    min-width="120">
               <template slot-scope="scope">
                 <el-button v-show="scope.row.status == 'Y'" @click="handleEdit(scope.row)" type="text"  >编辑</el-button>
                 <el-button @click="handleView(scope.row)" type="text"  >查看</el-button>
                 <el-button v-if="scope.row.status == 'N' " @click="enableOrDisable(scope.row)" type="text" >启用</el-button>
                 <el-button v-else @click="enableOrDisable(scope.row)" type="text" >禁用</el-button>
               </template>
             </el-table-column>
         </el-table>
      </div>
       <!-- 分页-->
       <ls-pagination :pager.sync="pager"  @query="doQuery"></ls-pagination>
       <dig-process-def  ref="digProDefRef"></dig-process-def>
 </div>
</template>

<script>
  import digProcessDef from './dialog/dialog-process-def.vue'
  export default {
    name: 'process-def-conf',
    components:{
      digProcessDef,
    },
    created: function () {

    },
    mounted: function () {
        this.doQuery();
    },
    methods: {

        // 查询数据
        doQuery (current) {

          if ( typeof current != 'undefined') {
             this.pager.curPage = current;
          }

          let param = {
            currPage: this.pager.curPage,
            pageSize: this.pager.size,
            queryParam: this.queryParam
          };

          this.$ajax.post({
            domain: 'crmUrl',
            url: 'process.listPageProcessGroup',
            data: JSON.stringify(param),
            requestType: 'body',
            showLoad: true,
            success: function (res) {
              if (res.errorCode === 200) {
                   this.tableData = res.data.records || [];
                   this.pager.totals = res.data.total || 0;
              }
            }.bind(this),
            error: function (res) {
              this.$message({
                type: 'error',
                message: res.body.msg || res.msg
              })
            }.bind(this)
          })
        },

        //启用或禁用
        enableOrDisable(row){

          let param = JSON.parse(JSON.stringify(row));
          if(param.status === 'Y'){
            param.status = 'N';
          } else {
            param.status = 'Y';
          }

          this.$ajax.post({
            domain: 'crmUrl',
            url: 'process.enableOrDisableProcessGroup',
            data: param,
            requestType: 'body',
            showLoad: true,
            success: function (res) {
              if (res.errorCode === 200) {
                 this.$message({
                   type: 'success',
                   message: '更改成功'
                 });
                 this.doQuery();
              }
            }.bind(this),
            error: function (res) {
              this.$message({
                type: 'error',
                message: res.body.msg || res.msg
              })
            }.bind(this)
          })

        },

        //新增
        handleAdd(){
          this.$refs.digProDefRef.openTitle = '新增';
          this.$refs.digProDefRef.openType = 'add';
          this.$refs.digProDefRef.visible = true;
        },
        //编辑
        handleEdit(row){
          this.$refs.digProDefRef.openTitle = '编辑';
          this.$refs.digProDefRef.openType = 'edit';
          this.$refs.digProDefRef.paramForm = JSON.parse(JSON.stringify(row));
          this.$refs.digProDefRef.visible = true;
        },
        //查看
        handleView(row){
          this.$refs.digProDefRef.openTitle = '查看';
          this.$refs.digProDefRef.openType = 'view';
          this.$refs.digProDefRef.paramForm = JSON.parse(JSON.stringify(row));
          this.$refs.digProDefRef.visible = true;
        },
        formatter(row, column, cellValue, index){
             if(column.property == 'status'){
                 if(row.status === 'Y'){
                   return '有效';
                 } else {
                   return '无效';
                 }
             } else {
               return cellValue;
             }
         },

    },
    data:function () {
      return {

        tableData: [],
        //分页参数
        pager: {
          curPage: 1,
          size: 10,
          pageOptions: [10, 20, 30],
          totals: 0
        },
        queryParam: {
          processRefId: '',
          processName: '',
        },
        processDefList:[],

      //表格列
      colunms: [
        {prop: 'processName', label: '流程名称', width: 130, fixed: false, tooltip: true},
        {prop: 'processTitle', label: '启动流程标题', width: 130, fixed: false, tooltip: true},
        {prop: 'processVersion', label: '流程版本', width: 100, fixed: false, tooltip: true},
        {prop: 'processSign', label: '唯一标识', width: 100, fixed: false, tooltip: true},
        {prop: 'status', label: '状态', width: 110, fixed: false, tooltip: true},
      ],
    };

  },


  }
</script>

<style type="text/css" scoped lang="scss">

</style>
