sfms3.0-ui/src/components/BasicForm/src/BasicFormQmsCode.vue

<template>
  <Dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    :width="dialogWidth"
    :close-on-click-modal="false"
    :vLoading="formLoading"
  >
  
  <div 
    style="max-height: 60vh;overflow-y: auto;">
    <Form
      ref="formRef"
      :rules="rules"
      :schema="formSchema"
      :is-col="true"
      @opensearchTable="opensearchTable"
      @onChange="onChange"
      @onBlur="onBlur"
    >
      <template #crontab="formSchema" v-if="fromeWhere == 'countPlan'">
        <crontab v-model="formSchema.crontab" />
      </template>
      <template #type="formSchema" v-if="fromeWhere == 'countPlan'">
        <el-select
          v-model="formSchema.type"
          placeholder="选择盘点类型"
          @change="selectChange('type', $event)"
          v-if="!isDetail"
        >
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.COUNT_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        <el-select
          v-model="formSchema.type"
          placeholder="选择盘点范围类型"
          @change="selectChangeDetail('type', $event,formSchema)"
          v-if="isDetail"
        >
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.COUNT_SCOPE_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </template>
      <template #value="formSchema" v-if="fromeWhere == 'countPlan'">
        <el-select
          v-model="formSchema.value"
          placeholder="选择盘点范围值"
          v-if="isDetail&& formTypeDetail =='Select'"
        >
          <el-option
            v-for="dict in countPlanAllList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        <el-input v-model="formSchema.value" v-if="isDetail && formTypeDetail =='InputString'"/>
      </template>
    </Form>
    <div class="table" v-if="isBusiness && formType == 'create' && fromeWhere != 'countPlan'">
      <TableForm
        ref="tableFormRef"
        class="w-[100%]"
        :tableFields="tableAllSchemas.tableFormColumns"
        :tableData="tableData"
        :tableFormRules="tableFormRules"
        :isShowButton="isShowButton"
        :isShowReduceButton="isShowReduceButton"
        @handleAddTable="handleAddTable"
        @handleDeleteTable="handleDeleteTable"
        @tableSelectionChange="tableSelectionChange"
        @extendedButtonsClick="extendedButtonsClick"
        @formSelectChange="formSelectChange"
        @formSelectvVisibleChange="formSelectvVisibleChange"
        @tableSortChange="tableSortChange"
        @selectCallback="selectCallback"
        @handleTableSelect="handleTableSelect"
        @inpuFocus="inpuFocus"
        @buttonOperationClick="buttonOperationClick"
        @inputStringBlur="inputStringBlur"
        @inputNumberChange="inputNumberChange"
        @tableFormSelectOnBlur="tableFormSelectOnBlur"
        @formFormDateChange="formFormDateChange"
      />
    </div>
    <div v-if="isBusiness && formType == 'create' && fromeWhere == 'countPlan'">
      <TableFormCountPlan 
        :tableFields="tableAllSchemas.tableFormColumns"
        :tableData="tableData"
        :countScopeType="countScopeType"
        :tableFormRules="tableFormRules"
        ref="tableFormRef"
        @tableFormChange="tableFormChange"
        @handleAddTable="handleAddTable"
        @handleDeleteTable="handleDeleteTable"
      />
    </div>
  </div>
    <template #footer>
      <ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick" />
    </template>
  
  </Dialog>
  <SearchTable ref="searchTableRef" @searchTableSuccess="searchTableSuccess" />
</template>
<script setup lang="ts">
import { SearchTable } from '@/components/SearchTable'
import * as defaultButtons from '@/utils/disposition/defaultButtons'
import ButtonBase from '@/components/XButton/src/ButtonBase.vue'
import TableForm from '@/components/TableForm/src/TableForm.vue'
import TableFormCountPlan from '@/components/TableFormCountPlan/src/TableFormCountPlan.vue'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'

