222

schangxiang@126.com

2025-05-03 37d497d48aa64bb56ae05cc7fe9bf16ff85e3592

222

 Weben_CMSרÓôúÂëÉú³ÉÆ÷/Weben_CMS_TemplateDemo/web/src/components/BaseQueryDrawer/BaseQueryDrawer.module.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,78 @@
.informationDrawerPosition {
  position: relative;
}
.informationDrawer {
  background: linear-gradient(180deg, #dee4ff 0%, #ffffff 40%, #ffffff 100%);
  box-shadow: 0px -4px 30px 1px rgba(0, 0, 0, 0.16);

  border-radius: 6px 6px 0px 0px;
  opacity: 1;
  border: 1px solid #f0f3fd;

  @keyframes iconFrames {
    0% {
      opacity: 1;
    }
    25% {
      opacity: 0.66;
    }
    50% {
      opacity: 0.33;
    }
    75% {
      opacity: 0.66;
    }

    100% {
      opacity: 1;
    }
  }
  .iconPosition {
    position: absolute;
    top: 38px;
    right: 111px;
    user-select: none;
    -webkit-user-drag: none;
    animation: iconFrames 2s infinite linear;
  }
  :global(.cs-drawer__header) {
    padding-top: 36px;
    .cs-drawer__close-btn {
      margin-top: -16px;
      font-size: 16px;
    }

    > span {
      font-size: 18px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: bold;
      color: #464e54;
      line-height: 0px;
    }
  }
  :global(.cs-drawer__close-btn) {
    margin-top: -16px;
    font-size: 16px;
  }
  :global(.cs-drawer__body) {
    padding: 30px;
    padding-top: 13px;
  }
}

.modal {
  width: var(--drawer-width);
  left: calc(100% - var(--drawer-width)) !important;
}

.csDialogFooter {
  padding: 0 18px;
  .csBaseBtn {
    width: 98px;
    height: 26px;
  }
  .dialogBtn {
    background: #efeded;
    color: #666666;
  }
}

 Weben_CMSרÓôúÂëÉú³ÉÆ÷/Weben_CMS_TemplateDemo/web/src/components/BaseQueryDrawer/BaseQueryDrawer.tsx

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,102 @@
import { computed, defineComponent, onMounted, ref } from 'vue'
import styles from './BaseQueryDrawer.module.scss'
import Icon from '../Icon/Icon'
//@ts-ignore
export default defineComponent<{
  [key: string]: any
}>({
  // @ts-ignore
  name: 'BaseDrawer',
  props: {
    // é®ç½©æ˜¯å¦å¯ç‚¹å‡»
    clickable: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    width: {
      type: String,
      default: '',
    },
    // modelValue: {
    //   type: Boolean,
    //   default: false,
    // },
  },
  emits: ['close', 'confirm', 'update:modelValue', 'open', 'beforeClose'],
  setup(props: any, { emit, slots, attrs }: any) {
    // const size = computed(() => {
    //   if (attrs.size.includes('px')) {
    //     return attrs.size
    //   }
    // })

    // const model = computed(() => {
    //   if (attrs.model.includes('')) {
    //     return attrs.model
    //   }
    // })

    return () => {
      return (
        <div
          class={styles.drawContent}
          //@ts-ignore
          // style={props.clickable ? { '--drawer-width': size.value } : {}}
        >
          <el-drawer
            // modal-class={props.clickable ? styles.modal : ''}
            class={{
              [styles.informationDrawer]: true,
              // [styles.informationDrawerPosition]: props.clickable,
            }}
            onOpen={() => emit('open')}
            onClose={() => emit('close')}
            v-slots={{
              footer() {
                return (
                  <div class={styles.csDialogFooter}>
                    <el-button
                      onClick={() => emit('close')}
                      type="info"
                      plain
                      class={{
                        [styles.dialogBtn]: true,
                        [styles.csBaseBtn]: true,
                      }}
                    >
                      å…³é—­
                    </el-button>
                    <el-button
                      onClick={() => emit('confirm')}
                      type="primary"
                      class={{
                        [styles.csBaseBtn]: true,
                      }}
                    >
                      æŸ¥è¯¢
                    </el-button>
                  </div>
                )
              },
            }}
            {...attrs}
            title={props.title}
            size={props.width || attrs.size}
          >
            <Icon
              width={167}
              height={54}
              class={styles.iconPosition}
              icon="drawer_bg"
            />
            {slots.default?.()}
          </el-drawer>
        </div>
      )
    }
  },
})

 Weben_CMSרÓôúÂëÉú³ÉÆ÷/Weben_CMS_TemplateDemo/web/src/widgets/HIAWms/Controllers/WmsMaterial.ts

@@ -51,6 +51,12 @@
    title: '',
    isAdd: false,
  })
  const dialogConfigForQuery = reactive({
    visible: false,
    title: '',
    isAdd: false,
  })


  const dialogSettingConfig = reactive({
    visible: false,
@@ -149,6 +155,16 @@
    sort.value = params.totalCount + 1
  }

  //点击按钮【高级查询】
  const onAdvancedQuery = () => {
    const params = tableRef.value?.getPaginationParams()
    current.value = null
    dialogConfigForQuery.visible = true
    dialogConfigForQuery.isAdd = true
    dialogConfigForQuery.title = '高级查询'
    sort.value = params.totalCount + 1
  }

  const onConfirmWmsMaterial = async () => {
    dialogConfig.visible = false
    if (dialogConfig.isAdd) {
@@ -236,6 +252,7 @@
    dataSource,
    contextMenu,
    dialogConfig,
    dialogConfigForQuery,
    dialogSettingConfig,
    tableRef,
    current,
@@ -254,5 +271,6 @@
    onConfirmWmsMaterial,
    onCheck,
    onAddWmsMaterial,
    onAdvancedQuery
  }
}

 Weben_CMSרÓôúÂëÉú³ÉÆ÷/Weben_CMS_TemplateDemo/web/src/widgets/HIAWms/Controllers/WmsMaterialQueryDrawer.tsx

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,311 @@
import {
  ref,
  onMounted,
  reactive,
  computed,
  Ref,
  watch,
  SetupContext,
  h,
} from 'vue'
import { injectModel } from '@/libs/Provider/Provider'
import { WmsMaterialQueryDrawer } from '../Models/WmsMaterialQueryDrawer'
import { ElMessage } from 'element-plus'
import isEqual from 'lodash/isEqual'
import { ConfirmBox } from '@/components/ConfirmBox/ConfirmBox'
import { cloneDeep } from 'lodash'

export const useWmsMaterialQueryDrawer = (props: any, ctx?: any) => {
  const WmsMaterialQueryDrawer = injectModel<WmsMaterialQueryDrawer>('WmsMaterialQueryDrawer')
  /**
   * ç”¨æ¥å¯¹æ¯”的初始化数据
   */
  const initiateData: Ref<Record<string, any>> = ref({})
  const formData = ref<Record<string, any>>({})
  // ref
  const formRef = ref()

  const disabled = ref(false)

  const current = computed(() => {
    return props.row || null
  })

  const inputNumber = (attrs) => {
    return (
      <el-input-number
        min="1"
        step="1"
        precision="0"
        {...attrs}
      ></el-input-number>
    )
  }

  const visible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      ctx.emit('update:modelValue', val)
    },
  })
  /**
   * æ·»åŠ çš„form字段
   */
  const formItems = reactive([
    {
      label: '物料编码',
      prop: 'materialCode',
      el: 'input',
      disabled: disabled,
      placeholder: '请输入物料编码',
    },
    {
      label: '物料名称',
      prop: 'materialName',
      el: 'input',
      placeholder: '请输入物料名称',
      rules: [{ required: true, message: '物料名称不能为空', trigger: 'blur' }],
    },
    {
      label: '采购类型',
      prop: 'purchaseType',
      el: 'select',
      placeholder: '请选择采购类型',
      options: [],
      rules: [{ required: true, message: '请选择采购类型', trigger: 'change' }],
    },
    {
      label: '物料类型',
      prop: 'materialType',
      el: 'select',
      placeholder: '请选择物料类型',
      options: [],
      rules: [{ required: true, message: '请选择物料类型', trigger: 'change' }],
    },
    {
      label: '主单位',
      prop: 'primaryUnit',
      el: 'input',
      placeholder: '请输入主单位(如: kg, m, ä¸ª)',
    },
    {
      label: '规格/标准',
      prop: 'standard',
      el: 'input',
      placeholder: '请输入规格/标准(如: GB/T 8163-2018)',
    },
    {
      label: '外径(mm)',
      prop: 'outerDiameter',
      el: (props: any, { attrs }: SetupContext) => {
        return h(inputNumber, {
          ...props,
          clearable: true,
          ...attrs,
        })
      },
      width: '100%',
      placeholder: '请输入外径',
      step: 0.01,
      precision: 2,
    },
    {
      label: '壁厚(mm)',
      prop: 'wallThickness',
      el: (props: any, { attrs }: SetupContext) => {
        return h(inputNumber, {
          ...props,
          clearable: true,
          ...attrs,
        })
      },
      width: '100%',
      placeholder: '请输入壁厚',
      step: 0.01,
      precision: 2,
    },
    {
      label: '材质',
      prop: 'materialQuality',
      el: 'input',
      placeholder: '请输入材质(如: 304不锈钢)',
    },
    {
      label: '长度(m)',
      prop: 'length',
      el: (props: any, { attrs }: SetupContext) => {
        return h(inputNumber, {
          ...props,
          clearable: true,
          ...attrs,
        })
      },
      width: '100%',
      placeholder: '请输入长度',
      step: 0.1,
      precision: 2,
    },
    {
      label: '是否主支管',
      prop: 'isMainBranch',
      el: 'select',
      options: [],
    },
    {
      label: '生产工厂',
      prop: 'factory',
      el: 'input',
      placeholder: '请输入生产工厂',
    },
    {
      label: '证书编号',
      prop: 'certification',
      el: 'input',
      placeholder: '请输入证书编号',
    },
    {
      label: '备注',
      prop: 'remark',
      el: 'input',
      type: 'textarea',
      placeholder: '请输入备注',
    },
  ])
  /**
   * æ ¡éªŒæ˜¯å¦æœ‰æ•°æ®å˜åŒ–
   */
  const checkIsEqualObject = () => {
    const data = {
      formData: formData.value,
    }
    const check = isEqual(initiateData.value, data)
    return check
  }

  const onClose = (done: () => void) => {
    if (visible.value) {
      if (checkIsEqualObject()) {
        visible.value = false
        done && done()
      } else {
        ConfirmBox('是否保存设置？')
          .then(() => {
            onConfirm()
          })
          .catch(() => {
            visible.value = false
            done && done()
          })
      }
    }
  }
  /**
   * ä¿å­˜
   */
  const onConfirm = async () => {
    await formRef.value?.validate()
    const data = {
      materialCode: formData.value.materialCode,
      materialName: formData.value.materialName,
      purchaseType: formData.value.purchaseType,
      materialType: formData.value.materialType,
      primaryUnit: formData.value.primaryUnit,
      standard: formData.value.standard,
      outerDiameter: formData.value.outerDiameter,
      wallThickness: formData.value.wallThickness,
      materialQuality: formData.value.materialQuality,
      length: formData.value.length,
      isMainBranch: formData.value.isMainBranch,
      factory: formData.value.factory,
      certification: formData.value.certification,
      remark: formData.value.remark,
    }
    if (!current.value) {
      await WmsMaterialQueryDrawer.addWmsMaterial(data)
    } else {
      const id = current.value.id
      await WmsMaterialQueryDrawer.updateWmsMaterial(id, data)
    }
    ElMessage.success('保存成功')
    ctx.emit('confirm')
  }

  const updateCheckData = () => {
    initiateData.value = {
      formData: {
        ...formData.value,
      },
    }
  }
  const updateFormItemOptions = (propName: string, enumData: any[]) => {
    const item = formItems.find((item) => item.prop === propName)
    if (item && enumData) {
      item.options = enumData.map((item) => ({
        label: item.description,
        value: item.value,
      }))
    }
  }
  /**
   * å¼¹çª—打开获取详情
   */
  const onOpen = async () => {
    const materialTypeEnum = await WmsMaterialQueryDrawer.getWmsEnumData({
      EnumName: 'MaterialTypeEnum',
    })
    updateFormItemOptions('materialType', materialTypeEnum)

    const purchaseTypeEnum = await WmsMaterialQueryDrawer.getWmsEnumData({
      EnumName: 'PurchaseTypeEnum',
    })
    updateFormItemOptions('purchaseType', purchaseTypeEnum)

    const yesOrNoTypeEnum = await WmsMaterialQueryDrawer.getWmsEnumData({
      EnumName: 'YesNoEnum',
    })
    updateFormItemOptions('isMainBranch', yesOrNoTypeEnum)

    if (current.value) {
      const res = await WmsMaterialQueryDrawer.getWmsMaterialDetail(current.value)

      formData.value = {
        materialCode: res.materialCode,
        materialName: res.materialName,
        purchaseType: res.purchaseType,
        materialType: res.materialType,
        primaryUnit: res.primaryUnit,
        standard: res.standard,
        outerDiameter: res.outerDiameter,
        wallThickness: res.wallThickness,
        materialQuality: res.materialQuality,
        length: res.length,
        isMainBranch: res.isMainBranch,
        factory: res.factory,
        certification: res.certification,
        remark: res.remark,
        id: res.id,
      }
      disabled.value = true
      updateCheckData()
    } else {
      formData.value = {}

      disabled.value = false
      updateCheckData()
    }
  }

  watch(() => current.value, onOpen)

  return {
    formItems,
    formData,
    visible,
    formRef,
    onOpen,
    onClose,
    onConfirm,
  }
}

 Weben_CMSרÓôúÂëÉú³ÉÆ÷/Weben_CMS_TemplateDemo/web/src/widgets/HIAWms/Models/Service/WmsMaterialQueryDrawer.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,58 @@
