longchuang-vue/src/views/modules/qc/UserDefaultOperation.vue

<script>
import {queryUserDefaultOperationList,
  saveUserDefaultOperation,
  queryUserDefaultOperationListByUsername,
  queytOperationList,
  deleteUserDefaultOperation,
  getSiteAndBuByUserName,
  getAllUserList
} from "@/api/qc/qc.js"
import {getAllBuList} from "../../../api/factory/site";
export default {
  name: 'userDefaultOpetation',
  data () {
    return {
      queryParams: {
        page: 1,
        pageCount: 50,
        username: '',
        operation: '',
        bu: ''
      },
      operationList:[],
      dataList: [],
      userBuList: [],
      total: 0,
      modalFlag: false,
      modalData: {
        username: '',
        operation:'',
        bu: '',
      },
      userFlag:false,
      userData:{
        username:'',
        userDisplay:''
      },
      userDataList:[],
      ifUsernameExist: 0,
      columns: [
        {
          userId: this.$store.state.user.name,
          functionId: 200101107,
          serialNumber: '200101107Table1Bu',
          tableId: '200101107Table1',
          tableName: '用户默认工序设置表',
          columnProp: 'buDesc',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'BU',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 200101106,
          serialNumber: '200101106Table1Username',
          tableId: '200101106Table1',
          tableName: '用户默认工序设置表',
          columnProp: 'username',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '用户名',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 200101106,
          serialNumber: '200101106Table1Username',
          tableId: '200101106Table1',
          tableName: '用户默认工序设置表',
          columnProp: 'userDisplay',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 200101107,
          serialNumber: '200101107Table1Operation',
          tableId: '200101107Table1',
          tableName: '用户默认工序设置表',
          columnProp: 'operation',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '工序编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 200101107,
          serialNumber: '200101107Table1Operation',
          tableId: '200101107Table1',
          tableName: '用户默认工序设置表',
          columnProp: 'operationDesc',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '工序名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        }
      ],
      userColomn: [
        {
          userId: this.$store.state.user.name,
          functionId: 200101107,
          serialNumber: '200101107Table1Bu',
          tableId: '200101107Table1',
          tableName: '用户默认工序设置表',
          columnProp: 'username',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '用户名',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 200101106,
          serialNumber: '200101106Table1Username',
          tableId: '200101106Table1',
          tableName: '用户默认工序设置表',
          columnProp: 'userDisplay',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '描述',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        }
      ]

    }
  },
  methods: {
    handleQuery () {
      queryUserDefaultOperationList(this.queryParams).then(({data}) => {
        if (data.code == 0) {
          this.dataList = data.rows
          this.total = data.total
        }
      }).catch((errer) => {
        this.$message.error(errer)
      })
    },
    async handleQueryByUsername () {
      let json = {
        username: this.modalData.username
      }
      await queryUserDefaultOperationListByUsername(json).then(({data})=>{
        this.ifUsernameExist = data.code
      })
    },
    // 获取用户的bu
    getSiteAndBuByUserName () {
      let tempData = {
        username: this.$store.state.user.name,
      }
      getSiteAndBuByUserName(tempData).then(({data}) => {
        if (data.code === 0) {
          this.userBuList = data.rows
        }
      })
    },
    async saveModalData(){
      let data = this.modalData
      if (data.username==null||data.username==''){
        this.$message.warning("用户名不能为空！")
        return
      }else {
        await this.handleQueryByUsername()
        if (this.ifUsernameExist==2){
          this.$message.warning("此用户名已经存在记录")
          return
        }
      }
      if (data.operation==null||data.operation==''){
        this.$message.warning("工序类型不能为空！")
        return
      }
      if (data.bu==null||data.bu==''){
        this.$message.warning("BU不能为空！")
        return
      }
      saveUserDefaultOperation(data).then(({data})=>{
        if (data.code == 0){
          this.$message.success("保存成功")
          this.handleQuery()
        }
        this.modalFlag = false
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    queryOperationList(){
      queytOperationList().then(({data})=>{
        if (data && data.code === 0) {
          this.operationList = data.rows
        }
      }).catch((error)=>{
        console.log("失败")
        console.log(error)
      })
    },
    deleteData(row){
      this.$confirm(`确认删除?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        deleteUserDefaultOperation(row).then(({data})=>{
          if (data.code==0){
            this.$message.success("删除成功")
            this.handleQuery()
          }
        }).catch()
      })

    },
    // 获取用户选择列表
    queryUserList () {
      getAllUserList(this.userData).then(({data}) => {
        if (data && data.code === 0) {
          this.userDataList = data.rows
          this.userFlag = true
        }else {
          this.$alert(data.msg, '错误', {
            confirmButtonText: '确定'
          })
        }
      })
    },
    addmoadl(){
      this.modalData = {
        username: '',
        operation:'',
        bu: '',
      }
      this.ifUsernameExist  = 0
      this.modalFlag = true
    },
    getRowData (row) {
      this.modalData.username = row.username
      this.modalData.userDisplay = row.userDisplay
      this.userFlag = false
    },
  },
  created () {
    // 查询主列表
    this.handleQuery()
    // 获取bu列表
    this.getSiteAndBuByUserName()
    this.queryOperationList()
  }
}
</script>

<template>
  <div class="box-container">
    <!--  查询条件-->
    <el-form :inline="true" label-position="top" :model="queryParams">
      <el-form-item :label="'BU'">
        <el-select v-model="queryParams.bu" placeholder="请选择" clearable>
          <el-option
            v-for = "i in userBuList"
            :key = "i.buNo"
            :label = "i.buDesc"
            :value = "i.buNo">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="'用户名'">
        <el-input v-model="queryParams.username" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'工序类型'">
<!--        <el-input v-model="queryParams.operation" clearable style="width: 120px"></el-input>-->
        <el-select v-model="queryParams.operation" clearable style="width: 120px">
          <el-option
            v-for = "i in operationList"
            :key = "i.code"
            :label = "i.description"
            :value = "i.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button  type="primary" @click="addmoadl()">新增</el-button>
      </el-form-item>
    </el-form>
    <!--  主表信息-->
    <div style="height: 90%">
      <el-table :data="dataList" border
                highlight-current-row
                height="100%" ref="table">
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <a @click="deleteData(scope.row)" type="primary" style="margin-left: 2px">{{'删除'}}</a>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item,index) in columns" :key="index"
          :sortable="item.columnSortable"
          :prop="item.columnProp"
          :header-align="item.headerAlign"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :align="item.align"
          :fixed="item.fixed===''?false:item.fixed"
          :min-width="item.columnWidth"
          :label="item.columnLabel">
        </el-table-column>
      </el-table>
    </div>
      <!--  分页信息-->
    <el-pagination
      style="margin-top: 5px"
      :current-page="queryParams.page"
      :page-sizes="[50, 100, 500, 1000]"
      :page-size="queryParams.pageCount"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!--  新增数据dialog-->
    <el-dialog title="新增记录" :visible.sync="modalFlag" width="495px">
      <el-form :inline="true" label-position="top" :model="modalData"  style="margin-left: 7px;margin-top: -5px;">
        <el-form-item label="BU" prop="bu">
          <el-select v-model="modalData.bu" placeholder="请选择"  style="width: 221px">
            <el-option
              v-for = "i in userBuList"
              :key = "i.buNo"
              :label = "i.sitename"
              :value = "i.buNo">
              <span style="float: left;width: 100px">{{ i.sitename }}</span>
              <span style="float: right; color: #8492a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size: 11px;width: 60px">
                {{ i.buDesc }}
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="'工序类型'">
          <el-select v-model="modalData.operation"  style="width: 221px">
            <el-option
              v-for = "i in operationList"
              :key = "i.code"
              :label = "i.description"
              :value = "i.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="'用户名'">
          <span style="cursor: pointer"  slot="label" @click="queryUserList"><a>用户名</a></span>
          <el-input v-model="modalData.username" readonly style="width: 221px"></el-input>
        </el-form-item>
        <el-form-item :label="'名称'">
          <el-input v-model="modalData.userDisplay" disabled style="width: 221px"></el-input>
        </el-form-item>
      </el-form>
      <el-footer style="height:40px;margin-top: 10px;text-align:center">
        <el-button type="primary" @click="saveModalData()">保 存</el-button>
        <el-button @click="modalFlag = false">取 消</el-button>
      </el-footer>
    </el-dialog>


<!--    用户选择dialog-->
    <el-dialog title="用户" :close-on-click-modal="false" v-drag :visible.sync="userFlag" width="520px">
      <div class="rq">
        <el-form :inline="true" label-position="top" :model="userData">
          <el-form-item :label="'用户名'">
            <el-input v-model="userData.username" clearable style="width: 120px"></el-input>
          </el-form-item>
          <el-form-item :label="'描述'">
            <el-input v-model="userData.userDisplay" clearable style="width: 120px"></el-input>
          </el-form-item>
          <el-form-item :label="' '">
            <el-button type="primary" @click="queryUserList">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :height="300"
          :data="userDataList"
          @row-dblclick="getRowData"
          border
          style="width: 100%;">
          <el-table-column
            v-for="(item,index) in userColomn" :key="index"
            :sortable="item.columnSortable"
            :prop="item.columnProp"
            :header-align="item.headerAlign"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :align="item.align"
            :fixed="item.fixed==''?false:item.fixed"
            :min-width="item.columnWidth"
            :label="item.columnLabel">
            <template slot-scope="scope">
              <span v-if="!item.columnHidden">{{scope.row[item.columnProp]}}</span>
              <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-footer style="height:40px;margin-top: 20px;text-align:center">
        <el-button type="primary" @click="userFlag=false">关闭</el-button>
      </el-footer>
    </el-dialog>

  </div>



</template>

<style scoped>

</style>