const props = defineProps({
  // 显示窗口宽度设置
  basicFormWidth: {
    type: String,
    default: ''
  },
  // 是否显示TableForm 新增/删除按钮
  isShowButton: {
    type: Boolean,
    default: true
  },
  // 是否显示tableForm 删除按钮
  isShowReduceButton: {
    type: Boolean,
    default: true
  },
  // 校验rules
  rules: {
    type: Object,
    required: true,
    default: null
  },
  // 表单，列表 相关信息
  formAllSchemas: {
    type: Object,
    required: true,
    default: null
  },
  // 列表 相关信息
  tableAllSchemas: {
    type: Array,
    required: true,
    default: null
  },
  // 列表数据
  tableData: {
    type: Array,
    required: true,
    default: null
  },
  tableFormRules: {
    type: Array,
    required: true,
    default: null
  },
  // 查询参数
  // searchTableParams: {
  //   type: Array,
  //   required: false,
  //   default: null
  // },
  // API——Vo
  apiVo: {
    type: Object,
    required: true,
    default: null
  },
  //  API——创建
  apiCreate: {
    type: Function,
    required: true,
    default: null
  },
  //  API——编辑
  apiUpdate: {
    type: Function,
    required: true,
    default: null
  },
  // 是否是业务表单（区分是不显示tableForm）
  isBusiness: {
    type: Boolean,
    required: true,
    default: true
  },
  // 表单form
  form: {
    type: Object,
    required: true,
    default: null
  },
  // 详情数据
  detailData: {
    type: Object,
    required: true,
    default: null
  },
  // // 主表参数
  // masterParmas: {
  //   type: Object,
  //   required: false,
  //   default: null
  // },
  // 来源 countPlan盘点计划进入
  fromeWhere: {
    type: String,
    required: false,
    default: ''
  },
  // 盘点范围类型
  countScopeType: {
    type: Array,
    required: false,
    default: null
  },
  // 是否从详情进入
  isDetail: {
    type: Boolean,
    required: false,
    default: false
  },
  //盘点详情子表新增的时候判断盘点范围值显示输入框还是下拉框
  formTypeDetail: {
    type: String,
    required: false,
    default: 'InputString'
  },
  //盘点详情子表新增的时候判断盘点范围值的下拉列表
  countPlanAllList: {
    type: Array,
    required: false,
    default: null
  },
  // 窗体底部按钮 显示or隐藏：保存，关闭
  isShowFooterButtton: {
    type: Boolean,
    required: false,
    default: true
  },
  // 明细数据长度校验
  tableFormDataLength: {
    type: Boolean,
    required: false,
    default: true
  },
  // 底部按钮集合
  footButttondata: {
    type: Array,
    required: false,
    default: null
  },
  //是否直接展示搜索表单
  isOpenSearchTable:{
    type: Boolean,
    required: false,
    default: false
  },
  myFuncTypeSign:{
    type: String,
    required: false,
    default: null
  },
})

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogWidth = ref()
if (props.basicFormWidth) {
  dialogWidth.value = props.basicFormWidth + '%'
} else {
  dialogWidth.value = props.isBusiness ? '60%' : '40%'
}

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改

const formRef = ref() // 表单 Ref
const formSchema = ref(props.formAllSchemas?.formSchema)
const tableAllSchemas = ref(props.tableAllSchemas)
const tableFormRules = ref(props.tableFormRules)

// 列表-按钮
// const buttondata = [
//   defaultButtons.mainListEditBtn(null), // 编辑
//   defaultButtons.mainListDeleteBtn(null)
// ]
// // 列表-操作按钮事件
// const buttonTableClick = async (val, row) => {
//   if (val == 'edit') {
    
//   } else if (val == 'delete') {
   
//   } else {
//   }
// }