import { Base } from '@/libs/Base/Base'
const request = Base.request

/**
 * æ·»åŠ 
 * @returns
 */
export const addWmsMaterial = (data: any) => {
  return request.post('/api/v1/hIAWms/wmsMaterial', data)
}

/**
 * èŽ·å–详情
 * @returns
 */
export const getWmsMaterial = (id: string) => {
  return request.get(`/api/v1/hIAWms/wmsMaterial/${id}`)
}

/**
 * æ›´æ–°
 * @returns
 */
export const updateWmsMaterial = (id: string, data: Record<string, any>) => {
  return request.put(`/api/v1/hIAWms/wmsMaterial/${id}`, data)
}

/**
 * èŽ·å–枚举
 * @returns
 */
export const getWmsEnumData = (data: any) => {
  return request.post('/api/v1/hIAWms/WmsEnum', data)
}

/**
 * èŽ·å–物料基础列表
 * @returns
 */
export const getWmsDataList = (data: any) => {
  return request.post('/api/v1/hIAWms/wmsmaterial/page', data)
}

/**
 * èŽ·å–仓库列表
 * @returns
 */
export const getStoreDataList = () => {
  return request.get('/api/v1/hIAWms/WmsEnum/StoreList')
}

/**
 * èŽ·å–库区列表
 * @returns
 */
