rmLayGaoujU9O46l603ccl_plm-vue/src/views/modules/sys/userjob.vue

<template>
  <div>
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
      <el-form-item>
        <el-input v-model="dataForm.userName" placeholder="用户账号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.userDisplay" placeholder="用户名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()">{{buttons.search ||'查询' }}</el-button>
     </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      highlight-current-row
      style="width: 100%;height: 731px">
      <el-table-column
        prop="userName"
        header-align="center"
        align="center"
        :label="buttons.userName||'用户账号'">
      </el-table-column>
      <el-table-column
        prop="userDisplay"
        header-align="center"
        align="center"
        :label="buttons.userDisplay||'用户名'">
      </el-table-column>
      <el-table-column
        prop="purchaser"
        header-align="center"
        align="center"
        width="110px"
        :label="buttons.purchaser||'采购员'">
<!--        <template slot-scope="scope">-->
<!--          &lt;!&ndash; 如果数据为Y，显示勾选框，否则不勾选 &ndash;&gt;-->
<!--          <el-checkbox v-model="scope.row.purchaser"  @change="changeCheck(scope.row,1)"></el-checkbox>-->
<!--        </template>-->
      </el-table-column>
      <el-table-column
        prop="insideSales"
        header-align="center"
        align="center"
        width="110px"
        :label="buttons.insideSales||'内部销售'">
      </el-table-column>
      <el-table-column
        prop="externalSales"
        header-align="center"
        align="center"
        width="110px"
        :label="buttons.externalSales||'外部销售'">
      </el-table-column>
      <el-table-column
        prop="procurementApplicant"
        header-align="center"
        align="center"
        width="110px"
        :label="buttons.procurementApplicant||'采购申请人'">
      </el-table-column>
      <el-table-column
        prop="purchaseRequisitionApprover"
        header-align="center"
        align="center"
        width="110px"
        :label="buttons.purchaseRequisitionApprover||'采购申请单审批人'">
      </el-table-column>
      <el-table-column
        prop="purchaseOrderApprover"
        header-align="center"
        align="center"
        width="110px"
        :label="buttons.purchaseOrderApprover||'采购订单审批人'">
      </el-table-column>
      <el-table-column
        prop="salesOrderApprover"
        header-align="center"
        align="center"
        width="110px"
        :label="buttons.salesOrderApprover||'销售订单审批人'">
      </el-table-column>
      <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        width="180"
        :label="buttons.createTime||'创建时间'">
      </el-table-column>
      <el-table-column
        prop=""
        header-align="center"
        align="center"
        min-width="30"
        label="操作">
        <template slot-scope="scope">
          <a type="text" size="small" @click="UpdateHandle(scope.row)">修改</a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100, 200,500]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-dialog :title="modalData.title"
               :close-on-click-modal="false"
               v-drag
               :visible.sync="modalFlag"
               width="495px">
      <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="用户账号" prop="userName" :rules="rules.userName">
          <el-input v-model="modalData.userName" style="width: 221px" readonly></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userDisplay" :rules="rules.userDisplay">
          <el-input v-model="modalData.userDisplay" style="width: 221px" readonly></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="采购员" prop="purchaser" :rules="rules.purchaser">
          <el-select v-model="modalData.purchaser" style="width: 221px">
            <el-option label="是" value="Y"></el-option>
            <el-option label="否" value="N"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内部销售" prop="insideSales" :rules="rules.insideSales">
          <el-select v-model="modalData.insideSales" style="width: 221px">
            <el-option label="是" value="Y"></el-option>
            <el-option label="否" value="N"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="外部销售" prop="externalSales" :rules="rules.externalSales">
          <el-select v-model="modalData.externalSales" style="width: 221px">
            <el-option label="是" value="Y"></el-option>
            <el-option label="否" value="N"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采购申请人" prop="procurementApplicant" :rules="rules.procurementApplicant">
          <el-select v-model="modalData.procurementApplicant" style="width: 221px">
            <el-option label="是" value="Y"></el-option>
            <el-option label="否" value="N"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="采购申请单审批人" prop="purchaseRequisitionApprover" :rules="rules.purchaseRequisitionApprover">
          <el-select v-model="modalData.purchaseRequisitionApprover" style="width: 221px">
            <el-option label="是" value="Y"></el-option>
            <el-option label="否" value="N"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采购订单审批人" prop="purchaseOrderApprover" :rules="rules.purchaseOrderApprover">
          <el-select v-model="modalData.purchaseOrderApprover" style="width: 221px">
            <el-option label="是" value="Y"></el-option>
            <el-option label="否" value="N"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="销售订单审批人" prop="salesOrderApprover" :rules="rules.salesOrderApprover">
          <el-select v-model="modalData.salesOrderApprover" style="width: 221px">
            <el-option label="是" value="Y"></el-option>
            <el-option label="否" value="N"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-footer style="height:30px;margin-top: 20px;text-align:center">
        <el-button type="primary" @click="saveData()">保存</el-button>
        <el-button type="primary" @click="modalFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>


  </div>