/** 弹层操作 */
// formField form表单中的字段
// searchField 查询列表中的字段
// type 发起事件位置 type=tableForm 是明细中发起的 否则 为主表发起的
// searchCondition 查询条件
const searchTableRef = ref()
const opensearchTable = (
  formField,
  searchField,
  searchTitle,
  searchAllSchemas,
  searchPage,
  searchCondition,
  multiple,
  type,
  row
) => {
  const _searchCondition = {}
  // 判断查询条件中，是否存在指向主表的数据
  if (searchCondition && searchCondition.length > 0) {
    // 转换筛选条件所需
    let filters: any[] = []
    for (var i=0; i< searchCondition.length; i++ ) {
    // searchCondition.forEach((item) => {
      // 查询条件为主表某字段，需要赋值主表数据，数据来源是详情的，赋值需要从row中获取
      if (searchCondition[i].isMainValue) {
        _searchCondition[searchCondition[i].key] = formRef.value.formModel[searchCondition[i].value]
          ? formRef.value.formModel[searchCondition[i].value]
          : props.detailData
          ? props.detailData[searchCondition[i].value]
          : row
          ? row[searchCondition[i].value]
          : ''
        // 是否含有空参数情况
        let isNull = false
        if (_searchCondition[searchCondition[i].key] == '' || _searchCondition[searchCondition[i].key] == undefined) {
          isNull = true
        }
        if (isNull) {
          message.warning(searchCondition[i].message?searchCondition[i].message:'前置条件未选择！')
          return
        }
      } else {
        // 扩展 转换为筛选条件进行查询
        if (searchCondition[i].isSearch) {
          filters.push({
            action: searchCondition[i].action,
            column: searchCondition[i].key,
            value: searchCondition[i].value
          })
        } else {
          _searchCondition[searchCondition[i].key] = searchCondition[i].value
        }
      }
    }
    if (filters.length > 0) {
      _searchCondition.isSearch = true
      _searchCondition.filters = filters
    }
  }
  const _searchTableTitle = searchTitle
  const _searchTableAllSchemas = searchAllSchemas
  const _searchTablePage = searchPage
  searchTableRef.value.open(
    _searchTableTitle,
    _searchTableAllSchemas,
    _searchTablePage,
    formField,
    searchField,
    multiple,
    type,
    row,
    _searchCondition
  )
}
// 弹层确定返回所选数据
// val ： 弹层列表row 数据
const searchTableSuccess = (formField, searchField, val, type, row) => {
  emit('searchTableSuccess', formField, searchField, val, formRef.value, type, row)
}