export const getAreaAreaDataList = () => {
  return request.get('/api/v1/hIAWms/WmsEnum/AreaList')
}

 Weben_CMSרÓôúÂëÉú³ÉÆ÷/Weben_CMS_TemplateDemo/web/src/widgets/HIAWms/Models/WmsMaterialQueryDrawer.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,44 @@
import { Base } from '@/libs/Base/Base'
import {
  addWmsMaterial,
  getWmsMaterial,
  updateWmsMaterial,
  getWmsEnumData,
} from './Service/WmsMaterialQueryDrawer'
import { useGlobalState } from '@/libs/Store/Store'

export class WmsMaterialQueryDrawer extends Base<{ [key: string]: any }> {
  constructor() {
    super({
      data: [],
      wmsMaterial: {},
    })
  }

  /**
   * æ·»åŠ 
   * @param data
   */
  async addWmsMaterial(data: Record<string, any>) {
    return addWmsMaterial(data)
  }
  /**
   * æ›´æ–°
   * @param data
   */
  async updateWmsMaterial(id: string, data: Record<string, any>) {
    return updateWmsMaterial(id, data)
  }

  /**
   * èŽ·å–详情
   */
  async getWmsMaterialDetail(current: any, id?: string) {
    return getWmsMaterial(id || current?.id)
  }

