1、长者标签-详情界面样式

2、进销存-库房信息-详情、编辑改为抽屉式
3、进销存-库房信息-详情界面样式调整

src/views/elder/eldertag/components/ElderTagForm.vue

@@ -1,9 +1,9 @@
 <template>
   <a-spin :spinning="confirmLoading">
-    <JFormContainer :disabled="disabled">
+    <JFormContainer :disabled="true">
       <template #detail>
         <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" name="ElderTagForm">
-          <a-row>
+          <a-row class="card-class">
             <a-col :span="24">
               <a-form-item label="标签类型" v-bind="validateInfos.type" id="ElderTagForm-type" name="type">
                 <j-dict-select-tag v-model:value="formData.type" dictCode="elder_tag_type" placeholder="请选择标签类型"
@@ -262,6 +262,19 @@ defineExpose({
 
 <style lang="less" scoped>
 .antd-modal-form {
-  padding: 14px;
+  // padding: 14px;
+}
+
+.card-class {
+	padding-top: 24px;
+	padding-bottom: 24px;
+	padding-left: 14px;
+	padding-right: 14px;
+	// background-color: rgba(255, 255, 255, 0.9);
+	background-color: #fcfdff;
+	border-radius: 10px;
+	// box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px;
+	margin-bottom: 14px;
+
 }
 </style>

src/views/elder/eldertag/components/ElderTagFormEdit.vue

@@ -0,0 +1,280 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <JFormContainer :disabled="disabled">
+      <template #detail>
+        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" name="ElderTagForm">
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="标签类型" v-bind="validateInfos.type" id="ElderTagForm-type" name="type">
+                <j-dict-select-tag v-model:value="formData.type" dictCode="elder_tag_type" placeholder="请选择标签类型"
+                  allowClear :disabled="!!formData.id" @change="handleTypeChanged" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="标签名称" v-bind="validateInfos.tagName" id="ElderTagForm-tagName" name="tagName">
+                <a-input v-model:value="formData.tagName" placeholder="请输入标签名称" allow-clear :disabled="!!formData.id"
+                  :maxlength="10" :showCount="true"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="说明" v-bind="validateInfos.describ" id="ElderTagForm-tagName" name="tagName">
+                <a-textarea v-model:value="formData.describ" placeholder="请输入说明" :maxlength="200" :rows="3"
+                  :autosize="{ minRows: 3 }" :showCount="true" :disabled="!!formData.id" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="价格(元)" v-bind="validateInfos.price" id="ElderTagForm-price" name="price">
+                <a-input-number v-model:value="formData.price" placeholder="请输入价格" style="width: 100%" :min="0"
+                  :max="99.99" :precision="2" @keydown="onPriceKeydown" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="图标" v-bind="validateInfos.pic" id="ElderTagForm-pic" name="pic">
+                <!-- <JImageUploadToOpe v-if="opeType == 'dmlook'" :fileMax="1" v-model:value="dmlookVal">
+                </JImageUploadToOpe> -->
+                <JImageUploadToOpe :toOpe="true" :bizPath="'eldertag'" :fileMax="1" v-model:value="formData.pic"
+                  :disabled="!!formData.id || !isMain">
+                </JImageUploadToOpe>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="焦点图标" v-bind="validateInfos.picFocus" id="ElderTagForm-picFocus" name="picFocus">
+                <!-- <JImageUploadToOpe v-if="opeType == 'dmlook'" :fileMax="1" v-model:value="dmlookVal">
+                </JImageUploadToOpe> -->
+                <JImageUploadToOpe :toOpe="true" :bizPath="'eldertag'" :fileMax="1" v-model:value="formData.picFocus"
+                  :disabled="!!formData.id || !isMain">
+                </JImageUploadToOpe>
+              </a-form-item>
+            </a-col>
+            <!-- <a-col :span="24">
+              <a-form-item label="排序" v-bind="validateInfos.sort" id="ElderTagForm-sort" name="sort">
+                <a-input-number v-model:value="formData.sort" placeholder="请输入排序" style="width: 100%" />
+              </a-form-item>
+            </a-col> -->
+            <a-col :span="24">
+              <a-form-item label="是否启用" v-bind="validateInfos.izEnabled" id="ElderTagForm-izEnabled" name="izEnabled">
+                <j-dict-select-tag type='radio' v-model:value="formData.izEnabled" dictCode="iz_enabled"
+                  placeholder="请选择是否启用" allowClear />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </template>
+    </JFormContainer>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { getValueType } from '/@/utils';
+import { saveOrUpdate } from '../ElderTag.api';
+import { Form } from 'ant-design-vue';
+import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
+import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
+import JImageUploadToOpe from '/@/components/Form/src/jeecg/components/JImageUploadToOpe.vue';
+
+const opeMediaAddress = import.meta.env.VITE_OPE_MEDIA_ADDRESS
+const props = defineProps({
+  formDisabled: { type: Boolean, default: false },
+  formData: { type: Object, default: () => ({}) },
+  formBpm: { type: Boolean, default: true },
+  mediaApiAddress: '',//指令资源请求地址
+  opeType: 'look',
+  isMain: false,//是否主指令库
+});
+const dmlookVal = ref('')
+const defaultBodyPic = import.meta.env.VITE_DEFAULT_ELDER_TAG_BODY_PIC
+const defaultEmoPic = import.meta.env.VITE_DEFAULT_ELDER_TAG_EMO_PIC
+const onPriceKeydown = (e: KeyboardEvent) => {
+  const key = e.key;
+  // 放行控制键
+  if (['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(key)) return;
+  // 只能输数字和点
+  if (!/[\d.]/.test(key)) {
+    e.preventDefault();
+    return;
+  }
+  const input = e.target as HTMLInputElement;
+  const { value, selectionStart: s, selectionEnd: t } = input;
+  const next = value.slice(0, s!) + key + value.slice(t!);
+  // 整数最多2位，小数最多2位
+  if (!/^\d{0,2}(?:\.\d{0,2})?$/.test(next)) {
+    e.preventDefault();
+  }
+};
+const formRef = ref();
+const useForm = Form.useForm;
+const emit = defineEmits(['register', 'ok']);
+const formData = reactive<Record<string, any>>({
+  id: '',
+  type: 'tx',
+  tagName: '',
+  price: 0,
+  pic: defaultBodyPic,
+  picFocus: defaultBodyPic,
+  sort: 99,
+  izEnabled: '0',
+  describ: '',
+});
+const { createMessage } = useMessage();
+const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+const confirmLoading = ref<boolean>(false);
+//表单验证
+const validatorRules = reactive({
+  type: [{ required: true, message: '请输入标签类型!' },],
+  tagName: [{ required: true, message: '请输入标签名称!' },],
+  price: [{ required: true, message: '请输入价格!' }, { pattern: /^(([0-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入正确的金额!' },],
+  izEnabled: [{ required: true, message: '请输入是否启用!' },],
+});
+const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
+
+// 表单禁用
+const disabled = computed(() => {
+  if (props.formBpm === true) {
+    if (props.formData.disabled === false) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+  return props.formDisabled;
+});
+
+
+/**
+ * 新增
+ */
+function add() {
+  edit({});
+}
+
+/**
+ * 编辑
+ */
+function edit(record) {
+  nextTick(() => {
+    resetFields();
+    const tmpData = {};
+    Object.keys(formData).forEach((key) => {
+      if (record.hasOwnProperty(key)) {
+        tmpData[key] = record[key]
+      }
+      //赋值
+      Object.assign(formData, tmpData);
+      // if (props.opeType == 'dmlook') {
+      //   if (!!formData.pic) {
+      //     dmlookVal.value = props.mediaApiAddress + formData.pic
+      //   } else {
+      //     if (formData.type == 'qx') {
+      //       dmlookVal.value = defaultEmoPic
+      //     } else {
+      //       dmlookVal.value = defaultBodyPic
+      //     }
+      //   }
+      // } else {
+      if (!formData.pic) {
+        if (formData.type == 'qx') {
+          formData.pic = defaultEmoPic
+          formData.picFocus = defaultEmoPic
+        } else {
+          formData.pic = defaultBodyPic
+          formData.picFocus = defaultBodyPic
+        }
+      }
+      // }
+    })
+  });
+}
+
+/**
+ * 提交数据
+ */
+async function submitForm() {
+  try {
+    // 触发表单验证
+    await validate();
+  } catch ({ errorFields }) {
+    if (errorFields) {
+      const firstField = errorFields[0];
+      if (firstField) {
+        formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
+      }
+    }
+    return Promise.reject(errorFields);
+  }
+  confirmLoading.value = true;
+  const isUpdate = ref<boolean>(false);
+  //时间格式化
+  let model = formData;
+  if (model.id) {
+    isUpdate.value = true;
+  }
+  //循环数据
+  for (let data in model) {
+    //如果该数据是数组并且是字符串类型
+    if (model[data] instanceof Array) {
+      let valueType = getValueType(formRef.value.getProps, data);
+      //如果是字符串类型的需要变成以逗号分割的字符串
+      if (valueType === 'string') {
+        model[data] = model[data].join(',');
+      }
+    }
+  }
+  if (model.pic == defaultBodyPic || model.pic == defaultEmoPic) {
+    model.pic = null
+  }
+  await saveOrUpdate(model, isUpdate.value)
+    .then((res) => {
+      if (res.success) {
+        createMessage.success(res.message);
+        emit('ok');
+      } else {
+        createMessage.warning(res.message);
+      }
+    })
+    .finally(() => {
+      confirmLoading.value = false;
+    });
+}
+
+function handleTypeChanged(v_) {
+  if (!formData.pic || formData.pic == defaultEmoPic || formData.pic == defaultBodyPic) {
+    if (v_ == 'qx') {
+      formData.pic = defaultEmoPic
+      formData.picFocus = defaultEmoPic
+    } else {
+      formData.pic = defaultBodyPic
+      formData.picFocus = defaultBodyPic
+    }
+  }
+}
+
+defineExpose({
+  add,
+  edit,
+  submitForm,
+});
+</script>
+
+<style lang="less" scoped>
+.antd-modal-form {
+  // padding: 14px;
+}
+
+.card-class {
+  padding-top: 24px;
+  padding-bottom: 24px;
+  padding-left: 14px;
+  padding-right: 14px;
+  // background-color: rgba(255, 255, 255, 0.9);
+  background-color: #fcfdff;
+  border-radius: 10px;
+  // box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px;
+  margin-bottom: 14px;
+
+}
+</style>

src/views/elder/eldertag/components/ElderTagModal.vue

@@ -1,12 +1,14 @@
 <template>
   <a-drawer :title="title" width="50vw" v-model:visible="visible" :closable="true"
-    :footer-style="{ textAlign: 'right' }" @cancel="handleCancel">
+    :footer-style="{ textAlign: 'right' }" :bodyStyle="{ padding: '14px' }" @cancel="handleCancel">
     <template #footer>
       <a-button @click="handleCancel" style="margin-right: 8px;">关闭</a-button>
       <a-button @click="handleOk" v-show="!disableSubmit">确认</a-button>
     </template>
-    <ElderTagForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"
+    <ElderTagForm v-if="disableSubmit" ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"
       :mediaApiAddress="mediaApiAddress" :opeType="opeType" :isMain="isMain"></ElderTagForm>
+    <ElderTagFormEdit v-else ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"
+      :mediaApiAddress="mediaApiAddress" :opeType="opeType" :isMain="isMain"></ElderTagFormEdit>
   </a-drawer>
   <a-drawer :title="'标准标签库'" width="80vw" v-model:visible="etmVisible" :closable="true"
     :footer-style="{ textAlign: 'right' }" @close="handleCancelETM" :maskClosable="true">
@@ -23,6 +25,7 @@
 <script lang="ts" setup>
 import { ref, nextTick, defineExpose } from 'vue';
 import ElderTagForm from './ElderTagForm.vue'
+import ElderTagFormEdit from './ElderTagFormEdit.vue'
 import JModal from '/@/components/Modal/src/JModal/JModal.vue';
 import { clearCache } from '/@/utils/cache/cacheUtil'
 import { useMessage } from '/@/hooks/web/useMessage';

src/views/invoicing/warehouseMaterialInfo/components/CkfzrForm.vue

@@ -1,29 +1,33 @@
 <template>
   <a-spin :spinning="confirmLoading">
-    <JFormContainer :disabled="disabled">
+    <JFormContainer :disabled="true">
       <template #detail>
-        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" name="BlWarehouseMaterialInfoForm">
-          <a-row>
-						<a-col :span="24">
-							<a-form-item label="库房" v-bind="validateInfos.nuName" id="BlWarehouseMaterialInfoForm-nuName" name="nuName" >
-                <a-input v-model:value="formData.nuName"  ></a-input>
-							</a-form-item>
-						</a-col>
-						<a-col :span="24">
-							<a-form-item label="负责人" v-bind="validateInfos.fzr" id="BlWarehouseMaterialInfoForm-fzr" name="fzr" >
-                <a-input v-model:value="formData.fzr" ></a-input>
-							</a-form-item>
-						</a-col>
-						<a-col :span="24">
-							<a-form-item label="负责人电话" v-bind="validateInfos.fzrTel" id="BlWarehouseMaterialInfoForm-fzrTel" name="fzrTel" >
-                <a-input v-model:value="formData.fzrTel" ></a-input>
-							</a-form-item>
-						</a-col>
-						<a-col :span="24">
-							<a-form-item label="负责人头像" v-bind="validateInfos.fzrHeadPath" id="BlWarehouseMaterialInfoForm-fzrHeadPath" name="fzrHeadPath">
+        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
+          name="BlWarehouseMaterialInfoForm">
+          <a-row class="card-class">
+            <a-col :span="24">
+              <a-form-item label="库房" v-bind="validateInfos.nuName" id="BlWarehouseMaterialInfoForm-nuName"
+                name="nuName">
+                <a-input v-model:value="formData.nuName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="负责人" v-bind="validateInfos.fzr" id="BlWarehouseMaterialInfoForm-fzr" name="fzr">
+                <a-input v-model:value="formData.fzr"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="负责人电话" v-bind="validateInfos.fzrTel" id="BlWarehouseMaterialInfoForm-fzrTel"
+                name="fzrTel">
+                <a-input v-model:value="formData.fzrTel"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="负责人头像" v-bind="validateInfos.fzrHeadPath" id="BlWarehouseMaterialInfoForm-fzrHeadPath"
+                name="fzrHeadPath">
                 <j-image-upload :fileMax="1" text="无" v-model:value="formData.fzrHeadPath"></j-image-upload>
-							</a-form-item>
-						</a-col>
+              </a-form-item>
+            </a-col>
           </a-row>
         </a-form>
       </template>
@@ -32,138 +36,151 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
-  import { defHttp } from '/@/utils/http/axios';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
-  import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
-  import { getValueType } from '/@/utils';
-  import { editFzr } from '../BlWarehouseMaterialInfo.api';
-  import { Form } from 'ant-design-vue';
-  import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
-  import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
-  const props = defineProps({
-    formDisabled: { type: Boolean, default: false },
-    formData: { type: Object, default: () => ({})},
-    formBpm: { type: Boolean, default: true }
-  });
-  const formRef = ref();
-  const useForm = Form.useForm;
-  const emit = defineEmits(['register', 'ok']);
-  const formData = reactive<Record<string, any>>({
-    id: '',
-    nuId: '',   
-    nuName: '',   
-    fzr: '',   
-    fzrTel: '',   
-    fzrHeadPath:'',
-  });
-  const { createMessage } = useMessage();
-  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
-  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
-  const confirmLoading = ref<boolean>(false);
-  //表单验证
-  const validatorRules = reactive({
-    nuName: [{ required: true, message: '请输入库房名称!' },],  
-    fzrTel: [{ required: false, message: '请输入负责人电话!' },{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式有误', trigger: 'blur' }],
-  });
-  const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
+import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
+import { getValueType } from '/@/utils';
+import { editFzr } from '../BlWarehouseMaterialInfo.api';
+import { Form } from 'ant-design-vue';
+import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
+import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
+import { truncate } from 'node:fs';
+const props = defineProps({
+  formDisabled: { type: Boolean, default: false },
+  formData: { type: Object, default: () => ({}) },
+  formBpm: { type: Boolean, default: true }
+});
+const formRef = ref();
+const useForm = Form.useForm;
+const emit = defineEmits(['register', 'ok']);
+const formData = reactive<Record<string, any>>({
+  id: '',
+  nuId: '',
+  nuName: '',
+  fzr: '',
+  fzrTel: '',
+  fzrHeadPath: '',
+});
+const { createMessage } = useMessage();
+const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+const confirmLoading = ref<boolean>(false);
+//表单验证
+const validatorRules = reactive({
+  nuName: [{ required: true, message: '请输入库房名称!' },],
+  fzrTel: [{ required: false, message: '请输入负责人电话!' }, { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式有误', trigger: 'blur' }],
+});
+const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
 
-  // 表单禁用
-  const disabled = computed(()=>{
-    if(props.formBpm === true){
-      if(props.formData.disabled === false){
-        return false;
-      }else{
-        return true;
+// 表单禁用
+const disabled = computed(() => {
+  if (props.formBpm === true) {
+    if (props.formData.disabled === false) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+  return props.formDisabled;
+});
+
+
+/**
+ * 新增
+ */
+function add() {
+  edit({});
+}
+
+/**
+ * 编辑
+ */
+function edit(record) {
+  nextTick(() => {
+    resetFields();
+    const tmpData = {};
+    Object.keys(formData).forEach((key) => {
+      if (record.hasOwnProperty(key)) {
+        tmpData[key] = record[key]
+      }
+    })
+    //赋值
+    Object.assign(formData, tmpData);
+  });
+}
+
+/**
+ * 提交数据
+ */
+async function submitForm() {
+  try {
+    // 触发表单验证
+    await validate();
+  } catch ({ errorFields }) {
+    if (errorFields) {
+      const firstField = errorFields[0];
+      if (firstField) {
+        formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
       }
     }
-    return props.formDisabled;
-  });
-
-  
-  /**
-   * 新增
-   */
-  function add() {
-    edit({});
+    return Promise.reject(errorFields);
   }
-
-  /**
-   * 编辑
-   */
-  function edit(record) {
-    nextTick(() => {
-      resetFields();
-      const tmpData = {};
-      Object.keys(formData).forEach((key) => {
-        if(record.hasOwnProperty(key)){
-          tmpData[key] = record[key]
-        }
-      })
-      //赋值
-      Object.assign(formData, tmpData);
+  confirmLoading.value = true;
+  const isUpdate = ref<boolean>(false);
+  //时间格式化
+  let model = formData;
+  if (model.id) {
+    isUpdate.value = true;
+  }
+  //循环数据
+  for (let data in model) {
+    //如果该数据是数组并且是字符串类型
+    if (model[data] instanceof Array) {
+      let valueType = getValueType(formRef.value.getProps, data);
+      //如果是字符串类型的需要变成以逗号分割的字符串
+      if (valueType === 'string') {
+        model[data] = model[data].join(',');
+      }
+    }
+  }
+  await editFzr(model, isUpdate.value)
+    .then((res) => {
+      if (res.success) {
+        createMessage.success(res.message);
+        emit('ok');
+      } else {
+        createMessage.warning(res.message);
+      }
+    })
+    .finally(() => {
+      confirmLoading.value = false;
     });
-  }
-
-  /**
-   * 提交数据
-   */
-  async function submitForm() {
-    try {
-      // 触发表单验证
-      await validate();
-    } catch ({ errorFields }) {
-      if (errorFields) {
-        const firstField = errorFields[0];
-        if (firstField) {
-          formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
-        }
-      }
-      return Promise.reject(errorFields);
-    }
-    confirmLoading.value = true;
-    const isUpdate = ref<boolean>(false);
-    //时间格式化
-    let model = formData;
-    if (model.id) {
-      isUpdate.value = true;
-    }
-    //循环数据
-    for (let data in model) {
-      //如果该数据是数组并且是字符串类型
-      if (model[data] instanceof Array) {
-        let valueType = getValueType(formRef.value.getProps, data);
-        //如果是字符串类型的需要变成以逗号分割的字符串
-        if (valueType === 'string') {
-          model[data] = model[data].join(',');
-        }
-      }
-    }
-    await editFzr(model, isUpdate.value)
-      .then((res) => {
-        if (res.success) {
-          createMessage.success(res.message);
-          emit('ok');
-        } else {
-          createMessage.warning(res.message);
-        }
-      })
-      .finally(() => {
-        confirmLoading.value = false;
-      });
-  }
+}
 
 
-  defineExpose({
-    add,
-    edit,
-    submitForm,
-  });
+defineExpose({
+  add,
+  edit,
+  submitForm,
+});
 </script>
 
 <style lang="less" scoped>
-  .antd-modal-form {
-    padding: 14px;
-  }
+.antd-modal-form {
+  // padding: 14px;
+}
+
+.card-class {
+  padding-top: 24px;
+  padding-bottom: 24px;
+  padding-left: 14px;
+  padding-right: 14px;
+  // background-color: rgba(255, 255, 255, 0.9);
+  background-color: #fcfdff;
+  border-radius: 10px;
+  // box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px;
+  margin-bottom: 14px;
+}
 </style>

src/views/invoicing/warehouseMaterialInfo/components/CkfzrFormEdit.vue

@@ -0,0 +1,169 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <JFormContainer :disabled="disabled">
+      <template #detail>
+        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" name="BlWarehouseMaterialInfoForm">
+          <a-row>
+						<a-col :span="24">
+							<a-form-item label="库房" v-bind="validateInfos.nuName" id="BlWarehouseMaterialInfoForm-nuName" name="nuName" >
+                <a-input v-model:value="formData.nuName"  ></a-input>
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="负责人" v-bind="validateInfos.fzr" id="BlWarehouseMaterialInfoForm-fzr" name="fzr" >
+                <a-input v-model:value="formData.fzr" ></a-input>
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="负责人电话" v-bind="validateInfos.fzrTel" id="BlWarehouseMaterialInfoForm-fzrTel" name="fzrTel" >
+                <a-input v-model:value="formData.fzrTel" ></a-input>
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="负责人头像" v-bind="validateInfos.fzrHeadPath" id="BlWarehouseMaterialInfoForm-fzrHeadPath" name="fzrHeadPath">
+                <j-image-upload :fileMax="1" text="无" v-model:value="formData.fzrHeadPath"></j-image-upload>
+							</a-form-item>
+						</a-col>
+          </a-row>
+        </a-form>
+      </template>
+    </JFormContainer>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+  import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
+  import { getValueType } from '/@/utils';
+  import { editFzr } from '../BlWarehouseMaterialInfo.api';
+  import { Form } from 'ant-design-vue';
+  import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
+  import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
+  const props = defineProps({
+    formDisabled: { type: Boolean, default: false },
+    formData: { type: Object, default: () => ({})},
+    formBpm: { type: Boolean, default: true }
+  });
+  const formRef = ref();
+  const useForm = Form.useForm;
+  const emit = defineEmits(['register', 'ok']);
+  const formData = reactive<Record<string, any>>({
+    id: '',
+    nuId: '',   
+    nuName: '',   
+    fzr: '',   
+    fzrTel: '',   
+    fzrHeadPath:'',
+  });
+  const { createMessage } = useMessage();
+  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+  const confirmLoading = ref<boolean>(false);
+  //表单验证
+  const validatorRules = reactive({
+    nuName: [{ required: true, message: '请输入库房名称!' },],  
+    fzrTel: [{ required: false, message: '请输入负责人电话!' },{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式有误', trigger: 'blur' }],
+  });
+  const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
+
+  // 表单禁用
+  const disabled = computed(()=>{
+    if(props.formBpm === true){
+      if(props.formData.disabled === false){
+        return false;
+      }else{
+        return true;
+      }
+    }
+    return props.formDisabled;
+  });
+
+  
+  /**
+   * 新增
+   */
+  function add() {
+    edit({});
+  }
+
+  /**
+   * 编辑
+   */
+  function edit(record) {
+    nextTick(() => {
+      resetFields();
+      const tmpData = {};
+      Object.keys(formData).forEach((key) => {
+        if(record.hasOwnProperty(key)){
+          tmpData[key] = record[key]
+        }
+      })
+      //赋值
+      Object.assign(formData, tmpData);
+    });
+  }
+
+  /**
+   * 提交数据
+   */
+  async function submitForm() {
+    try {
+      // 触发表单验证
+      await validate();
+    } catch ({ errorFields }) {
+      if (errorFields) {
+        const firstField = errorFields[0];
+        if (firstField) {
+          formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
+        }
+      }
+      return Promise.reject(errorFields);
+    }
+    confirmLoading.value = true;
+    const isUpdate = ref<boolean>(false);
+    //时间格式化
+    let model = formData;
+    if (model.id) {
+      isUpdate.value = true;
+    }
+    //循环数据
+    for (let data in model) {
+      //如果该数据是数组并且是字符串类型
+      if (model[data] instanceof Array) {
+        let valueType = getValueType(formRef.value.getProps, data);
+        //如果是字符串类型的需要变成以逗号分割的字符串
+        if (valueType === 'string') {
+          model[data] = model[data].join(',');
+        }
+      }
+    }
+    await editFzr(model, isUpdate.value)
+      .then((res) => {
+        if (res.success) {
+          createMessage.success(res.message);
+          emit('ok');
+        } else {
+          createMessage.warning(res.message);
+        }
+      })
+      .finally(() => {
+        confirmLoading.value = false;
+      });
+  }
+
+
+  defineExpose({
+    add,
+    edit,
+    submitForm,
+  });
+</script>
+
+<style lang="less" scoped>
+  .antd-modal-form {
+    // padding: 14px;
+  }
+</style>

src/views/invoicing/warehouseMaterialInfo/components/CkfzrModal.vue

@@ -1,77 +1,91 @@
 <template>
-  <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
+  <!-- <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
     <CkfzrForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></CkfzrForm>
-  </j-modal>
+  </j-modal> -->
+
+  <a-drawer :title="title" width="50vw" v-model:visible="visible" :closable="true"
+    :footer-style="{ textAlign: 'right' }" :bodyStyle="{ padding: '14px' }" @cancel="handleCancel">
+    <template #footer>
+      <a-button @click="handleCancel" style="margin-right: 8px;">关闭</a-button>
+      <a-button @click="handleOk" v-show="!disableSubmit">确认</a-button>
+    </template>
+    <CkfzrForm v-if="disableSubmit" ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit"
+      :formBpm="false">
+    </CkfzrForm>
+    <CkfzrFormEdit v-else ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false">
+    </CkfzrFormEdit>
+  </a-drawer>
 </template>
 
 <script lang="ts" setup>
-  import { ref, nextTick, defineExpose } from 'vue';
-  import CkfzrForm from './CkfzrForm.vue'
-  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
-  
-  const title = ref<string>('');
-  const width = ref<number>(800);
-  const visible = ref<boolean>(false);
-  const disableSubmit = ref<boolean>(false);
-  const registerForm = ref();
-  const emit = defineEmits(['register', 'success']);
+import { ref, nextTick, defineExpose } from 'vue';
+import CkfzrForm from './CkfzrForm.vue'
+import CkfzrFormEdit from './CkfzrFormEdit.vue'
+import JModal from '/@/components/Modal/src/JModal/JModal.vue';
 
-  /**
-   * 新增
-   */
-  function add() {
-    title.value = '新增';
-    visible.value = true;
-    nextTick(() => {
-      registerForm.value.add();
-    });
-  }
-  
-  /**
-   * 编辑
-   * @param record
-   */
-  function edit(record) {
-    title.value = disableSubmit.value ? '详情' : '编辑';
-    visible.value = true;
-    nextTick(() => {
-      registerForm.value.edit(record);
-    });
-  }
-  
-  /**
-   * 确定按钮点击事件
-   */
-  function handleOk() {
-    registerForm.value.submitForm();
-  }
+const title = ref<string>('');
+const width = ref<number>(800);
+const visible = ref<boolean>(false);
+const disableSubmit = ref<boolean>(false);
+const registerForm = ref();
+const emit = defineEmits(['register', 'success']);
 
-  /**
-   * form保存回调事件
-   */
-  function submitCallback() {
-    handleCancel();
-    emit('success');
-  }
-
-  /**
-   * 取消按钮回调事件
-   */
-  function handleCancel() {
-    visible.value = false;
-  }
-
-  defineExpose({
-    add,
-    edit,
-    disableSubmit,
+/**
+ * 新增
+ */
+function add() {
+  title.value = '新增';
+  visible.value = true;
+  nextTick(() => {
+    registerForm.value.add();
   });
+}
+
+/**
+ * 编辑
+ * @param record
+ */
+function edit(record) {
+  title.value = disableSubmit.value ? '详情' : '编辑';
+  visible.value = true;
+  nextTick(() => {
+    registerForm.value.edit(record);
+  });
+}
+
+/**
+ * 确定按钮点击事件
+ */
+function handleOk() {
+  registerForm.value.submitForm();
+}
+
+/**
+ * form保存回调事件
+ */
+function submitCallback() {
+  handleCancel();
+  emit('success');
+}
+
+/**
+ * 取消按钮回调事件
+ */
+function handleCancel() {
+  visible.value = false;
+}
+
+defineExpose({
+  add,
+  edit,
+  disableSubmit,
+});
 </script>
 
 <style lang="less">
-  /**隐藏样式-modal确定按钮 */
-  .jee-hidden {
-    display: none !important;
-  }
+/**隐藏样式-modal确定按钮 */
+.jee-hidden {
+  display: none !important;
+}
 </style>
 <style lang="less" scoped></style>