template

<template>
  <div>

     <div class="role-list">
        <span class="role-title"><i class="fa fa-user-o b"></i></span>
        <div class="r">
          <el-button type="primary" size="small" @click="handleAdd">新增</el-button>
        </div>
      </div>
    <div class="bg-color-white p10 mt5">
        <!-- 列表区域 -->
      <el-table class="mt5" :data="tableData.templateList" size="small" border :height="tableHeight"  :header-cell-style="TABLE_HEADER_CELL_STYLE">
        
        <el-table-column label="序号" type="index" header-align="center" align="center" width="100"></el-table-column>
        <el-table-column label="模板代码" prop="templateCode" header-align="center" align="center" width="400"></el-table-column>
        <el-table-column label="模板名称" prop="templateName" header-align="center" align="center" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column label="模板对象"  header-align="center" align="center" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
          <el-select v-model="scope.row.templateObject" filterable
                   placeholder="选择类型" style="width: 200px" size="small" @change="saveTypeChange(scope.row.templateObject)">
          <el-option
            v-for="e in tableData.objectList"
            :key="e.id"
            :label="e.objectName"
            :value="e.objectCode"
          >
          </el-option>
        </el-select>
          </template>
        </el-table-column>

          <el-table-column label="操作" width="240" align="center">
            <template slot-scope="scope">              
              <span class="color-primary poi" @click="handleEle([scope.row])">属性</span>
            </template>
          </el-table-column>

           <el-table-column label="是否启用" prop="qwqwe" header-align="center" align="center" width="200">
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.isUsed"
          active-color="#13ce66"
          inactive-color="#ff4949"
           active-value="1"
        inactive-value="0"
        @change="changeResult(scope.row)"
           >
        </el-switch>
      </template>
      
      </el-table-column>

      </el-table>

    </div>
       


     <!-- 新增窗口 -->
    <el-dialog :visible.sync="userDialog.visible" height="650px" width="850px" v-draggable >

      
      <div class="bg-color-white p10 mt5">
        <!-- 列表区域 -->
      <el-table class="mt5"  :data="userDialog.eleList.Employee" size="small" border :height="tableHeight" :header-cell-style="TABLE_HEADER_CELL_STYLE">
        
        <el-table-column label="元素代码" prop="colName" header-align="center" align="center" width="150"></el-table-column>
        <el-table-column label="元素名称" prop="desc" header-align="center" align="center" min-width="100" show-overflow-tooltip></el-table-column>
       

      <el-table-column label="是否显示" header-align="center" align="center" width="100">
      <template slot-scope="scope">
      <el-checkbox v-model="scope.row.isShow" :true-label="'1'" :false-label="'0'" ></el-checkbox>
              </template>
    </el-table-column>


      </el-table>

    </div>
      
       <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="userDialog.visible = false">取消</el-button>
        <el-button type="primary" size="small" @click="handleSaveUser()">保存</el-button>
      </div>
      
      
      
  
  <!-- <div>
  <ul>
  <el-checkbox-group v-model="checkList">
  <el-checkbox v-for="e in eleList.Employee" :key="e" :value="e" :label="e"></el-checkbox>
  </el-checkbox-group>  
        </ul> 
        <button @click="submit">提交</button>
      </div>
   <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="userDialog.visible = false">取消</el-button>
        <el-button type="primary" size="small" @click="handleSaveUser()">保存</el-button>
      </div> -->
      
      
    </el-dialog>





     <el-dialog :visible.sync="templateDialog.visible" height="650px" width="850px" v-draggable >

     
      <span slot="title">
        <i class="fa fa-file-text b" > 新增模板</i>
        
      </span>
      <el-form ref="templateDialog" class="mt5" :model="templateDialog" label-width="100px" size="small">
       
        <el-form-item label="模板编码" prop="templateCode">
          <el-input v-model="templateDialog.templateCode" placeholder="输入模板编码" style="width: 220px;"> </el-input>
        </el-form-item>
        <el-form-item label="模板名称" prop="templateName">
          <el-input type="textarea" autosize v-model="templateDialog.templateName" placeholder="输入模板名称" style="width: 220px;"></el-input>
        </el-form-item>
         <el-form-item label="选择类型：" prop="objectCode">
              <el-select v-model="templateDialog.templateObject" placeholder="选择挂接对象" style="width: 220px;">
                <el-option  v-for="e in tableData.objectList"
            :key="e.id"
            :label="e.objectName"
            :value="e.objectCode">
                </el-option>
              </el-select>
            </el-form-item>
      </el-form>

      
      
       <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="userDialog.visible = false">取消</el-button>
        <el-button type="primary" size="small" @click="handleSaveTemplate()">保存</el-button>
      </div>
      
    </el-dialog>
    


    
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { innerHeight, TABLE_HEADER_CELL_STYLE } from '@/mixin/style';
import { pagination } from '@/mixin/data-table';
import { GET_CONTEXT_AGY_ACB, GET_LOGIN_INFO } from '@/store/login';
import util from '@/assets/js/util';
import fetch from '@/config/fetch';
import md5 from 'blueimp-md5';
import { compareAsc } from 'date-fns';
import { getEnumerate } from '@/store/service/global-service';
import { CONTEXT_PATH, ENUMERATE_CODE, FILE_TYPE } from '@/assets/js/constant';
import { Tree } from '@/assets/js/model';
import validate from '@/assets/js/validate';

