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

<script>
import {queryOperationForResourceList,
  saveOperationForResource,
  queytOperationList,
  queryResourceList,
  deleteOperationForResource,
  deleteOperationForResource2,
  getResourceDataOperationForResource,
  getSiteAndBuByUserName,
  queryResourceList2
} from "@/api/qc/qc.js"
import codelnotify from "../ecss/codelnotify.vue";
export default {
  name: 'OperationForResource',
  data () {
    return {
      queryParams: {
        page: 1,
        pageCount: 50,
        bu:'',
        operation: '',
        resource: ''
      },
      dataList: [],
      resourceDataList: [],
      total: 0,
      modalFlag: false,
      resourceFlag:false,
      resourceDataFlag:false,
      addResourceDataFlag:false,
      resourceData:{
        buDesc:'',
        operation:'',
        operationDesc:''
      },
      ifexist:0,
      resourData:{
        resourceId:'',
        resourceDesc:''
      },
      itemList1:[],
      itemSelections1:[],
      itemList2:[],
      itemSelections2:[],
      operationList:[],
      // resourceList:[],
      userBuList: [],
      modalData: {
        page: 1,
        pageCount: 50,
        operation: '',
        resource: '',
        resourceList: []
      },
      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: '',
        resourceList: []
      }
      this.addResourceDataFlag = false
      this.modalFlag = true
    },
    addResourceData(){
      this.addResourceDataFlag = true
      this.modalData = {
        page: 1,
        pageCount: 50,
        resource: '',
        bu: this.resourceData.bu,
        operation: this.resourceData.operation
      }
      this.modalFlag = true
    },
    async saveModalData(){
      if (this.modalData.bu==null ||this.modalData.bu==''){
        this.$message.warning("请选择BU！")
        return
      }
      if (this.modalData.operation==null ||this.modalData.operation==''){
        this.$message.warning("工序类别不能为空！")
        return
      }
      if (this.modalData.resourceList.length < 1){
        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("保存成功")
          if (this.addResourceDataFlag){
            let param = {
              bu: this.resourceData.bu,
              operation: this.resourceData.operation
            }
            getResourceDataOperationForResource(param).then(({data})=>{
              if (data && data.code==0) {
                this.resourceDataList = data.rows
              }
            })
          }
        }
      }).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)
      })
    },
    deleteData3(row){
      this.modalData.resourceList = this.modalData.resourceList.filter(item => row.resourceId != item.resourceId)
    },
    queryResourceList(){
      let resourceDataList;
      if (this.modalData.bu==null ||this.modalData.bu==''){
        this.$message.warning("请选择BU！")
        return
      }
      if (this.modalData.operation==null ||this.modalData.operation==''){
        this.$message.warning("工序类别不能为空！")
        return
      }
      this.resourceData.bu = this.modalData.bu
      this.resourceData.operation = this.modalData.operation
      getResourceDataOperationForResource(this.resourceData).then(({data})=>{
        if (data && data.code==0) {
          resourceDataList = data.rows
          // this.itemList2 = resourceDataList
        }
      })
      this.resourData.site = this.modalData.bu.split('_')[0]
      queryResourceList2(this.resourData).then(({data}) => {
        if (data.code == 0) {
          let itemList = data.rows
          if (this.itemList2.length > 0) {
            itemList = itemList.filter(item =>
              !this.itemList2.some(i => i.resourceId === item.resourceId)
            )
          }
          if (resourceDataList != null && resourceDataList.length > 0){
            itemList = itemList.filter(item =>
              !resourceDataList.some(i => i.resourceId === item.resourceId)
            )
          }
          this.itemList1 = itemList
          this.itemList2 = this.modalData.resourceList
          this.resourceFlag = true
        }
      }).catch()
    },
    // 添加矩阵
    addItem () {
      if (this.itemSelections1 == null || this.itemSelections1.length === 0) {
        this.$message.warning('请选择可选机台！')
        return
      }
      let resourceId = []
      this.itemSelections1.forEach(data => {
        resourceId.push(data.resourceId)
      })
      this.itemList1 = this.itemList1.filter(item =>
        !resourceId.includes(item.resourceId)
      )
      this.itemList2.push(...this.itemSelections1)
      this.$set(this.modalData, 'resourceList', this.itemList2)
    },

    // 删除矩阵
    deleteItem () {
      if (this.itemSelections2 == null || this.itemSelections2.length === 0) {
        this.$message.warning('请选择已有机台！')
        return
      }
      this.itemList1.push(...this.itemSelections2)
      this.itemList2 = this.itemList2.filter(item => !this.itemSelections2.includes(item))
      this.modalData.resourceList = this.itemList2
    },
    // 可选项目
    itemClickRow1 (row) {
      this.$refs.itemTable1.toggleRowSelection(row)
    },

    // 已有项目
    itemClickRow2 (row) {
      this.$refs.itemTable2.toggleRowSelection(row)
    },
    selectionItem1 (val) {
      this.itemSelections1 = val
    },

    selectionItem2 (val) {
      this.itemSelections2 = val
    },
    selectFlag () {
      return true
    },
    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()
      })

    },
    deleteData2(row){
      deleteOperationForResource2(row).then(({data})=>{
        if (data&&data.code == 0){
          this.$message.success("删除成功")
          let param = {
            bu: this.resourceData.bu,
            operation: this.resourceData.operation
          }
          getResourceDataOperationForResource(param).then(({data})=>{
            if (data && data.code==0) {
              this.resourceDataList = data.rows
            }
          })
        }
      })
    },
    getResourceData(row){
      this.resourceData.bu = row.bu
      this.resourceData.buDesc = row.buDesc
      this.resourceData.operation = row.operation
      this.resourceData.operationDesc = row.operationDesc
      getResourceDataOperationForResource(row).then(({data})=>{
        if (data && data.code==0) {
          this.resourceDataList = data.rows
          this.resourceDataFlag = true
        }
      })
    }
  },
  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
                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>
            <a @click="getResourceData(scope.row,1)" 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="请选择" :disabled="addResourceDataFlag" 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" :disabled="addResourceDataFlag"  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-form-item>-->
