gphm_web/src/views/manage/orderConfig/index.vue

<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listOrderConfigApi" :init-param="initParam" :data-callback="dataCallback">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" v-auth="['manage:orderConfig:add']" :icon="CirclePlus" @click="handleAdd()"> 新增 </el-button>
        <el-button type="primary" v-auth="['manage:orderConfig:import']" :icon="Upload" plain @click="batchAdd"> 导入 </el-button>
        <el-button type="primary" v-auth="['manage:orderConfig:export']" :icon="Download" plain @click="downloadFile"> 导出 </el-button>
        <el-button
          type="danger"
          v-auth="['system:user:remove']"
          :icon="Delete"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds)"
        >
          批量删除
        </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="View" v-auth="['manage:orderConfig:query']" @click="openDialog(3, '指令配置查看', scope.row)">
          查看
        </el-button>
        <el-button type="primary" link :icon="EditPen" v-auth="['manage:orderConfig:edit']" @click="openDialog(2, '指令配置编辑', scope.row)">
          编辑
        </el-button>
        <el-button type="primary" link :icon="Delete" v-auth="['manage:orderConfig:remove']" @click="deleteOrderConfig(scope.row)"> 删除 </el-button>
      </template>

      <el-dialog v-model="dialog.visible" :title="dialog.title" destroy-on-close append-to-body width="600px">
        <el-form ref="orderFormRef" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="指令编码" prop="orderCode">
            <el-input v-model="form.orderCode" placeholder="请输入指令编码" />
          </el-form-item>
          <el-form-item label="指令名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入指令名称" />
          </el-form-item>
          <el-form-item label="指令类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择指令类型">
              <el-option v-for="item in types" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="form.type !== '10'" label="架次" prop="sortie">
            <el-select v-model="form.sortie" placeholder="请选择架次">
              <el-option v-for="item in sortieOptions" :key="item.sortieNumber" :label="item.sortieNumber" :value="item.sortieNumber" />
            </el-select>
          </el-form-item>
          <el-form-item v-else label="维修内容" prop="instId">
            <el-select v-model="form.instId" placeholder="请选择维修内容">
              <el-option v-for="item in instOptions" :key="item.id" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="description">
            <el-input v-model="form.description" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="closeDialog">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </ProTable>
    <FormDialog ref="formDialogRef" />
    <ImportExcel ref="dialogRef" />
    <HighlightDialog ref="hiDialogRef" />
  </div>
</template>

<script setup lang="tsx" name="OrderConfig">
import { ref, reactive, onMounted } from 'vue'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import { ElMessage, ElMessageBox } from 'element-plus'
import ProTable from '@/components/ProTable/index.vue'
import ImportExcel from '@/components/ImportExcel/index.vue'
import FormDialog from '@/components/DialogOld/form.vue'
import HighlightDialog from '@/components/HighlightDialog/index.vue'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { Delete, EditPen, Download, Upload, View, CirclePlus } from '@element-plus/icons-vue'
import {
  listOrderConfigApi,
  delOrderConfigApi,
  addOrderConfigApi,
  updateOrderConfigApi,
  importTemplateApi,
  importDataApi,
  exportApi,
  getOrderConfigApi,
  orderConfigXmlApi
} from '@/api/modules/manage/orderConfig'
import { getDictsApi } from '@/api/modules/system/dictData'
import { listSortieAllApi } from '@/api/modules/manage/sortie'
import { listInstructionInfoApi } from '@/api/modules/manage/instructionInfo'
import { generateOrderNumber } from '@/utils/common'
// ProTable 实例
const proTable = ref<ProTableInstance>()

let types = ref<any[]>([])
onMounted(async () => {
  getDictsApi('order_type').then(res => {
    types.value = res.data
  })
  let sortie = await listSortieAllApi({})
  sortieOptions.value = sortie.data
  let inst = await listInstructionInfoApi({})
  instOptions.value = inst.data.data.map(item => {
    return { value: item.id, label: `${item.content}-` + (item.attribute == '1' ? '开' : '关') }
  })
})

const initFormData = {
  orderCode: generateOrderNumber('INST'),
  name: '',
  type: '',
  instId: '',
  sortie: '',
  description: ''
}
const initParam = reactive({})
let form = ref({ ...initFormData })
const rules = reactive({
  orderCode: [{ required: true, message: '指令编码不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '指令名称不能为空', trigger: 'blur' }],
  type: [{ required: true, message: '指令类型不能为空', trigger: 'change' }],
  sortie: [{ required: true, message: '架次不能为空', trigger: 'change' }],
  instId: [{ required: true, message: '内容不能为空', trigger: 'change' }]
})
const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
})

