boying-vue/src/views/modules/qc/OperationForResource.vue

<script>
import {queryOperationForResourceList,
  saveOperationForResource,
  queytOperationList,
  queryResourceList,
  deleteOperationForResource,
  getSiteAndBuByUserName,
  queryResourceList2
} from "@/api/qc/qc.js"
export default {
  name: 'OperationForResource',
  data () {
    return {
      queryParams: {
        page: 1,
        pageCount: 50,
        bu:'',
        operation: '',
        resource: ''
      },
      dataList: [],
      total: 0,
      modalFlag: false,
      resourceFlag:false,
      ifexist:0,
      resourData:{
        resourceId:'',
        resourceDesc:''
      },
      operationList:[],
      resourceList:[],
      userBuList: [],
      modalData: {
        page: 1,
        pageCount: 50,
        operation: '',
        resource:''
      },
      columns: [
        {
          userId: this.$store.state.user.name,
          functionId: 200101106,
          serialNumber: '200101106Table1Operation',
          tableId: '200101106Table1',
          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: '200101106Table1Operation',
          tableId: '200101106Table1',
          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: 200101106,
          serialNumber: '200101106Table1Operation',
          tableId: '200101106Table1',
          tableName: '用户默认工序设置表',
          columnProp: 'operationDesc',
          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: '200101107Table1Resource',
          tableId: '200101107Table1',
          tableName: '用户默认工序设置表',
          columnProp: 'resource',
          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: '200101107Table1Resource',
          tableId: '200101107Table1',
          tableName: '用户默认工序设置表',
          columnProp: 'resourceDesc',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '机台名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        }
      ],
      resourceColomn: [
        {
          userId: this.$store.state.user.name,
          functionId: 200101106,
          serialNumber: '200101106Table1Operation',
          tableId: '200101106Table1',
          tableName: '机台基础信息表',
          columnProp: 'resourceId',
          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: '200101106Table1Operation',
          tableId: '200101106Table1',
          tableName: '机台基础信息表',
          columnProp: 'resourceDesc',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '机台名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        }
      ]

    }
  },
  methods: {
    handleQuery () {
      queryOperationForResourceList(this.queryParams).then(({data}) => {
        if (data.code==0||data.code==3) {
          this.dataList = data.rows
          this.total = data.total
        }
      }).catch((errer) => {
        this.$message.error(errer)
      })
    },
    // 获取用户的bu
    getSiteAndBuByUserName () {
      let tempData = {
        username: this.$store.state.user.name,
      }
      getSiteAndBuByUserName(tempData).then(({data}) => {
        if (data.code === 0) {
          this.userBuList = data.rows
        }
      })
    },
    addDialog () {
      this.modalData = {
        page: 1,
        pageCount: 50,
        resource: '',
        operation:''
      }
      this.modalFlag = true
    },
    async saveModalData(){
      this.ifexist=0
      if (this.modalData.operation==null ||this.modalData.operation==''){
        this.$message.warning("工序类别不能为空！")
        return
      }
      if (this.modalData.resource==null ||this.modalData.resource==''){
        this.$message.warning("机台编码不能为空！")
        return
      }
       await queryOperationForResourceList(this.modalData).then(({data})=>{
        if (data.code==3){
          this.$message.warning("该工序和机台存在记录")
          this.ifexist = data.code
        }
      }).catch()
      if (this.ifexist==3){
        return
      }
      saveOperationForResource(this.modalData).then(({data})=>{
        if (data.code==0){
          this.$message.success("保存成功")
        }
      }).catch()
      this.modalFlag = false
      this.handleQuery()
    },
    queryOperationList(){
      queytOperationList().then(({data})=>{
        if (data && data.code === 0) {
          this.operationList = data.rows
        }
      }).catch((error)=>{
        console.log("失败")
        console.log(error)
      })
    },
    queryResourceList(){
      // 原下拉列表查询
      // queryResourceList().then(({data})=>{
      //   if (data.code==0){
      //     this.resourceList = data.rows
      //   }
      // }).catch()
      this.resourceFlag = true
      queryResourceList2(this.resourData).then(({data}) => {
        if (data.code == 0) {
          this.resourceList = data.rows
        }
      }).catch()
    },
    getRowData (row) {
      this.modalData.resource = row.resourceId
      this.modalData.resourceDesc = row.resourceDesc
      this.resourceFlag = false
    },
    deleteData(row){
      this.$confirm(`确认删除?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        deleteOperationForResource(row).then(({data})=>{
          if (data.code==0){
            this.$message.success("删除成功")
            this.handleQuery()
          }
        }).catch()
      })

    }
  },
  created () {
    // 查询主列表
    this.handleQuery()
    //查询工序类别信息
    this.queryOperationList()
    // 获取用户的 site 和 bu
    this.getSiteAndBuByUserName()
  }
}
</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 style="width: 80px">
          <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.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-input v-model="queryParams.resource" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button  type="primary" @click="addDialog()">新增</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="queryResourceList"><a>机台编码</a></span>
          <el-input v-model="modalData.resource"  readonly style="width: 100px"></el-input>
<!--          <el-select v-model="modalData.resource"  filterable  style="width: 100px">-->
<!--            <el-option-->
<!--              v-for = "i in resourceList"-->
<!--              :key = "i.resourceId"-->
<!--              :label = "i.resourceDesc"-->
<!--              :value = "i.resourceId">-->
<!--            </el-option>-->
<!--          </el-select>-->
        </el-form-item>
        <el-form-item :label="'机台名称'">
          <el-input v-model="modalData.resourceDesc" disabled style="width: 342px"></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="resourceFlag" width="520px">
      <div class="rq">
        <el-form :inline="true" label-position="top" :model="resourData">
          <el-form-item :label="'机台编码'">
            <el-input v-model="resourData.resourceId" clearable style="width: 120px"></el-input>
          </el-form-item>
          <el-form-item :label="'机台名称'">
            <el-input v-model="resourData.resourceDesc" clearable style="width: 120px"></el-input>
          </el-form-item>
          <el-form-item :label="' '">
            <el-button type="primary" @click="queryResourceList">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :height="300"
          :data="resourceList"
          @row-dblclick="getRowData"
          border
          style="width: 100%;">
          <el-table-column
            v-for="(item,index) in resourceColomn" :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="resourceFlag=false">关闭</el-button>
      </el-footer>
    </el-dialog>


  </div>
</template>

<style scoped>

</style>