<!--        <el-form-item :label="'机台名称'">-->
<!--          <el-input v-model="modalData.resourceDesc" disabled style="width: 342px"></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="modalData.resourceList"
        border
        style="width: 100%;">
        <el-table-column
          prop="resourceId"
          label="机台编码">
        </el-table-column>
        <el-table-column
          prop="resourceDesc"
          label="机台名称">
        </el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <a @click="deleteData3(scope.row)" type="primary" style="margin-left: 2px">{{'删除'}}</a>
          </template>
        </el-table-column>
      </el-table>
      <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>

    <!-- 机台详情->快速新增 -->
    <el-dialog title="机台新增"  :close-on-click-modal="false" v-drag :visible.sync="resourceFlag" width="900px">
      <div style="font-size: 12px">
        <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>
      </div>
      <el-container style="margin-top: 0px;">
        <el-main style="width: 400px;padding: 0px">
          <span style="font-size: 12px" >可选机台：</span>
          <el-table
            height="400px"
            :data="itemList1"
            border
            ref="itemTable1"
            @row-click="itemClickRow1"
            @selection-change="selectionItem1"
            highlight-current-row
            style="width: 100%">
            <el-table-column
              type="selection"
              header-align="center"
              align="center"
              :selectable="selectFlag"
              width="50">
            </el-table-column>
            <el-table-column
              prop="resourceId"
              header-align="center"
              align="center"
              min-width="110"
              label="机台编码">
            </el-table-column>
            <el-table-column
              prop="resourceDesc"
              header-align="center"
              align="center"
              min-width="170"
              label="机台名称">
            </el-table-column>
          </el-table>
        </el-main>
        <el-main style="width: 100px;padding: 0px">
          <div style="margin-top: 182px;margin-left: 18px">
            <el-button type="primary" @click="addItem()">添加>></el-button>
          </div>
          <div style="margin-top: 15px;margin-left: 18px">
            <el-button type="primary" @click="deleteItem()">删除<<</el-button>
          </div>
        </el-main>
        <el-main style="width: 400px;padding: 0px">
          <span style="font-size: 12px">选中机台：</span>
          <el-table
            height="400px"
            :data="itemList2"
            border
            ref="itemTable2"
            @row-click="itemClickRow2"
            @selection-change="selectionItem2"
            highlight-current-row
            style="width: 100%">
            <el-table-column
              type="selection"
              header-align="center"
              align="center"
              :selectable="selectFlag"
              width="50">
            </el-table-column>
            <el-table-column
              prop="resourceId"
              header-align="center"
              align="center"
              min-width="110"
              label="机台编码">
            </el-table-column>
            <el-table-column
              prop="resourceDesc"
              header-align="center"
              align="center"
              min-width="170"
              label="机台名称">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
      <el-footer style="height:40px;margin-top: 20px;text-align:center">
        <el-button type="primary" @click="resourceFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>

    <!--    新增时机台选择dialog-->
<!--    <el-dialog title="选择机台" :close-on-click-modal="false" v-drag :visible.sync="resourceFlag1" 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>-->

    <!--    机台详细信息-->
    <el-dialog title="机台信息" :close-on-click-modal="false" v-drag :visible.sync="resourceDataFlag" width="520px">
      <div class="rq">
        <el-form :inline="true" label-position="top">
          <el-form-item :label="'BU'">
            <el-input v-model="resourceData.buDesc" disabled style="width: 120px"></el-input>
          </el-form-item>
          <el-form-item :label="'工序编码'">
            <el-input v-model="resourceData.operation" disabled style="width: 120px"></el-input>
          </el-form-item>
          <el-form-item :label="'工序名称'">
            <el-input v-model="resourceData.operationDesc" disabled style="width: 120px"></el-input>
          </el-form-item>
<!--          <el-form-item :label="' '">-->
<!--            <el-button type="primary" @click="addResourceData">新增</el-button>-->
<!--          </el-form-item>-->
        </el-form>
        <el-table
          :height="300"
          :data="resourceDataList"
          border
          style="width: 100%;">
          <el-table-column
            prop="resource"
            label="机台编码">
          </el-table-column>
          <el-table-column
            prop="resourceDesc"
            label="机台名称">
          </el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <a @click="deleteData2(scope.row)" type="primary" style="margin-left: 2px">{{'删除'}}</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-footer style="height:40px;margin-top: 20px;text-align:center">
        <el-button type="primary" @click="resourceDataFlag=false">关闭</el-button>
      </el-footer>
    </el-dialog>


  </div>
</template>

<style scoped>

</style>