/**
 * 弹出框类型
 */
const DIALOG_TYPE = {
  ADD: 'ADD',
  MODIFY: 'MODIFY'
};

export default {
  name: 'PEX_SET_WORK_TEST',
  mixins: [innerHeight, pagination],
  data() {
    return {
       submitList:[],
      arr:[],
      employeeList: [],
      checkList: [],
      eleList: [],
      qwr:[],
      eleList : '',
      form:{},
      templateObject: '',
      objectList:[],
      templateList:[],
      checkList: [],
      eleList: [],
      qwr:[],
      eleList : '',
      vouTypeList: [],
      workFlowList: [],
      checkedVouType: '',
      checkedWorkFlow: null,
      tableRadio: '',
       id: '',
       userDialog: {
        visible: false,
        type: DIALOG_TYPE.ADD, 
        templateObject:'',
        templateCode:'',
        templateName:'',
        eleList: [],
        form: {
          userId: '',
          userCode: '',
          userName: '',
          mainOrgid: '',
          mainOrgCode:'',
          jobLevel: '',
         
          mobileNo: '',
          email: '',
          identityCode: '',
         
          majorUsername: '',
          
          caSn: '',
          macAddress: '',
          ipAddress: '',
          startDate: '',
          endDate: '',
          invlidate: '',
          creator: ''
        }
        
      },

      templateDialog: {
        visible: false,
        type: DIALOG_TYPE.ADD, 
        eleList: [],
        form: {
          templateCode: '',
          templateName: ''
        }
        
      },
      TABLE_HEADER_CELL_STYLE
    };
  },

   


  
  methods: {
    /**
     * 获取全部流程
     */
    getTableData() {
      debugger;
      this.$loading();
      fetch
        .get('/es/template/get',{
          }).then(({ data }) => {
           debugger;
          this.$loadingClose();
          this.pageData = data;
         /* this.pageData.map((e, i) => {
            e.sign = i;
          });*/
        })
        .catch(({ msg }) => {
          this.$loadingClose();
          this.$message({
            type: 'error',
            message: msg
          });
        });
    },

    saveTypeChange(templateObject){
    this.form.templateObject=templateObject,
  this.form.templateCode='employee'
  debugger;
   fetch.post('/es/template/update',
          this.form
        ).then(({data}) => {
          this.$loadingClose();
          this.$message({
            type: 'success',
            message: "挂接成功"
          });
          debugger;
          this.getPageInfo();
        }).catch(({msg}) => {
          this.$loadingClose();
          this.$message({
            type: 'error',
            message: msg
          });
        });
  
 },


 handleSaveUser(){
      debugger;
       let data = this.userDialog.eleList.Employee.map(e => {
        return {
          colName: e.colName,
          desc: e.desc,
          isShow:e.isShow
        };
      });
       fetch
        .post('/es/template/insertEle',data)
        .then(({ data, msg }) => {
          this.$loadingClose();
          this.$message({
            type: 'success',
            message: msg
          });
        })
        .catch(({ msg }) => {
          this.$loadingClose();
          this.$message({
            type: 'error',
            message: msg
          });
        });
      
      
      },

      handleSaveTemplate(){
      debugger;
       fetch
        .post('/es/template/insert',{
         templateCode: this.templateDialog.templateCode,
         templateName:this.templateDialog.templateName,
         templateObject:this.templateDialog.templateObject
        })
        .then(({ data, msg }) => {
          this.$loadingClose();
          this.$message({
            type: 'success',
            message: msg
          });
        })
        .catch(({ msg }) => {
          this.$loadingClose();
          this.$message({
            type: 'error',
            message: msg
          });
        });
      },

    /**
     * 获取单据类型
     */
    getVouType() {
      this.$loading();
      fetch
        .get('pex/bpm/selectBill?systemCode=pex')
        .then(({ data }) => {
          this.$loadingClose();
          this.vouTypeList = data;
        })
        .catch(({ msg }) => {
          this.$loadingClose();
          this.$message({
            type: 'error',
            message: msg
          });
        });
    },
    handBtn(e){
      debugger;
      console.log(
        e
      );
    },

    handleCheckedQwe(e){
      console.log(e);
    },
    submit() {
      console.log(this.checkList)
      debugger;
        console.log(this.value)

        fetch
        .post('es/template/insertEle', this.checkList)
        .then(({ data, msg }) => {
          this.$loadingClose();
          this.$message({
            type: 'success',
            message: msg
          });
        })
        .catch(({ msg }) => {
          this.$loadingClose();
          this.$message({
            type: 'error',
            message: msg
          });
        });
      },
      
    /**
     * 获取单据类型对应的流程
     */
    getCheckedWorkFlow() {
      const { agyCode } = this.GET_CONTEXT_AGY_ACB;
      const { fiscal } = this.GET_LOGIN_INFO;
      this.$loading();
      fetch
        .get('/pex/bpm/setting/get', {
          params: {
            agyCode,
            fiscal,
            billFunc: this.checkedVouType
          }
        })
        .then(({ data }) => {
          debugger;
          this.$loadingClose();
          if(util.isNotEmpty(data)){
            let findId = _.cloneDeep(this.pageData).filter(e => {
              return e.key === data.wfId;
            });
            this.tableRadio = findId[0].sign;
            this.$refs.tableData.setCurrentRow(this.pageData[this.tableRadio])
            this.checkedWorkFlow = {key:data.wfId,name:data.wfName};
          }else{
             this.tableRadio = '';
              this.$refs.tableData.setCurrentRow();
             this.checkedWorkFlow = null;
          }
        })
        .catch(({ msg }) => {
          this.$loadingClose();
          this.$message({
            type: 'error',
            message: msg
          });
        });
    },
   

    /**
     * 处理删除人员
     */
    handleRemove(value) {
      debugger;
      if (util.isNotEmpty(value)) {
        this.$confirm('确定删除当前数据？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$loading();
          fetch.post('/es/delete', value).then(({msg}) => {
            this.$loadingClose();
            this.$message({
              type: 'success',
              message: msg
            });
           this.getTableData();
          }).catch(({msg}) => {
            this.$loadingClose();
            this.$message({
              type: 'error',
              message: msg
            });
          });
        }).catch(() => {});
      } else {
        this.$message({
          type: 'warning',
          message: '请选择需要删除的用户'
        });
      }
    },

    /**
     * 处理修改用户逻辑
     */
    handleEle(rowData) {
      debugger;
      this.getEleById(rowData[0].templateCode).then(data => {
        debugger;
      
        this.userDialog.visible = true;
        debugger;
        setTimeout(() => {
        /*  util.copyProperties(this.userDialog.eleList, data); */
         /* this.userDialog.form.mainOrgCode = rowData.mainOrgCode;*/
         debugger;
         this.userDialog.eleList=data;
        
        }, 0);
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '未设置属性'
        });
      });
    },

    handleAdd() {
      this.templateDialog.visible = true;
    },

     /**
     * 根据用户代码获取用户信息
     */
    getEleById(value) {
      debugger;
      return new Promise((resolve, reject) => {
        fetch.get('/es/template/getEle', {
          params: {
            templateCode: value,
            agyCode: this.GET_CONTEXT_AGY_ACB.agyCode
          }
        }).then(({data}) => {
          resolve(data);
        }).catch(err => {
          reject(err);
        });
      });
    },

    /**
     * 根据用户代码获取用户信息
     */
    getModuleById(value) {
      return new Promise((resolve, reject) => {
        fetch.get('/pa/user/get', {
          params: {
            userCode: value
          }
        }).then(({data}) => {
          resolve(data);
        }).catch(err => {
          reject(err);
        });
      });
    },

     /** switch按钮改变事件 */
      changeResult(data){
        if(util.isNotEmpty(data)){
          debugger;
          fetch.post('/es/template/update',data
          ).then(({data}) => {
            this.getTableData();
            this.$message({  type: 'success', message: '保存成功'});
          }).catch(({msg}) => {
            this.$message({  type: 'error', message: '保存失败'});
          })
        }
      },


      

      /** switch按钮改变事件 */
      changeEleResult(data){
        if(util.isNotEmpty(data)){
          debugger;
          fetch.post('/es/template/updateStatus',data
          ).then(({data}) => {
            this.getTableData();
            this.$message({  type: 'success', message: '保存成功'});
          }).catch(({msg}) => {
            this.$message({  type: 'error', message: '保存失败'});
          })
        }
      },
    /**
     * 跳转到门户配置菜单
     */
    handleToModlue(){
      this.$router.push('/pa/pa-portal')
    },
    handleDownload(){
      util.download('/static/file/pex-work-flow.docx')
    },
  },
  computed: {
    ...mapGetters([GET_CONTEXT_AGY_ACB, GET_LOGIN_INFO]),
    pexTypeHeight() {
      return this.innerHeight - 158;
    },
     userRolesFilter() {
      return util.isEmpty(this.userRoleDialog.filter) ? this.userRoleDialog.roles : this.userRoleDialog.roles.filter(e => {
        return e.roleCode.includes(this.userRoleDialog.filter) || e.roleName.includes(this.userRoleDialog.filter);
      });
    },
    tableHeight() {
      return this.innerHeight - 120;
    },
    pexTypeChecked() {
      let a = [];
      this.vouTypeList.forEach(e => {
        if (util.isNotEmpty(this.checkedVouType)) {
          if (this.checkedVouType === e.typeId) {
            a.push(true);
          } else {
            a.push(false);
          }
        }
      });
      return a;
    }
  },
  mounted() {
    this.getTableData();
    
  }
};
</script>
<style lang='scss' scoped>
@import '~@/assets/style/variables.scss';
.vouType-title {
  padding: 10px 0;
  font-weight: bolder;
}
.tip{
  margin:0 10px 10px 10px;
  border:1px dashed $--color-d9e9f6;
}
.vouType-detail {
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  margin: 2px 0;
  overflow: hidden;
  background-color: $--color-white;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
  &:hover {
    box-shadow: 0 1px 6px $--color-shade;
    background-color: $--color-a1cfff;
  }
}
.checked {
  box-shadow: 0 1px 6px $--color-shade;
  background-color: $--color-b3d6fa;
}
/deep/ .el-radio__label {
  font-size: 0px;
}
</style>