</template>

<script>
import {
  searchFunctionButtonList,
} from "@/api/sysLanguage.js"
import {searchUserJobList,editUserJobInfo} from '../../../api/user'

  export default {
    watch: {
      dataForm:{
        deep:true,
        handler: function (val, oldVal) {
          this.dataForm.userId = this.dataForm.userId.toUpperCase()
        }
      },
      modalData:{
        deep:true,
        handler: function (val, oldVal) {
          this.modalData.userId = this.modalData.userId.toUpperCase()
        }
      }
    },
    data () {
      return {
        dataForm: {
          site: '',
          userId: '',
          userName: '',
          userDisplay: '',
        },
        modalData: {
          title: '',
          site: '',
          userId:'',
          userName: '',
          userDisplay: '',
          purchaser: '',
          insideSales: '',
          externalSales: '',
          procurementApplicant: '',
          purchaseRequisitionApprover: '',
          purchaseOrderApprover: '',
          salesOrderApprover: '',
          createTime:''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 20,
        totalPage: 0,
        height: 200,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        buttons: {
          cz: '操作',
          search: '查询',
          edit: '编辑',
          purchaser: '采购员',
          insideSales: '内部销售',
          externalSales: '外部销售',
          procurementApplicant: '采购申请人',
          purchaseRequisitionApprover: '采购申请单审批人',
          purchaseOrderApprover: '采购订单审批人',
          salesOrderApprover: '销售订单审批人',
          createTime: '创建时间',
        },
        rules: {
          userName: [
            {required: true, message: '', trigger: 'blur'}
          ],
          userDisplay: [
            {required: true, message: '', trigger: 'blur'}
          ],
          purchaser: [
            {required: true, message: '', trigger: 'blur'}
          ],
          insideSales: [
            {required: true, message: '', trigger: 'blur'}
          ],
          externalSales: [
            {required: true, message: '', trigger: 'blur'}
          ],
          procurementApplicant: [
            {required: true, message: '', trigger: 'blur'}
          ],
          purchaseRequisitionApprover: [
            {required: true, message: '', trigger: 'blur'}
          ],
          purchaseOrderApprover: [
            {required: true, message: '', trigger: 'blur'}
          ],
          salesOrderApprover: [
            {required: true, message: '', trigger: 'blur'}
          ],
        },
        modalFlag: false,
        modalDisableFlag: false,
      }
    },
    activated () {
      this.search()
    },
    created () {
      this.getFunctionButtonList()
      this.search()
    },
    methods: {
      // for (let i = 0; i < this.dataList.length; i++) {
      //   if(this.dataList[i].username==this.$store.state.user.name){
      //     this.dataList[i].purchaser='Y'
      //     this.dataList[i].insideSales='Y'
      //     this.dataList[i].externalSales='Y'
      //     this.dataList[i].procurementApplicant='Y'
      //     this.dataList[i].purchaseRequisitionApprover='Y'
      //     this.dataList[i].purchaseOrderApprover='Y'
      //     this.dataList[i].salesOrderApprover='Y'
      //   }
      // }
      search () {
        this.dataForm.limit = this.pageSize
        this.dataForm.page = this.pageIndex
        searchUserJobList(this.dataForm).then(({data}) => {
          if (data.code == 0) {
            this.dataList = data.page.list
            this.pageIndex = data.page.currPage
            this.pageSize = data.page.pageSize
            this.totalPage = data.page.totalCount
          }
          this.dataListLoading = false
        })
      },
      // changeAll(row){
      //   if(row.checkAll){
      //     row.purchaser='Y';
      //     row.insideSales='Y';
      //     row.externalSales='Y';
      //     row.procurementApplicant='Y';
      //     row.purchaseRequisitionApprover='Y';
      //     row.purchaseOrderApprover='Y';
      //     row.salesOrderApprover='Y';
      //   }else {
      //     row.purchaser='N';
      //     row.insideSales='N';
      //     row.externalSales='N';
      //     row.procurementApplicant='N';
      //     row.purchaseRequisitionApprover='N';
      //     row.purchaseOrderApprover='N';
      //     row.salesOrderApprover='N';
      //   }
      // },
      // changeCheck(row,type){
      //   if(type===1){
      //     if(row.purchaser){
      //       row.purchaserFlag='Y'
      //     }else {
      //       row.purchaserFlag='N'
      //     }
      //   }
      //   if(type==2){
      //     if(row.insideSales){
      //       row.insideSalesFlag='Y'
      //     }else {
      //       row.insideSalesFlag='N'
      //     }
      //   }
      //   if(type==3){
      //     if(row.externalSales){
      //       row.externalSalesFlag='Y'
      //     }else {
      //       row.externalSalesFlag='N'
      //     }
      //   }
      //   if(type==4){
      //     if(row.procurementApplicant){
      //       row.procurementApplicantFlag='Y'
      //     }else {
      //       row.procurementApplicantFlag='N'
      //     }
      //   }
      //   if(type==5){
      //     if(row.purchaseRequisitionApprover){
      //       row.purchaseRequisitionApproverFlag='Y'
      //     }else {
      //       row.purchaseRequisitionApproverFlag='N'
      //     }
      //   }
      //   if(type==6){
      //     if(row.purchaseOrderApprover){
      //       row.purchaseOrderApproverFlag='Y'
      //     }else {
      //       row.purchaseOrderApproverFlag='N'
      //     }
      //   }
      //   if(type==7){
      //     if(row.salesOrderApprover){
      //       row.salesOrderApproverFlag='Y'
      //     }else {
      //       row.salesOrderApproverFlag='N'
      //     }
      //   }
      //   if (row.purchaserFlag=='Y'&&row.insideSalesFlag=='Y'&&row.externalSalesFlag=='Y'&&row.procurementApplicantFlag=='Y'&&row.purchaseRequisitionApproverFlag=='Y'&&row.purchaseOrderApproverFlag=='Y'&&row.salesOrderApproverFlag=='Y'){
      //     row.checkAll=true
      //   }else {
      //     row.checkAll=false
      //   }
      //   this.$forceUpdate();
      // },
      // 角色修改模态框
      UpdateHandle (row) {
        this.modalData = {
          title: '角色修改',
          site: row.site,
          userId: row.userId,
          userName: row.userName,
          userDisplay: row.userDisplay,
          purchaser: row.purchaser,
          insideSales: row.insideSales,
          externalSales: row.externalSales,
          procurementApplicant: row.procurementApplicant,
          purchaseRequisitionApprover: row.purchaseRequisitionApprover,
          purchaseOrderApprover: row.purchaseOrderApprover,
          salesOrderApprover: row.salesOrderApprover,
        }
        this.modalDisableFlag = true
        this.modalFlag = true
      },
      // 保存
      saveData () {
        if (this.modalData.purchaser === '' || this.modalData.purchaser == null) {
          this.$message.warning('请选择采购员是否！')
          return
        }
        if (this.modalData.insideSales === '' || this.modalData.insideSales == null) {
          this.$message.warning('请选择内部销售是否！')
          return
        }
        if (this.modalData.externalSales === '' || this.modalData.externalSales == null) {
          this.$message.warning('请选择外部销售是否！')
          return
        }
        if (this.modalData.procurementApplicant === '' || this.modalData.procurementApplicant == null) {
          this.$message.warning('请选择采购申请人是否！')
          return
        }
        if (this.modalData.purchaseRequisitionApprover === '' || this.modalData.purchaseRequisitionApprover == null) {
          this.$message.warning('请选择采购申请单审批人是否！')
          return
        }
        if (this.modalData.purchaseOrderApprover === '' || this.modalData.purchaseOrderApprover == null) {
          this.$message.warning('请选择采购订单审批人是否！')
          return
        }
        if (this.modalData.salesOrderApprover === '' || this.modalData.salesOrderApprover == null) {
          this.$message.warning('请选择销售订单审批人是否！')
          return
        }
        //修改方法
        editUserJobInfo(this.modalData).then(({data}) => {
          if (data && data.code === 0) {
            this.search()
            this.modalFlag = false
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
              }
            })
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
      },
      // 获取button的词典
      getFunctionButtonList () {
        let queryButton = {
          functionId: this.$route.meta.menuId,
          tableId: '*',
          languageCode: this.$i18n.locale,
          objectType: 'button'
        }
        searchFunctionButtonList(queryButton).then(({data}) => {
          if (data.code == 0 && data.data) {
            this.buttons = data.data
          }
        })
      },
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.search()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.search()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
    }
  }
</script>