const orderFormRef = ref<ElFormInstance>()
/** 新增按钮操作 */
const handleAdd = () => {
  form.value = { ...initFormData }
  orderFormRef.value?.resetFields()
  dialog.visible = true
  dialog.title = '添加字典类型'
}
/** 提交按钮 */
const submitForm = () => {
  orderFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      addOrderConfigApi(form.value).then(res => {
        if (res.code == 200) {
          ElMessage.success(res.msg)
          dialog.visible = false
          proTable.value?.getTableList()
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}

/**
 * 关闭用户弹窗
 */
const closeDialog = () => {
  dialog.visible = false
  resetForm()
}

/**
 * 重置表单
 */
const resetForm = () => {
  form.value = { ...initFormData }
  orderFormRef.value?.resetFields()
  orderFormRef.value?.clearValidate()
}
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，可以在这里进行处理成这些字段
const dataCallback = (data: any) => {
  const page = proTable.value!.pageable
  return {
    list: data.data,
    total: data.total,
    pageNum: page.pageNum,
    pageSize: page.pageSize
  }
}
const hiDialogRef = ref<InstanceType<typeof HighlightDialog> | null>(null)
// 跳转详情页
const toDetail = async (row?: { id: any }) => {
  const res = await orderConfigXmlApi(row?.id)
  const params = {
    title: '指令内容',
    width: 600,
    code: res.data,
    type: 'xml'
  }
  hiDialogRef.value?.openDialog(params)
}

// 删除指令配置信息
const deleteOrderConfig = async (params: any) => {
  await useHandleData(delOrderConfigApi, params.id, `删除【${params.id}】指令配置`)
  proTable.value?.getTableList()
}

// 批量删除指令配置信息
const batchDelete = async (ids: string[]) => {
  await useHandleData(delOrderConfigApi, ids, '删除所选指令配置信息')
  proTable.value?.clearSelection()
  proTable.value?.getTableList()
}

// 导出指令配置列表
const downloadFile = async () => {
  ElMessageBox.confirm('确认导出指令配置数据?', '温馨提示', { type: 'warning' }).then(() =>
    useDownload(exportApi, '指令配置列表', proTable.value?.searchParam)
  )
}

// 批量添加指令配置
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
const batchAdd = () => {
  const params = {
    title: '指令配置',
    tempApi: importTemplateApi,
    importApi: importDataApi,
    getTableList: proTable.value?.getTableList
  }
  dialogRef.value?.acceptParams(params)
}

const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
const sortieOptions = ref<any[]>([])
const instOptions = ref<any[]>([])
// 打开弹框的功能
const openDialog = async (type: number, title: string, row?: any) => {
  let res = { data: {} }
  if (row?.id) {
    res = await getOrderConfigApi(row?.id || null)
  }
  let sortie = await listSortieAllApi({})
  sortieOptions.value = sortie.data
  // 重置表单
  setFieldList()
  const params = {
    title,
    width: 500,
    top: '20vh',
    isEdit: type !== 3,
    fieldList: fieldList,
    model: type == 1 ? undefined : res.data,
    api: type == 1 ? addOrderConfigApi : updateOrderConfigApi,
    getTableList: proTable.value?.getTableList
  }
  formDialogRef.value?.openDialog(params)
}

// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  {
    prop: 'orderCode',
    label: '指令编码'
  },
  {
    prop: 'name',
    label: '指令名称',
    search: {
      el: 'input'
    },
    render: scope => {
      return (
        <el-button type="primary" link onClick={() => toDetail(scope.row)}>
          {scope.row.name}
        </el-button>
      )
    }
  },
  {
    prop: 'type',
    label: '指令类型',
    tag: true,
    enum: types,
    search: {
      el: 'select'
    },
    fieldNames: { label: 'dictLabel', value: 'dictValue' }
  },
  {
    prop: 'instId',
    label: '维修内容',
    tag: true,
    enum: instOptions,
    search: {
      el: 'select'
    },
    width: 220
  },
  {
    prop: 'sortie',
    label: '内容',
    width: 120
  },
  {
    prop: 'description',
    label: '指令描述'
  },
  {
    prop: 'createTime',
    label: '创建时间'
  },
  { prop: 'operation', label: '操作' }
])
// 表单配置项
let fieldList: Form.FieldItem[] = []
const setFieldList = () => {
  fieldList = [
    {
      label: '指令编码',
      field: 'orderCode',
      rules: [{ required: true, message: '指令编码不能为空', trigger: 'blur' }],
      value: generateOrderNumber('INST'),
      placeholder: '请输入指令编码'
    },
    {
      label: '指令名称',
      field: 'name',
      rules: [{ required: true, message: '指令名称不能为空', trigger: 'blur' }],
      placeholder: '请输入指令名称'
    },
    {
      label: '指令类型',
      field: 'type',
      enum: () => getDictsApi('order_type'),
      type: 'select',
      rules: [{ required: true, message: '指令类型不能为空', trigger: 'change' }],
      options: {
        labelKey: 'dictLabel',
        valueKey: 'dictValue'
      },
      placeholder: '请选择指令类型'
    },
    {
      label: '架次',
      field: 'sortie',
      enum: sortieOptions.value,
      type: 'select',
      clearable: true,
      options: {
        labelKey: 'sortieNumber',
        valueKey: 'sortieNumber',
        filterable: true,
        allowCreate: true
      },
      placeholder: '请选择架次'
    },
    {
      label: '指令描述',
      field: 'description',
      type: 'textarea',
      placeholder: '请输入指令描述'
    }
  ]
}
</script>