  //  èŽ·å–枚举值
  async getWmsEnumData(data: Record<string, any>) {
    return getWmsEnumData(data)
  }
}

 Weben_CMSרÓôúÂëÉú³ÉÆ÷/Weben_CMS_TemplateDemo/web/src/widgets/HIAWms/Views/Pages/Dialog/WmsMaterialQueryDrawer/WmsMaterialQueryDrawer.module.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,3 @@
.drawer {
  width: 800px;
}

 Weben_CMSרÓôúÂëÉú³ÉÆ÷/Weben_CMS_TemplateDemo/web/src/widgets/HIAWms/Views/Pages/Dialog/WmsMaterialQueryDrawer/WmsMaterialQueryDrawer.tsx

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,64 @@
/*
 * ç‰©æ–™åŸºç¡€ä¿¡æ¯æŸ¥è¯¢å¼¹å‡ºæ¡†
*/
import { SetupContext, defineComponent } from 'vue'
import BaseDrawer from '@/components/BaseQueryDrawer/BaseQueryDrawer'
import styles from './WmsMaterialQueryDrawer.module.scss'
import { useWmsMaterialQueryDrawer } from '../../../../Controllers/WmsMaterialQueryDrawer.tsx'
import DyForm from '@/components/DyForm/DyForm'