/** 打开弹窗 */
const open = async (type: string, row?: any, masterParmas?: any, titleName?: any) => {
  dialogVisible.value = true
  if (titleName) {
    dialogTitle.value = t('action.' + titleName)
  } else {
    dialogTitle.value = t('action.' + type)
  }
  formType.value = type
  resetForm()
  // 修改时，设置数据
  // 如果是从主表的详情页面进图添加子表，需要添加masterId，code参数
  if (masterParmas) {
    if (!row) {
      if(props.myFuncTypeSign=='InspectionStage'){
        row = {
          masterId: masterParmas.masterId,
          code: masterParmas.code,
          dynamicModifyCode: masterParmas.code,
        }
      }else{
        row = {
          masterId: masterParmas.masterId,
          code: masterParmas.code,
        }
      }
    }
  }
  if (row?.id || row?.masterId) {
    formLoading.value = true
    try {
      nextTick(() => {
        formRef.value.setValues(row)
      })
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open, formRef, opensearchTable, dialogVisible, formLoading }) // 提供 open 方法，用于打开弹窗

/** 弹窗按钮 */
let Butttondata:any = []
if (props.isShowFooterButtton) {
  Butttondata = [
    defaultButtons.formSaveBtn(null), // 保存
    defaultButtons.formCloseBtn(null) // 关闭
  ]
}
if (props.footButttondata) {
  Butttondata = props.footButttondata
}

/** 按钮事件 */
const buttonBaseClick = (val) => {
  // 扩展 按钮事件回调
  if (props.footButttondata) {
    emit('footButtonClick',val)
  } 
   // 保存
  else if (val == 'save') {
    submitForm()
  }
  // 关闭
  else if (val == 'close') {
    dialogVisible.value = false
  }
}

/** 提交表单 */
// const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调

const tableFormRef = ref()
const submitForm = async () => {
  const elForm = unref(formRef)?.getElFormRef()
  // 校验表单
  if (!elForm) return
  const valid = await elForm.validate()
  if (!valid) return
  // 针对主子表 明细校验
  if (props.isBusiness) {
    formLoading.value = true
    if (formType.value == 'create') {
      const validateForm = await tableFormRef.value.validateForm()
      if (!validateForm && props.tableFormDataLength) {
        if (props.tableData.length == 0) {
          message.warning('请填写明细信息！')
          formLoading.value = false
          return
        }
        formLoading.value = false
        return
      }
      // 主子表——提交请求
      try {
        const data = unref(formRef)?.formModel
        emit('submitForm', formType.value, data)
      } finally {
      }
    } else {
      // 编辑
      try {
        const data = unref(formRef)?.formModel
        emit('submitForm', formType.value, data)
      } finally {
      }
    }
  } else {
    // 基础数据单表——提交请求
    formLoading.value = true
    try {
      const data = unref(formRef)?.formModel
      emit('success', formType.value, data)
    } finally {
      formLoading.value = false
    }
  }
}

/** 重置表单 */
const resetForm = () => {
  unref(formRef)?.resetFields()
}

// 传递给父类
const emit = defineEmits([
  'success',
  'tableSelectionChange',
  'tableFormSelectOnBlur',
  'extendedButtonsClick',
  'formSelectChange',
  'formSelectvVisibleChange',
  'tableSortChange',
  'selectCallback',
  'handleTableSelect',
  'handleDeleteTable',
  'handleAddTable',
  'inpuFocus',
  'searchTableSuccess',
  'opensearchTable',
  'submitForm',
  'selectChange',
  'selectChangeDetail',
  'tableFormChange',
  'buttonOperationClick',
  'inputStringBlur',
  'onChange',
  'onBlur',
  'inputNumberChange',
  'formFormDateChange',
  'footButtonClick'
])
//普通下拉改变事件
const formSelectChange = (field, val, row) => {
  emit('formSelectChange', field, val, row)
}
// 日期改变事件
const formFormDateChange = (field, val,row, index) => {
  emit('formFormDateChange', field, val,row, index)
}
const formSelectvVisibleChange = (field, val, row) => {
  emit('formSelectvVisibleChange', field, val, row)
}
// 点击selection框
const tableSelectionChange = (val) => {
  emit('tableSelectionChange', val)
}
// tableform select bulr
const tableFormSelectOnBlur = (field, val, row, index) => {
  emit('tableFormSelectOnBlur', field, val, row, index)
}
// 列表排序
const tableSortChange = (column, prop, order) => {
  emit('tableSortChange', column, prop, order)
}

// 数字输入-改变事件
const inputNumberChange = (field, index, row, val) => {
  emit('inputNumberChange', field, index, row, val)
}
//下拉框回显方法
// const showSelect = (val, statusID) => {
//   return getDictForStatusID(val, statusID)
// }

// 行点击
const handleTableSelect = (row, column, event) => {
  emit('handleTableSelect', row, column, event)
}

// 删除数据
const handleDeleteTable = (row, index) => {
  emit('handleDeleteTable', row, index,formRef.value)
}
// 添加数据
const handleAddTable = () => {
  if(props.isOpenSearchTable){
    const tableFormKeys = {}
    tableAllSchemas.value.tableFormColumns.forEach(item => {
      tableFormKeys[item.field] = item.default ? item.default : ''
    })
    inpuFocus(tableAllSchemas.value.tableFormColumns[0],tableFormKeys,0)
  }else{
    emit('handleAddTable')
  }
  
}
// 输入框聚焦
const inpuFocus = (headerItem, row, index) => {
  opensearchTable(
    headerItem.field,
    headerItem.tableForm.searchField,
    headerItem.tableForm.searchTitle,
    headerItem.tableForm.searchAllSchemas,
    headerItem.tableForm.searchPage,
    headerItem.tableForm.searchCondition,
    headerItem.tableForm.multiple,
    'tableForm',
    row
  )
}
/**
 * 监听改变事件
 * @param field 当前操作字段
 * @param cur 改变后值
 */
const onChange = (field, cur) => {
  emit('onChange', field, cur)
}

/**
 * 监听失焦事件
 * @param field 当前操作字段
 * @param e 
 */
const onBlur = (field, e) => {
  emit('onBlur', field, e)
}

// 修改盘点类型
const selectChange = (field, val) => {
  emit('selectChange', field, val)
}
// 修改盘点范围类型
const selectChangeDetail = (field, val,formSchema) => {
  formSchema.value = ''
  emit('selectChangeDetail', field, val)
}


const tableFormChange = (field, val, row) => {
  emit('tableFormChange', field, val, row)
}

const buttonOperationClick = (row, label, index)=> {
  emit("buttonOperationClick", row, label, index);
}

const inputStringBlur = (headerItem, row, index)=> {
  emit("inputStringBlur", headerItem, row, index);
}

</script>
<style lang="scss" scoped>
.table {
  border: 1px solid #dedede;
  border-radius: 8px;
  padding: 10px;
  width: calc(100% - 32px);
  display: flex;
}
::v-deep(.el-table__body) {
  padding: 10px 0px;
}
::v-deep(.el-table--default .el-table__cell) {
  padding: 2px 0px;
  border: none;
}

::v-deep(.el-table td.el-table__cell .el-form-item__content) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
::v-deep(.el-table td.el-table__cell div) {
  overflow: visible;
}

::v-deep(.el-icon) {
  display: block;
}button
.button {
  > div {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    > div {
      margin-left: 6px;
      text-decoration: underline;
      color: #409eff;
    }
  }
}
</style>