chenlu
8 小时以前 33dbc6a161554f3a897f9e9273feb4f2c1b47381
north-glass-erp/northglass-erp/src/views/sd/basicData/SearchProcessAttributeConfig.vue
New file
@@ -0,0 +1,252 @@
<script setup>
import {onMounted, reactive, ref} from "vue";
import {VXETable} from "vxe-table";
import {ElMessage} from "element-plus";
import request from "@/utils/request"
import CreateBasicData from "@/views/sd/basicData/CreateBasicData.vue"
import {useRouter,useRoute} from "vue-router"
import {useI18n} from "vue-i18n"
import {changeFilterEvent, filterChanged} from "@/hook";
const { t } = useI18n()
let dialogTableVisible = ref(false)
const router = useRouter()
const xGrid = ref()
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 30},//鼠标移动或选择高亮
  id: 'OrderList',
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    //remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },
  //表头参数
  columns:[
    {title: t('basicData.operate'), width: 110, slots: { default: 'button_slot' },fixed:"left",},
    {type: 'seq', title: t('basicData.number'), width: 80 ,fixed:"left",},
    {field:'level',title: t('orderBasicData.level')},
    {field:'processType',title: t('orderBasicData.alias'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field:'processName',title: t('orderBasicData.name'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field:'inputType',title: t('machine.type')},
    {field:'createTime',title: t('basicData.creationTime')}
  ],
  //表头按钮
  toolbarConfig: {
    buttons: [
      {'code': 'add', 'name': t('basicData.insert'),status: 'primary'},
    ],
    // import: false,
    // export: true,
    // print: true,
    zoom: true,
    custom: true
  },
})
const rowIndex = ref(null)
const glassType = reactive([
  {
    value:1,
    label:t('orderBasicData.firstLevel')
  },
  {
    value: 2,
    label: t('orderBasicData.towLevel'),
    children: []
  }
])
const submit = ref({
  glassLevel:[null,null],
  inputType:null,
  processName:null,
  processType:null,
  type:null,
  id:null
})
onMounted(()=>{
  request.get(`/basicGlassType/findAllConfig`).then(res => {
    xGrid.value.reloadData(res.data)
    console.log(res.data)
  })
  request.get(`/basicGlassType/getOneLevelListMapConfig`).then(res => {
    glassType[1].children = res.data
  })
})
const gridEvents = {
  toolbarButtonClick ({ code }) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'add': {
          dialogTableVisible.value = true
          break
        }
      }
    }
  }
}
const getTableRow =  (row,type) => {
  switch (type) {
    case 'edit': {
      rowIndex.value = row
      submit.value.glassLevel = row.level===1?[parseInt(row.level)]:[parseInt(row.level),row.belong]
      submit.value.processType = row.processType
      submit.value.processName = row.processName
      submit.value.inputType = row.inputType
      submit.value.id = row.id
      dialogTableVisible.value = true
      break
    }
    case 'delete': {
      request.get(`/basicGlassType/deleteProcessAttributeConfig/${row.id}`).then((res) => {
        if(res.code==='200' && res.data===true){
          ElMessage.success(t('searchOrder.msgDeleteSuccess'))
          router.push({
            path:'/main/orderBasicData/searchProcessAttributeConfig',
            query:{random:Math.random()
            }
          })
        }else{
          ElMessage.warning(t('searchOrder.msgDeleteFail'))
        }
      })
      break
    }
  }
}
const saveBasicData =  (type) =>{
  if(submit.value.glassLevel[0]===null){
    ElMessage.warning(t('orderBasicData.please1'))
    return
  }
  if(submit.value.processName===null||submit.value.processName===""){
    ElMessage.warning(t('orderBasicData.please2'))
    return
  }
  if(submit.value.processType===null||submit.value.processType===""){
    ElMessage.warning(t('orderBasicData.please3'))
    return
  }
  submit.value.type = type
  request.post(`/basicGlassType/addConfig`, submit.value).then(res => {
    if (res.code==='200') {
      ElMessage.success(t('basicData.msg.saveSuccess'))
      router.push({
        path:'/main/orderBasicData/searchProcessAttributeConfig',
        query:{random:Math.random()
        }
      })
    }
  })
}
</script>
<template>
  <div  style="width: 100%;height: 100%">
    <div class="main-table">
    <vxe-grid
        class="mytable-scrollbar"
        height="100%"
        ref="xGrid"
        v-bind="gridOptions"
        v-on="gridEvents"
    >
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">{{ $t('basicData.edit') }}</el-button>
        <el-popconfirm @confirm="getTableRow(row,'delete')" :title="$t('searchOrder.deleteConfirm')">
          <template #reference>
            <el-button  link type="primary" size="small">{{ $t('basicData.delete') }}</el-button>
          </template>
        </el-popconfirm>
      </template>
      <template #num1_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <input
                type="type"
                v-model="option.data"
                @keyup.enter.native="$panel.confirmFilter()"
                @input="changeFilterEvent($event, option, $panel)"/>
          </div>
        </div>
      </template>
    </vxe-grid>
  </div>
    <el-dialog
        v-model="dialogTableVisible"
        destroy-on-close
        style="width: 20%;height:50% ">
      <el-row>
        <el-cascader
            v-model="submit.glassLevel"
            :options="glassType"
            clearable
            :placeholder="$t('processCard.pleaseSelect')"
            :disabled="rowIndex"
        />
      </el-row>
      <el-row>
        {{ $t('orderBasicData.alias') }}:<el-input style="width: 250px;" v-model="submit.processType"/>
      </el-row>
      <el-row>
        {{ $t('orderBasicData.name') }}:<el-input style="width: 250px;" v-model="submit.processName"/>
      </el-row>
      <el-row>
        {{ $t('machine.type') }}:<el-input style="width: 250px;" v-model="submit.inputType"/>
      </el-row>
      <el-row>
        <el-button v-if="!rowIndex" @click="saveBasicData('add')"   type="primary">{{ $t('basicData.insert') }}</el-button>
        <el-button v-else @click="saveBasicData('update')" type="primary">{{ $t('basicData.update') }}</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>
<style scoped>
.el-row{
  margin-top: 10px;
}
.head{
  width: 100%;
  height: 35px;
}
.main-table{
  width: 100%;
  height: calc(100% - 0px);
}
</style>