// @ts-ignore
export default defineComponent<{
  [key: string]: any
}>({
  name: '弹窗',
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    row: {
      type: Object,
    },
    sort: {
      type: Number,
      default: 0,
    },
  },
  emits: ['update:modelValue', 'close', 'submit', 'confirm'],
  setup(props: Record<string, any>, ctx: SetupContext) {
    const {
      onClose,
      onConfirm,
      onOpen,
      formRef,
      visible,
      formItems,
      formData,
    } = useWmsMaterialQueryDrawer(props, ctx)
    return () => (
      <BaseDrawer
        class={styles.drawer}
        size="800px"
        title={props.title || '高级查询'}
        v-model={visible.value}
        close-on-click-modal={true}
        onConfirm={onConfirm}
        onOpen={onOpen}
        before-close={onClose}
        onClose={onClose}
      >
        <DyForm
          ref={formRef}
          formData={formData.value}
          labelWidth="106px"
          formItemProps={formItems}
        ></DyForm>
      </BaseDrawer>
    )
  },
})

 Weben_CMSרÓôúÂëÉú³ÉÆ÷/Weben_CMS_TemplateDemo/web/src/widgets/HIAWms/Views/Pages/WmsMaterial/WmsMaterial.tsx

@@ -5,6 +5,7 @@
import { useWmsMaterial } from '../../../Controllers/WmsMaterial'
import IconButton from '@/components/IconButton/IconButton'
import WmsMaterialDrawer from '../Dialog/WmsMaterialDrawer/WmsMaterialDrawer'
import WmsMaterialQueryDrawer from '../Dialog/WmsMaterialQueryDrawer/WmsMaterialQueryDrawer'
import Search from '@/components/Search/Search'
import { columns } from './Config'
import TdButton from '@/components/TdButton/TdButton'
@@ -43,6 +44,7 @@
      dataSource,
      contextMenu,
      dialogConfig,
      dialogConfigForQuery,
      tableRef,
      current,
      search,
@@ -54,6 +56,7 @@
      onConfirmWmsMaterial,
      onCheck,
      onAddWmsMaterial,
      onAdvancedQuery,
      onExport,
      openDetail,
      onSuccess,
@@ -198,6 +201,14 @@
            sort={sort.value}
            onConfirm={onConfirmWmsMaterial}
          />
           {/* é«˜çº§æŸ¥è¯¢ */}
           <WmsMaterialQueryDrawer
            v-model={dialogConfigForQuery.visible}
            title={dialogConfigForQuery.title}
            row={current.value}
            sort={sort.value}
            onConfirm={onConfirmWmsMaterial}
          />

          {/* æ–°å¢žçš„查询表单 */}
          <ElForm
@@ -299,6 +310,15 @@
                æ·»åŠ 
              </IconButton>
              <el-divider direction="vertical" />
              <IconButton
                v-permission="wmsMaterial-add"
                icon="add-p"
                onClick={onAdvancedQuery}
                type="primary"
              >
                é«˜çº§æŸ¥è¯¢
              </IconButton>
              <el-divider direction="vertical" />
              <el-upload
                v-permission="wmsMaterial-import"
                name="file"