matrix_spraying_vue/src/views/matrixCraft/index.vue

<template>
  <main class="spurt_print">
    <div class="spurt_print_btn ml-[3rem]">
      <el-button type="primary" @click='addCraft'>新增工艺</el-button>
      <el-button @click="onEdit">编辑</el-button>
      <el-button @click="onDel">删除</el-button>
      <el-input
        class="ml-[20px]"
        v-model="searchForm.matrixCraftName"
        style="width: 240px"
        placeholder="工艺名称"
        clearable
      />

      <el-select
        v-model="searchForm.matrixId"
        placeholder="选择基质"
        no-data-text="无数据" 
        clearable
        style="width: 120px">
        <el-option
          v-for="item in settingStore.matrixList"
          :key="item.id"
          :label="item.name"
          :value="item.id" />
      </el-select>

      <el-button @click="getCraftList">搜索</el-button>
    </div>
    <div class="w-[90vw] ml-[2rem] mt-[2rem] h-[70vh] craft_table">
      <el-table empty-text="无数据" :data="tableData" stripe style="width: 100%" ref="craftTableRef" v-loading="loading" >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="matrixName" label="基质名称" width="100" />
        <el-table-column prop="name" label="工艺名称"/>
        <el-table-column prop="routeType" label="喷涂路线" width="100">
          <template v-slot="scope">
            <img v-if="scope.row.routeType === 1" :src="route_h" width="20px" height="20px" alt="icon"/>
			      <img v-else :src="route_h" width="20px" height="20px" alt="icon"/>
          </template>
        </el-table-column>
        <el-table-column prop="height" label="喷涂高度" width="100" />
        <el-table-column prop="nitrogenFlowVelocity" label="氮气流速" width="100" />
        <el-table-column prop="nitrogenAirPressure" label="氮气气压" width="100" />
        <el-table-column prop="matrixFlowVelocity" label="基质流速" width="100" />
        <el-table-column prop="voltage" label="电压" width="100" />
        <el-table-column prop="movementSpeed" label="移速" width="100" />
        <el-table-column prop="space" label="行间距" width="100" />
      </el-table>
    </div>
    
  </main>
  <footer class="footer">
    <el-pagination background layout="prev, pager, next" :total="total" />
  </footer>

  <el-dialog v-model="sprayVisible">
    <div>
      <div class="mt-[10px]">
        <SprayParam :sprayParam='defaultSprayData' @save="onSaveCraft">
          <span class="self-center text-right text-primary font-medium">基质名称</span>
          <el-select
									v-model="defaultSprayData.matrixId"
									placeholder="选择"
									style="width: 120px"
									@change="onMatrixChange">
									<el-option
										v-for="item in settingStore.matrixList"
										:key="item.id"
										:label="item.name"
										:value="item.id" />
								</el-select>
          <span class="self-center text-right text-primary font-medium"></span>

          <span class="self-center text-right text-primary font-medium">工艺名称</span>
          <input
          type="text"
          v-model.number="defaultSprayData.name"
          class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
          <span class="self-center text-right text-primary font-medium"></span>
        </SprayParam>
      </div>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
  import { ref, watch, onMounted } from 'vue'
  import { getList, createCraft, updateCraft, delCraft} from '@/services/matrix/craft'
  import { useSettingStore } from '@/stores/setting'
  import SprayParam from '@/components/SprayParam.vue'
  import type { CraftItem } from "@/services/matrix/type";
  import type { WorkType } from "@/services/globalCmd/cmdTypes";
  import { ElMessage, ElMessageBox } from "element-plus";
  import route_h from "@/assets/route_horizontal.png";
  let total = ref()
  const settingStore = useSettingStore()
  let sprayVisible = ref(false)
  let tableData = ref<any>([])
  let operType = ref('add')
  let loading = ref(false)
  const searchForm = ref({
    matrixCraftName:undefined,
    matrixId:undefined,
  })
  const defaultCraft: CraftItem = {
    id: 1,
    name: '',
    matrixId: 0,
    routeType: 1,
    space: 0,
    nitrogenFlowVelocity: 0,
    nitrogenAirPressure: 0,
    matrixFlowVelocity: 0,
    voltage: 0,
    needPower: false,
    height: 0,
    movementSpeed: 0,
    position: [],
  };

  const defaultSprayData = ref<CraftItem>(defaultCraft);
  watch(()=>settingStore.matrixList, (newVal)=>{
    if(newVal && newVal.length){
      defaultSprayData.value.matrixId = newVal[0].id
    }
  })
  onMounted(()=>{
    tableData.value = settingStore.matrixList;
    getCraftList()
  })


  //工艺列表
  const getCraftList = () => {
    const params = {
      pageNum:1,
      pageSize:10,
      ...searchForm.value
    }
    
    loading.value = true;
    getList(params).then((res:any)=>{
      tableData.value = res.data.list
      total.value = res.data.total
    }).finally(()=>{
      loading.value = false;
    })
  }

  const addCraft = () => {
    sprayVisible.value = true;
    operType.value = 'add'
  }

  const craftTableRef = ref()
  const onEdit = () => {
    const selectRows = craftTableRef.value.getSelectionRows()
    if(selectRows.length !== 1){
      ElMessage.error('请选择一条数据进行编辑')
      return;
    }
    const sel = selectRows[0]
    operType.value = 'edit'
    defaultSprayData.value = sel
    sprayVisible.value = true;
  }

  const onDel = () => {
    const selectRows = craftTableRef.value.getSelectionRows()
    if(!selectRows.length){
      ElMessage.error('请选择要删除的数据')
      return;
    }
    const ids = selectRows.map((item:any) => item.id)
    ElMessageBox.confirm('确认删除此条数据吗?','提示',{
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(()=>{
      delCraft(ids.join(',')).then(res => {
        if(res.success){
          ElMessage.success("删除成功")
          getCraftList()
        }else{
          ElMessage.error(res.msg)
        }
        
      })
    })
  }

  const onSaveCraft = (craftData:WorkType) => {
    //校验必填
    const {
      routeType,
      space,
      nitrogenFlowVelocity,
      nitrogenAirPressure,
      matrixFlowVelocity,
      voltage,
      height,
      movementSpeed,
      position,
    } = craftData;
    if(!defaultSprayData.value.matrixId){
      ElMessage.error('请选择基质名称')
      return;
    }
    if(!defaultSprayData.value.name){
      ElMessage.error('请输入工艺名称')
      return;
    }

    if(!routeType){
      ElMessage.error('请选择喷涂 ')
      return;
    }
    if(!movementSpeed){
      ElMessage.error('请输入移动速度 ')
      return;
    }
    
    if(operType.value === 'add'){
      //@ts-ignore
      createCraft(craftData).then(res=>{
        if(res.success){
          ElMessage.success('新增成功') 
          getCraftList()
          sprayVisible.value = false;
        }
      })
    }else if(operType.value === 'edit'){
      //@ts-ignore
      updateCraft(craftData).then(res=>{
        if(res.success){
          ElMessage.success('编辑成功') 
          getCraftList()
          sprayVisible.value = false;
        }
      })
    }
    
  }

  function onMatrixChange(val: number) {
    defaultSprayData.value.matrixId = val
  }

</script>
<style lang="scss" scoped>
  .el-button--primary{
    background: linear-gradient(90deg, #0657c0 24%, #096ae0 101%);;
  }
  .spurt_print{
    height: 75vh;
    .spurt_print_btn{
      margin-top: 2rem;
    }
  }

  .footer{
    display: flex;
    justify-content: end;
    position: relative;

    .pagination{
      position: absolute;
      bottom: 0;
      right: 3rem;
    }
  }

  .craft_table{
    height: 65vh;
    background: #ffffff;
  }

</style>