mes-admin-backend-ui/src/view/yunyin/shengchanguanli/components/addGongYi.vue

<template>
  <div>
    <!-- 新增工艺资料弹窗 -->
    <el-dialog v-model="visible" :before-close="()=> visible = false" style="width: 70%;margin: 8px auto" :title="'新增工艺资料'" destroy-on-close>
      <el-form>
        <div>
          <div style="display: flex; gap: 0px;">
            <el-form-item label="印件编号:"  class="mab" prop="keyOrder">
              <el-input v-model="form.yjno" id="印件编号" @keydown="add_gyzlent($event, '质量隐患', '印件编号', '工序编号')"  style="width: 100px;"/>
            </el-form-item>
            <el-form-item label="工序编号:" class="mab" prop="keyOrder" label-width=" 90">
              <el-input v-model="form['工序']"  id="工序编号" @keydown="add_gyzlent($event, '印件编号', '工序编号', '重点工序')"  style="width: 100px;"/>
            </el-form-item>
            <el-form-item label="重点工序:"  class="mab" prop="keyOrder" label-width=" 90">
              <el-select  v-model="form['重点工序']" id="重点工序"  @keydown="add_gyzlent($event, '', '重点工序', '开数')"  style="width: 130px;">
                <el-option value=""></el-option>
                <el-option value="重点工序">重点工序</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备选工序："  class="mab" prop="isBanciSelected" label-width=" 100">
              <el-checkbox v-model="form['备选工序']"></el-checkbox>
            </el-form-item>
            <el-form-item label="加工开数:"  class="mab" prop="keyOrder" label-width=" 100">
              <el-input  v-model="form['开数']"  style="width: 80px;" id="开数"  @keydown="add_gyzlent($event, '重点工序  ', '开数', '联数')" />
            </el-form-item>
            <el-form-item label="加工联数:"  class="mab" prop="keyOrder" label-width=" 80">
              <el-input  v-model="form['联数']"  style="width: 80px;" id="联数"  @keydown="add_gyzlent($event, '开数', '联数', '车间名称')" />
            </el-form-item>
          </div>
          <div style="display: flex; gap: 0px;">
            <el-form-item label="车间名称:"  class="mab" prop="keyOrder">
              <el-input v-model="form['车间名称']" id="车间名称" style="width: 140px;" @keydown="add_gyzlent($event, '联数', '车间名称', '工序名称')"/>
            </el-form-item>
            <el-form-item label="工艺名称:"  class="mab" prop="keyOrder" label-width=" 90">
              <el-input disabled v-model="form['工艺名称']"  style="width: 140px;"/>
            </el-form-item>
            <el-form-item label="工序名称:"  class="mab" prop="keyOrder" label-width=" 90">
              <el-input  v-model="form['工序名称']"  style="width: 300px;" id="工序名称"   @keydown="add_gyzlent($event, '车间名称', '工序名称', '设备编号')" />
            </el-form-item>
            <el-form-item label="计损色数"  class="mab" prop="keyOrder" label-width=" 80">
              <el-input  v-model="form['计损色数']" style="width: 90px;"/>
            </el-form-item>
          </div>
          <el-form-item label="设备编号:"  class="mab" prop="remark">
            <el-select v-model="form['设备编号']" multiple
                       id="设备编号"  @keydown="add_gyzlent($event, '工序名称', '设备编号', '工序损耗')"
                       style="flex: 1; height: auto;">
              <el-option
                  @keydown.tab.prevent="sbbhclick"
                  @click="sbbhclick"
                  v-for="(item, index) in gdzl_MachineList_address"
                  :key="index"
                  :label="item.split('-->')[0].trim()"
                  :value="item.split('-->')[0].trim()">
                {{ item }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工序损耗:"  class="mab" prop="keyOrder" >
            <el-input v-model="form['shdh']"  style="width: 10%;" id="工序损耗"  @keydown="add_gyzlent($event, '设备编号', '工序损耗', '装版工时')"/>
            <el-input disabled v-model="form['工序损耗名称']"  style="width: 88.7%;margin-left: 10px"/>
          </el-form-item>
          <div style="display: flex; gap: 0px;">
            <el-form-item label="损耗系数:"  class="mab" prop="keyOrder">
              <el-input  v-model="form['损耗系数']"  style="flex: 1;" />
            </el-form-item>
            <el-form-item label="难度系数"  class="mab" prop="keyOrder">
              <el-input  v-model="form['难度系数']"  style="flex: 1;" />
            </el-form-item>
            <el-form-item label="装版工时:"  class="mab" prop="keyOrder">
              <el-input  v-model="form['装版工时']"  style="flex: 1;" id="装版工时"  @keydown="add_gyzlent($event, '工序损耗', '装版工时', '排产小时产能')"/>
            </el-form-item>
            <el-form-item label="排产小时产能:"  class="mab" prop="keyOrder" label-width=" 120px">
              <el-input  v-model="form['小时产能']"  style="flex: 1;" id="排产小时产能"  @keydown="add_gyzlent($event, '装版工时', '排产小时产能', '备注')"/>
            </el-form-item>
            <el-form-item label="印刷方式"  class="mab" prop="keyOrder">
              <el-input disabled v-model="form['印刷方式']"  style="flex: 1;"/>
            </el-form-item>
            <el-form-item label="版距"  class="mab" prop="keyOrder">
              <el-input disabled v-model="form['版距']"  style="flex: 1;"/>
            </el-form-item>
          </div>
          <el-form-item label="工序备注:"  class="mab" prop="remark">
            <el-input  type="textarea" resize="none" v-model="form['备注']" rows="3" clearable   style="flex: 1;resize: none" id="备注"  @keydown="add_gyzlent($event, '排产小时产能', '备注', '质量要求')"/>
          </el-form-item>
          <el-form-item  label="质量要求:"  class="mab" prop="remark">
            <el-input  type="textarea" resize="none" v-model="form['质量要求']" rows="2" clearable   style="flex: 1;resize: both;" id="质量要求"  @keydown="add_gyzlent($event, '备注', '质量要求', '质量隐患')"/>
          </el-form-item>
          <el-form-item label="质量隐患:"  class="mab" prop="remark">
            <el-input  type="textarea" resize="none" v-model="form['质量隐患']" rows="2" clearable   style="flex: 1;" id="质量隐患"  @keydown="add_gyzlent($event, '质量要求', '质量隐患', '印件编号')"/>
          </el-form-item>
        </div>
      </el-form>

      <template #footer>
        <div class="dialog-footer" style="text-align: right;top: auto;">
          <el-button @click="add_gdgycloseDialog">取 消</el-button>
          <el-button type="primary"  @click="add_gdgyenterDialog">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="yjdisplay" :before-close="()=> yjdisplay = false" style="width: 800px;" :title="'可选列表'" destroy-on-close>
      <el-tree :data="yjList" :props="{children: 'children',label: 'name', value: 'no'}" @node-click="changeHandle"
               default-expand-all style="border: 1px solid #ececec; padding: 10px;height: 400px;overflow: auto;">
      </el-tree>
    </el-dialog>

    <el-dialog v-model="cjdisplay" :before-close="()=> cjdisplay = false" style="width: 800px;" :title="'车间选择'" destroy-on-close>
      <el-tree
          :data="cjList"
          :render-after-expand="false"
          @node-click="selectHandle"
          :props="{children: 'children',label: 'label', value: 'value'}"
          style="border: 1px solid #ececec; padding: 10px;height: 400px;overflow: auto;"
          node-key="value"
      >
      </el-tree>
<!--         :default-expanded-keys="['标准工艺']"-->
    </el-dialog>

<!--    工序损耗列表-->
    <el-dialog v-model="gxshdisplay" :before-close="()=> gxshdisplay = false" style="width: 800px;" :title="'工序损耗'" destroy-on-close>
      <el-tree
          :data="gxshList"
          :render-after-expand="false"
          @node-click="gxshselectHandle"
          :props="{children: 'children',label: 'label', value: 'value'}"
          style="border: 1px solid #ececec; padding: 10px;height: 400px;overflow: auto;"
          node-key="value"
          :default-expanded-keys="form['车间名称']"
      >
      </el-tree>
    </el-dialog>

  </div>
</template>

<script setup>
import {ref, reactive,onMounted} from 'vue'
import {
  gdzl_MachineList, PrintDetailList, WastageList, getDepartName, capacityList, ProcessDetailAdd, workOrderListDetail,
} from '@/api/yunyin/yunying'
import { ElMessage } from 'element-plus'
const form = reactive({})
const visible = ref(false)
const yjdisplay = ref(false)
const cjdisplay = ref(false)
const gxshdisplay = ref(false)
const id = ref()
const gxList = ref([])
const yjList = ref()
const cjList = ref([])
const gdzl_MachineList_address = ref()
import { useUserStore } from '@/pinia/modules/user'
const userStore = useUserStore()
const _username = ref('')
_username.value = userStore.userInfo.userName + '/' + userStore.userInfo.nickName
//新增工艺资料弹窗 键盘 input框跳转
const add_gyzlent = async (event,id1,id2,id3) => {
  if (id2==='印件编号' && event.key==='Tab' || id2 === '印件编号' && event.key=== 'Enter') {
    if(yjList.value !== undefined){
      const node = yjList.value.find(item => item.no ===form['yjno'])
      if (! node) {
        yjdisplay.value = true
      }
      document.getElementById(id3).focus()
    }
  }
  if (id2 === '车间名称' && event.key==='Tab') {
    document.getElementById(id3).focus()
    cjdisplay.value = true
  }
  if (id2 === '工序损耗' &&  event.key==='Tab') {
    if(form['车间名称']){
      await getGxshList();
    }
  }
  if (id2 === '工序名称' &&  event.key==='Tab') {
    console.log(213)
    if(form['工艺名称'] === undefined){
      form['工艺名称'] = '';
    }
    if(form['工序名称'] === undefined){
      form['工序名称'] = '';
    }
    form['工序损耗名称'] = `${form['工艺名称']} ${form['工序名称']}`;
  }
  if (event.keyCode === 13 || event.keyCode === 40) { // Enter 或向下箭头
    if(id3!=''){
      document.getElementById(id3).focus()
    }
  } else if (event.keyCode === 38) { // 向上箭头
    if(id1!=''){
      document.getElementById(id1).focus()
    }
  }else if (event.keyCode === 8) { // 删除箭头
    if(id1!='' && document.getElementById(id2).value==''){
      document.getElementById(id1).focus()
    }
  }else if (event.keyCode === 37) { // 向左箭头
    if(id1!='' && document.getElementById(id2).selectionStart==0){
      document.getElementById(id1).focus()
    }
  }else if (event.keyCode === 39) { // 向右箭头
    if(id3!='' && document.getElementById(id2).selectionStart == document.getElementById(id2).value.length){
      document.getElementById(id3).focus()
    }
  }
}

const open = async (gdbh, gxlist) => {
  Object.keys(form).forEach(key => {
    form[key] = '';
  });
  visible.value = true
  id.value = gdbh
  const res = await PrintDetailList({workOrder: id.value})
  const apiData = await getDepartName()
  console.log(apiData)
  function transformDataToTreeFormat(data) {
    return Object.entries(data).map(([key, value]) => {
      // key是车间名称，value是车间内的操作列表
      const children = Object.entries(value).map(([workshop, operations]) => ({
        label: workshop,
        children: operations.map(operation => ({
          label: operation,
          value: operation // 可以根据需要添加更多属性
        }))
      }));
      return { label: key, children };
    });
  }
  // 使用ref来管理转换后的数据
  cjList.value = ref(transformDataToTreeFormat(apiData.data));
  yjList.value = res.data
  gxList.value = gxlist
}

//工序损耗列表
const gxshList = ref([])
const getGxshList = async ()=>{
  const WastageList_data = await WastageList({process: form.工艺名称})
  console.log(WastageList_data)
  if(WastageList_data.data === null || WastageList_data.data === ''){
    form['shdh'] = '';
    ElMessage({
      type: 'warning',
      message: '未获取到工序损耗'
    })
  }
  form['shdh'] = WastageList_data.data
}
//点击工序损耗列表数据
const gxshselectHandle = async (node)=>{
  if(node.label2){
    form['shdh'] = node.value
    form['工序损耗名称'] = node.label2
    gxshdisplay.value = false
  }
}
const selectHandle = async (node)=>{
  console.log(node)
  if(node.value){
    form['工艺名称'] = node.value
    form['工序损耗名称'] = node.value
    cjdisplay.value = false
  }else{
    form['车间名称'] = node.label
    return false;
  }
  form['设备编号'] = []
  //通过车间名称查询机台
  const MachineList_jitai = await gdzl_MachineList({address:form['车间名称']});
  gdzl_MachineList_address.value = MachineList_jitai.data;
  form['shdh'] = ''
  //通过车间名称查询工序损耗
  await getGxshList()
}

const changeHandle = (v) => {
  const no = '0' + v.no
  let list = gxList.value.map(item => {
    const yj = item.split('-')[0]
    if (yj === no) return Number(item.split('-')[1])
  })
  form['yjno'] = v.no
  form['工序'] = (list.sort((a, b) => b-a)[0] + 1)
  yjdisplay.value = false
}
const _capacityListsbbh = ref(null)
const sbbhclick = () => {
  _capacityList();
}


const _capacityList = async () => {
  console.log(111)
  if(form['设备编号'] === ''){
    return false;
  }else{
    _capacityListsbbh.value = form['设备编号'].join(' ');
    const editProductedit_machine = await capacityList({machine:_capacityListsbbh.value});
    form['小时产能'] = editProductedit_machine.data;
  }

};

const sbbh = ref(null)
const gongdanziliao = ref(null)

//新增工艺资料确定
const add_gdgyenterDialog = async () => {
  if(!form['yjno']){
    ElMessage({ type: 'warning', message: '印件编号不能为空' });return;
  }
  if(!form['工序']){
    ElMessage({ type: 'warning', message: '工序编号不能为空' });return;
  }
  if(!form['车间名称']){
    ElMessage({ type: 'warning', message: '车间名称不能为空' });return;
  }
  if(!form['设备编号']){
    ElMessage({ type: 'warning', message: '设备编号不能为空' });return;
  }
  // console.log(form)
  sbbh.value = form['设备编号'].join(' ');
  const formattedData = {
    Gy0_gdbh: id.value,
    Gy0_方案: 'A',
    Gy0_yjno: form['yjno'] ? form['yjno'] : "",
    Gy0_gxh: form['工序'] ? form['工序'] : "",
    Gy0_gxmc:form['工艺名称'] ? form['工艺名称'] : "",
    Add_gxmc:form['工序名称'] ? form['工序名称'] : "",
    重点工序: form['重点工序'] ? form['重点工序'] : "",
    备选工序: form['备选工序'] ? "1" : "0",
    Gy0_sbbh: sbbh.value ? sbbh.value : "",
    Gy0_sbmc: "",
    Gy0_SITE: form['车间名称'] ? form['车间名称'] : "",
    Gy0_ks: form['开数'] ? form['开数'] : "",
    Gy0_ls: form['联数'] ? form['联数'] : "",
    Gy0_ms: form['计损色数'] ? form['计损色数'] : 0,
    Sys_id  : _username.value,
    工价系数: form['难度系数'] ? form['难度系数'] : 0,
    损耗系数: form['损耗系数'] ? form['损耗系数'] : 0,
    Gy0_shdh: form['shdh'] ? form['shdh'] : "",
    Gy0_Rate1: "",
    Gy0_辅助工时: form['装版工时'] ? form['装版工时'] : "",
    Gy0_小时产能: form['小时产能'] ? form['小时产能'] : "",
    工序备注: form['备注'] ? form['备注'] : "",
    质量要求: form['质量要求'] ? form['质量要求'] : "",
    质量隐患: form['质量隐患'] ? form['质量隐患'] : "",
  };
  console.log(formattedData)
  const ProcessDetailAdd_add = await ProcessDetailAdd(formattedData);
  console.log(ProcessDetailAdd_add)
  if (ProcessDetailAdd_add.code === 0) {
    ElMessage({type: 'success', message: '新增成功'})
    visible.value = false
    const workOrderListDetail_data = await workOrderListDetail({Gd_gdbh:id.value});
    gytableData.value = workOrderListDetail_data.data.processList;
  } else {
    ElMessage({type: 'error',message: '新增失败'})
  }
}
// 新增工艺资料取消
const add_gdgycloseDialog = () => {
  visible.value = false
}

defineExpose({ open })
</script>

<style scoped>

</style>