1、工位绑定工组、工序、设备等信息

src/components/workstationBind/index.ts

@@ -0,0 +1,3 @@
+import workstationBind from './src/workstationBind.vue'
+import detail from './src/Detail.vue'
+export { workstationBind,detail }

src/components/workstationBind/src/workstationBind.vue

@@ -0,0 +1,642 @@
+<template>
+  <div>
+    <el-drawer
+      v-model="isShowDrawer"
+      title="详情"
+      direction="rtl"
+      size="80%"
+      v-loading="detailLoading"
+    >
+      <template #header>
+        <div class="font-size-18px">
+          {{ titleValueRef }} <span class="ml-20px font-size-16px">{{ titleNameRef }}</span>
+        </div>
+      </template>
+      <ContentWrap>
+        <!-- 默认单表展现 -->
+        <Descriptions
+          v-if="isBasic && !tabsExtend"
+          :data="detailData"
+          :schema="allSchemas.detailSchema"
+          :columns="2"
+        />
+      </ContentWrap>
+
+      <Tabs :tabsList="TabsList" :current="current" @change="change" />
+      <div class="flex">
+        <!-- 详情 -->
+        <ContentWrap class="w-[100%]">
+          <!-- 单表切换tabs 展现table -->
+          <Table
+            v-if="isBasic && tabsExtend"
+            :columns="detailAllSchemasRef.tableColumns"
+            :data="tableObjectRef.tableList"
+            :loading="tableObjectRef.loading"
+            :pagination="{ total: tableObjectRef.total }"
+            v-model:pageSize="tableObjectRef.pageSize"
+            v-model:currentPage="tableObjectRef.currentPage"
+          >
+            <template>
+              <div>1</div>
+            </template>
+          </Table>
+          <Table
+            v-if="!isBasic && fromeWhere != 'Equipment'"
+            :columns="detailAllSchemasRef.tableColumns"
+            :data="tableObjectRef.tableList"
+            :loading="tableObjectRef.loading"
+            :pagination="{ total: tableObjectRef.total }"
+            v-model:pageSize="tableObjectRef.pageSize"
+            v-model:currentPage="tableObjectRef.currentPage"
+          >
+            <template>
+              <div>1</div>
+            </template>
+          </Table>
+          <Table
+            v-if="!isBasic && fromeWhere != 'Process'"
+            :columns="detailAllSchemasRef.tableColumns"
+            :data="tableObjectRef.tableList"
+            :loading="tableObjectRef.loading"
+            :pagination="{ total: tableObjectRef.total }"
+            v-model:pageSize="tableObjectRef.pageSize"
+            v-model:currentPage="tableObjectRef.currentPage"
+          >
+            <template>
+              <div>1</div>
+            </template>
+          </Table>
+          <DetailTable
+            v-if="!isBasic && fromeWhere == 'Production' && isShowDrawer"
+            :columns="detailAllSchemasRef.tableColumns"
+            :data="tableObjectRef.tableList"
+            :allList="allList"
+            :countScopeType="countScopeType"
+            :key="updateKey"
+          >
+            <template>
+              <div>1</div>
+            </template>
+          </DetailTable>
+        </ContentWrap>
+      </div>
+    </el-drawer>
+    <!-- 表单弹窗：添加/修改 -->
+    <BasicForm
+      ref="formRef"
+      @success="submitForm"
+      :rules="detailAllSchemasRules"
+      :formAllSchemas="detailAllSchemas"
+      :isBusiness="false"
+      :apiUpdate="apiUpdate"
+      :apiCreate="apiCreate"
+      :fromeWhere="fromeWhere"
+      :isDetail="true"
+      @searchTableSuccess="searchTableSuccess"
+      :detailData="detailData"
+      @submitForm="submitForm"
+      @selectChangeDetail="selectChangeDetail"
+      :formTypeDetail="formTypeDetail"
+      :countPlanAllList="countPlanAllList"
+      @onChange="detailBasicFormOnChange"
+      @onBlur="onBlur"
+      @formFormDateChange="formFormDateChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import * as RemarkApi from '@/api/wms/remark'
+import * as FileApi from '@/api/wms/file'
+import * as defaultButtons from '@/utils/disposition/defaultButtons'
+import Detail from "@/components/workstationBind/src/Detail.vue";
+import {TabsList} from "@/views/mes/workstation/workstation.data";
+import DetailTable from "@/components/DetailTable/src/DetailTable.vue";
+import Tabs from "@/components/Tabs/src/Tabs.vue";
+import Annex from "@/components/Annex/src/Annex.vue";
+import Remarks from "@/components/Remarks/src/Remarks.vue";
+import BasicForm from "@/components/BasicForm/src/BasicForm.vue";
+import TableHead from "@/components/TableHead/src/TableHead.vue";
+import ChangeRecord from "@/components/ChangeRecord/src/ChangeRecord.vue";
+import {Team} from "@/utils/disposition/formFields";
+
+defineOptions({ name: 'BindDetail' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const route = useRoute() // 路由信息
+const routeName = ref()
+routeName.value = route.name
+routeName.value = routeName.value.substring(0, routeName.value.length - 4) + 'Detail'
+const updateKey = ref(0)
+
+const props = defineProps({
+  // 标签参数
+  tabs: {
+    type: Object,
+    required: true,
+    default: null
+  },
+  // 是否是基础数据 展现详情顶部表单
+  isBasic: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  // 表单，列表 相关信息
+  allSchemas: {
+    type: Object,
+    required: true,
+    default: null
+  },
+  // 明细列表相关信息
+  detailAllSchemas: {
+    type: Object,
+    required: true,
+    default: null
+  },
+  //  明细验证
+  detailAllSchemasRules: {
+    type: Object,
+    required: true,
+    default: null
+  },
+  // 子表新增API
+  apiCreate: {
+    type: Function,
+    required: false,
+    default: null
+  },
+  // 子表编辑API
+  apiUpdate: {
+    type: Function,
+    required: false,
+    default: null
+  },
+  // 子表分页列表API
+  apiPage: {
+    type: Function,
+    required: false,
+    default: null
+  },
+  // 子表删除API
+  apiDelete: {
+    type: Function,
+    required: false,
+    default: null
+  },
+  // 子表新增修改校验
+  detailValidate: {
+    type: Function,
+    required: false,
+    default: null
+  },
+  // 来源 countPlan盘点计划进入
+  fromeWhere: {
+    type: String,
+    required: false,
+    default: ''
+  },
+  // 获取接口列表集合
+  allList: {
+    type: Object,
+    required: true,
+    default: null
+  },
+  // 盘点范围类型
+  countScopeType: {
+    type: Array,
+    required: false,
+    default: null
+  },
+  //盘点详情子表新增的时候判断盘点范围值显示输入框还是下拉框
+  formTypeDetail: {
+    type: String,
+    required: false,
+    default: 'InputString'
+  },
+  //盘点详情子表新增的时候判断盘点范围值的下拉列表
+  countPlanAllList: {
+    type: Array,
+    required: false,
+    default: null
+  },
+  // 详情列表扩展操作按钮
+  buttondataTable: {
+    type: Array,
+    required: false,
+    default: ()=>{
+      return []
+    }
+  },
+  // 针对基础数据tabs扩展 显示table列表 默认false
+  tabsExtend: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  // tableObject 数据过滤条件 针对 详情扩展标签页 传入不同条件
+  tableObjectExtend: {
+    type: Array,
+    required: false,
+    default: null
+  },
+  // 子列表 筛选 展示与隐藏 ，默认展示
+  detailButtonIsShowFilter:{
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  // 子列表 新增 展示与隐藏 ，默认展示
+  detailButtonIsShowAdd:{
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  // 子列表 编辑 展示与隐藏 ，默认展示
+  detailButtonIsShowEdit:{
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  // 子列表 删除 展示与隐藏 ，默认展示
+  detailButtonIsShowDelete:{
+    type: Boolean,
+    required: false,
+    default: true
+  }
+})
+const isShowDrawer = ref(false)
+const detailLoading = ref(false)
+const tabsList = ref(JSON.parse(JSON.stringify(props.tabs ? props.tabs : '')))
+
+if (props.isBasic == true) {
+  if (tabsList.value && tabsList.value.length > 0) {
+    tabsList.value.unshift({
+      label: '详情',
+      prop: 'Detail'
+    })
+  }
+} else {
+  if (tabsList.value && tabsList.value.length > 0) {
+  } else {
+    tabsList.value = [
+      {
+        label: '明细',
+        prop: 'Detail'
+      }
+    ]
+  }
+}
+if (tabsList.value) {
+}
+
+// 附件默认数据
+const annexData = reactive({
+  annexList: []
+})
+
+// 备注数据
+const remarksData = reactive({
+  remarksList: [],
+  data: {}
+})
+
+// 变更记录默认数据
+const changeRecordData = reactive({
+  changeRecordList: []
+})
+const detailData = ref({}) //详情数据
+// 获取附件列表篇
+const getFileList = async () => {
+  detailLoading.value = true
+  try {
+    annexData.annexList = await FileApi.getFileList(remarksData.data)
+  } finally {
+    detailLoading.value = false
+  }
+}
+/** 添加附件 */
+const handleAnnexSuccess = () => {
+  getFileList()
+  getChangeRecordList()
+}
+// 删除附件成功之后所走的方法
+const deleteAnnexSuccess = async () => {
+  getFileList()
+  getChangeRecordList()
+}
+
+// Tabs当前选择
+const current = ref(0)
+const change = (item, index) => {
+  current.value = index
+  emit('changeTabs', item)
+}
+
+//主表所需的参数
+const masterParmas = ref({
+  masterId: '', //主表id
+  number: '', //主表单据号
+  status: '' //主表状态 用于控制子表新增编辑按钮显示情况
+})
+
+// 列表头部按钮
+const HeadButttondata = ref()
+// 列表-操作按钮
+const buttondata = ref()
+
+/** 打开弹窗 */
+const formRef = ref()
+const titleNameRef = ref()
+const titleValueRef = ref()
+const openDetail = async (row: any, titleName: any, titleValue: any, tableName: any) => {
+  titleNameRef.value = titleName
+  titleValueRef.value = titleValue
+  remarksData.data = {
+    tableId: row.id,
+    tableName: tableName
+  }
+  // 加载明细列表
+  if (!props.isBasic) {
+    // 设置主表id
+    masterParmas.value.masterId = row.id
+    masterParmas.value.number = row.number
+    masterParmas.value.status = row.status
+    tableObjectRef.value.params = {
+      masterId: row.id
+    }
+    await getList()
+  }
+  isShowDrawer.value = true
+  if (row) {
+    detailLoading.value = true
+    try {
+      detailData.value = row
+      getRemarkList()
+      getFileList()
+      getChangeRecordList()
+      // 判断详情按钮是否显示
+      let detailButtonFilter: any = []
+      let detailButtonAdd: any = []
+      if (props.detailButtonIsShowFilter) {
+        // 筛选
+        detailButtonFilter = [
+          defaultButtons.defaultFilterBtn(null)
+        ]
+      }
+      if (props.detailButtonIsShowAdd) {
+        // 新增
+        detailButtonAdd = [
+          defaultButtons.defaultAddBtn({
+            hide: isShowMainButton(row, ['1'])
+          })
+        ]
+      }
+      HeadButttondata.value = [...detailButtonFilter,...detailButtonAdd]
+
+      // 针对特殊处理 当业务是任务的 只显示筛选 正常情况下应在业务页面设置 后期再作优化
+      if (routeName.value.indexOf('Job') > -1) {
+        HeadButttondata.value = [
+          defaultButtons.defaultFilterBtn(null) // 筛选
+        ]
+      }
+
+      let detailButtonEdit: any = []
+      let detailButtonDelete: any = []
+      if (props.detailButtonIsShowEdit) {
+        // 编辑
+        detailButtonEdit = [
+          defaultButtons.mainListEditBtn({
+            hide: isShowMainButton(row, ['1'])
+          })
+        ]
+      }
+      if (props.detailButtonIsShowDelete) {
+        // 删除
+        detailButtonDelete = [
+          defaultButtons.mainListDeleteBtn({
+            hide: isShowMainButton(row, ['1'])
+          })
+        ]
+      }
+      buttondata.value = [...detailButtonEdit,...detailButtonDelete,...props.buttondataTable]
+
+    } finally {
+      detailLoading.value = false
+    }
+  }
+}
+defineExpose({ openDetail, formRef }) // 提供 open 方法，用于打开弹窗
+// tabs 切换事件
+const changeTabs = (item) => {
+  alert(item.value)
+}
+// 获取备注列表
+const getRemarkList = async () => {
+  detailLoading.value = true
+  try {
+    remarksData.remarksList = await RemarkApi.getRemarkPage(remarksData.data)
+  } finally {
+    detailLoading.value = false
+  }
+}
+// 备注提交成功之后
+const remarksSubmitScuess = async (remark) => {
+  detailLoading.value = false
+  getRemarkList()
+  getChangeRecordList()
+}
+// 获取变更记录
+const getChangeRecordList = async () => {
+  changeRecordData.changeRecordList = await RemarkApi.getChangeRecordPage(remarksData.data)
+}
+
+const tableObjectRef = ref()
+const tableMethodsRef = ref()
+const detailAllSchemasRef = ref()
+
+const { tableObject, tableMethods } = useTable({
+  getListApi: props.apiPage // 分页接口
+})
+
+tableObjectRef.value = tableObject
+tableMethodsRef.value = tableMethods
+detailAllSchemasRef.value = props.detailAllSchemas
+
+// 根据状态返回该按钮是否显示
+const isShowMainButton = (row, val) => {
+  if (val.indexOf(row.status) > -1) {
+    return false
+  } else {
+    return true
+  }
+}
+
+// 获得表格的各种操作
+const { getList } = tableMethodsRef.value
+
+
+// 字段设置 更新主列表字段
+// const updataTableColumns = (val) => {
+//   detailAllSchemas.tableColumns.value = val
+// }
+
+// 列表-操作按钮事件
+const buttonTableClick = async (val, row) => {
+  if (val == 'edit') {
+    // 编辑
+    openForm('update', row)
+  } else if (val == 'delete') {
+    // 删除
+    handleDelete(row.id)
+  } else {
+    emit('tableFormButton',val, row)
+  }
+}
+/** 添加/修改操作 */
+const openForm = async (type: string, row?: number) => {
+  formRef.value.open(type, row, masterParmas.value)
+  emit('detailOpenForm', type, row)
+}
+// form 提交
+const submitForm = async (formType, data) => {
+  try {
+    // 子表新增编辑校验 如果业务需要子表提交校验 需在主页详情组件添加 detailValidate 参数及方法
+    const rs = (await props.detailValidate) ? await props.detailValidate(data) : true
+    if (!rs) return
+    if (formType === 'create') {
+      await props.apiCreate(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await props.apiUpdate(data)
+      message.success(t('common.updateSuccess'))
+    }
+    formRef.value.dialogVisible = false
+    // 刷新当前列表
+    await getList()
+    updateKey.value += 1
+  } finally {
+    formRef.value.formLoading = false
+  }
+}
+
+// 查询页面返回
+const searchTableSuccess = (formField, searchField, val, formRef) => {
+  emit('searchTableSuccessDetail', formField, searchField, val, formRef)
+}
+// 传递给父类
+const emit = defineEmits([
+  'searchTableSuccessDetail',
+  'changeTabs',
+  'selectChangeDetail',
+  'detailOpenForm',
+  'tableFormButton',
+  'openImage',
+  'onBlur',
+  'detailBasicFormOnChange',
+  'formFormDateChange'
+])
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    tableObject.loading = true
+    // 发起删除
+    await props.apiDelete(id)
+    tableObject.loading = false
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+    updateKey.value += 1
+  } catch {}
+}
+// 筛选提交
+const searchFormClick = async (searchData) => {
+  const { tableObject, tableMethods } = useTable({
+    getListApi: props.apiPage // 分页接口
+  })
+  tableObject.params = {
+    isSearch: true,
+    filters: searchData.filters
+      ? searchData.filters
+      : [{ column: 'masterId', action: '==', value: masterParmas.value.masterId }]
+  }
+  detailAllSchemasRef.value = props.detailAllSchemas
+  tableObjectRef.value = tableObject
+  tableMethodsRef.value = tableMethods
+  tableObjectRef.value.tableList = []
+  const { getList } = tableMethods
+  await getList()
+  updateKey.value += 1
+  // tableObjectRef.value.params = {
+  //   isSearch: true,
+  //   filters: searchData.filters
+  //     ? searchData.filters
+  //     : [{ column: 'masterId', action: '==', value: masterParmas.value.masterId }]
+  // }
+  // getList() // 刷新当前列表
+}
+// 选择盘点类型的时候针对限值的操作
+const selectChangeDetail = (field, val) => {
+  emit('selectChangeDetail', field, val)
+}
+// 打开图片
+const openImage=(item)=>{
+  emit('openImage', item)
+}
+/**
+ * 监听改变事件
+ * @param field 当前操作字段
+ * @param cur 改变后值
+ */
+const detailBasicFormOnChange = (field, cur) => {
+  emit('detailBasicFormOnChange', field, cur)
+}
+
+/**
+ * 监听失焦事件
+ * @param field 当前操作字段
+ * @param e
+ */
+const onBlur = (field, e) => {
+  emit('onBlur', field, e)
+}
+
+// 日期改变事件
+const formFormDateChange = (field, val,row, index) => {
+  emit('formFormDateChange', field, val,row, index)
+}
+//监视属性
+watch(
+  () => props.apiPage,
+  () => {
+    const { tableObject, tableMethods } = useTable({
+      getListApi: props.apiPage // 分页接口
+    })
+    tableObject.params.masterId = masterParmas.value.masterId
+    detailAllSchemasRef.value = props.detailAllSchemas
+    if (props.tableObjectExtend) {
+      props.tableObjectExtend.forEach(item => {
+        tableObject.params[item.key] = item.value
+      })
+    }
+    tableObjectRef.value = tableObject
+    tableMethodsRef.value = tableMethods
+    const { getList } = tableMethods
+    getList()
+  }
+)
+</script>
+<style lang="scss">
+.el-drawer__body {
+  background: #f5f5f5 !important;
+}
+
+::v-deep(.label-class-name) {
+  color: #dedede;
+}
+</style>
+<style scoped lang="scss"></style>

src/utils/disposition/defaultButtons.ts

@@ -250,7 +250,18 @@ export function mainListDeleteBtn(option:any) {
     hasPermi: ''
   })
 }
-
+// 主列表-绑定
+export function mainListBindBtn(option:any) {
+  return __defaultBtnOption(option,{
+    label: '绑定',
+    name: 'bind',
+    hide: false,
+    type: 'primary',
+    color: '',
+    link: true, // 文本展现按钮
+    hasPermi: ''
+  })
+}
 // 主列表-申请流程-关闭按钮
 export function mainListCloseBtn(option:any) {
   return __defaultBtnOption(option,{
@@ -735,18 +746,7 @@ export function mainThawRequesttBtn(option:any) {
     hasPermi: ''
   })
 }
-// 主列表-绑定
-export function mainListBindBtn(option:any) {
-  return __defaultBtnOption(option,{
-    label: '绑定',
-    name: 'bind',
-    hide: false,
-    type: 'primary',
-    color: '',
-    link: true, // 文本展现按钮
-    hasPermi: ''
-  })
-}
+
 // 默认按钮规则
 function __defaultBtnOption(option:any,specific:any){
   return {

src/views/mes/workstation/index.vue

@@ -52,7 +52,8 @@
 
   <!-- 详情 -->
   <Detail ref="detailRef" :isBasic="true" :allSchemas="Workstation.allSchemas" />
-
+  <!-- 绑定 -->
+  <BindDetail ref="bindDetailRef" :isBasic="true" :allSchemas="Workstation.allSchemas" />
   <!-- 导入 -->
   <ImportForm ref="importFormRef" url="/mes/workstation/import" :importTemplateData="importTemplateData" @success="importSuccess" />
 </template>
@@ -65,7 +66,7 @@ import * as defaultButtons from '@/utils/disposition/defaultButtons'
 import TableHead from '@/components/TableHead/src/TableHead.vue'
 import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
 import Detail from '@/components/Detail/src/Detail.vue'
-
+import BindDetail from '@/components/workstationBind/src/workstationBind.vue'
 defineOptions({ name: 'Workstation' })
 
 const message = useMessage() // 消息弹窗
@@ -144,11 +145,10 @@ const buttonTableClick = async (val, row) => {
     openForm('update', row)
   } else if (val == 'delete') { // 删除
     await handleDelete(row.id)
-  }else if (val == 'bind') { // 删除
-    await detailRef.value.openDetail(row, '绑定', row.name, 'mesWorkstation')
+  }else if (val == 'bind') { // 绑定
+    openBindDetail(row,row.name,row.code)
   }
 }
-
 /** 添加/修改操作 */
 const basicFormRef = ref()
 const openForm = (type: string, row?: any) => {
@@ -184,6 +184,11 @@ const detailRef = ref()
 const openDetail = (row: any, titleName: any, titleValue: any) => {
   detailRef.value.openDetail(row, titleName, titleValue, 'basicWorkstation')
 }
+/** 绑定操作 */
+const bindDetailRef = ref()
+const openBindDetail = (row: any, titleName: any, titleValue: any) => {
+  bindDetailRef.value.openDetail(row, titleName, titleValue, 'basicWorkstation')
+}
 
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {

src/views/mes/workstation/workstation.data.ts

@@ -1,11 +1,28 @@
-import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
-import { dateFormatter } from '@/utils/formatTime'
+import type {CrudSchema} from '@/hooks/web/useCrudSchemas'
+import {dateFormatter} from '@/utils/formatTime'
 
 // 表单校验
 export const WorkstationRules = reactive({
   code: [required]
 })
+export const TabsList = [{
+  label: "工组",
+  prop: 'Team',
+},
+  {
+    label: "设备",
+    prop: 'Equipment',
+  },
+  {
+    label: "工序",
+    prop: 'Process',
+  },
+  {
+    label: "产品",
+    prop: 'Production',
+  }
 
+]
 export const Workstation = useCrudSchemas(reactive<CrudSchema[]>([
 
   {
@@ -46,26 +63,36 @@ export const Workstation = useCrudSchemas(reactive<CrudSchema[]>([
     field: 'activeTime',
     sort: 'custom',
     formatter: dateFormatter,
+    detail: {
+      dateFormat: 'YYYY-MM-DD HH:mm:ss'
+    },
     form: {
       component: 'DatePicker',
       componentProps: {
+        style: {width: '100%'},
         type: 'datetime',
-        valueFormat: 'x'
+        dateFormat: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
       }
-    }
+    },
   },
   {
     label: '失效时间',
     field: 'expireTime',
     sort: 'custom',
     formatter: dateFormatter,
+    detail: {
+      dateFormat: 'YYYY-MM-DD HH:mm:ss'
+    },
     form: {
       component: 'DatePicker',
       componentProps: {
+        style: {width: '100%'},
         type: 'datetime',
-        valueFormat: 'x'
+        dateFormat: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
       }
-    }
+    },
   },
   {
     label: '操作',