Merge branch 'master' into 'master'

签名剪裁并导入以及部分页面调整

See merge request lighter/vue-intergration-platform!91

package.json

@@ -36,6 +36,7 @@
     "qrcanvas": "3.1.2",
     "sortablejs": "1.15.2",
     "vue": "3.4.27",
+    "vue-cropper": "^1.1.2",
     "vue-router": "4.0.16",
     "vue3-json-viewer": "2.2.2",
     "vue3-print-nb": "0.1.4",

src/api/settings/permission-settings.js

@@ -93,4 +93,11 @@ export function resetPasswordByCode(data) {
     })
 }
 
+export function selectAutographImageByCode(code) {
+    return request({
+        url: '/settings/selectAutographImageByCode',
+        method: 'get',
+        params: {code},
+    })
+}
 

src/views/settings/permissions/LUpload.vue

@@ -1,35 +1,146 @@
 <template>
     <PageLayer>
         <template #mainMaxContentHeight>
-            <el-form-item label="签名图片" prop="image">
-                <el-upload class="dl-avatar-uploader-min square"
-                    :class="{ uoloadBtn: signatureInfo.showBtnDealImg, disUoloadBtn: signatureInfo.noneBtnImg }"
-                    :action="signatureInfo.uploadUrl" :limit="signatureInfo.limitCountImg" :data="signatureInfo.param"
-                    :on-success="coverFileSuccess" :on-remove="coverFileRemove" :on-exceed="handleExceedCover"
-                    :before-upload="beforeImageUpload" :on-change="handleImgChange" :file-list="signatureInfo.fileList"
-                    list-type="picture-card" accept="image/*">
-                    <el-button type="text">上传图片</el-button>
-                    <template #tip>
-                        <div class="el-upload__tip">只能上传图片,且单张图片大小不能超过10MB</div>
-                    </template>
-                </el-upload>
-            </el-form-item>
+          <el-form-item label="签名图片" prop="image">
+            <div class="demo-image">
+              <el-image :src="srcUrl" fit="cover" loading="lazy"/>
+            </div>
+          </el-form-item>
+          <el-form-item label="图片上传" prop="image">
+            <div class="img-item" v-for="(item, index) in fileList" :key="index">
+              <img :src="item.src" alt="1"/>
+              <el-icon class="uploader-close" @click="delFn(index)"><Close /></el-icon>
+              <div v-if="item.isSuccess" class="uploader-Check"><el-icon ><Check /></el-icon></div>
+              <div class="button-div" v-if="item.file && isCropper">
+                <el-button type="success" @click="uploadFileFn(item)">上传</el-button>
+                <el-button type="primary" @click="cropperFn(item, index)">裁剪</el-button>
+              </div>
+            </div>
+            <el-upload
+                v-if="multiple || (!multiple && fileList.length === 0)"
+                class="avatar-uploader" action="#"
+                :accept="acceptArray.length > 0 ? acceptArray.map((n) => acceptType[n]).join(',') : '*'"
+                :http-request="!isCropper ? uploadFileFn : () => {}"
+                :multiple="multiple"
+                :show-file-list="false"
+                :before-upload="beforeAvatarUpload">
+              <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
+            </el-upload>
+          </el-form-item>
         </template>
     </PageLayer>
+  <el-dialog title="裁切图片" v-model="showCropper" width="550px">
+    <div class="cropper-content">
+      <div class="cropper-box">
+        <div class="cropper">
+          <vue-cropper
+              ref="cropperRefs"
+              :img="option.img"
+              :output-size="option.outputSize"
+              :info="option.info"
+              :can-scale="option.canScale"
+              :auto-crop="option.autoCrop"
+              :auto-crop-width="option.autoCropWidth"
+              :auto-crop-height="option.autoCropHeight"
+              :fixed="option.fixed"
+              :fixed-number="option.fixedNumber"
+              :full="option.full"
+              :fixed-box="option.fixedBox"
+              :can-move="option.canMove"
+              :can-move-box="option.canMoveBox"
+              :original="option.original"
+              :center-box="option.centerBox"
+              :height="option.height"
+              :info-true="option.infoTrue"
+              :max-img-size="option.maxImgSize"
+              :enlarge="option.enlarge"
+              :mode="option.mode"
+              :limit-min-size="option.limitMinSize"
+          />
+        </div>
+      </div>
+    </div>
+    <span slot="footer">
+      <div class="dialog-footer">
+        <el-button @click="showCropper = false">取 消</el-button>
+        <el-button type="primary" @click="onSubmit">确 定</el-button>
+      </div>
+    </span>
+  </el-dialog>
 </template>
 
 <script setup name="LUpload">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import PageLayer from '@/layout/PageLayer.vue'
 import { ElMessage } from 'element-plus'
+import { selectAutographImageByCode } from '@/api/settings/permission-settings'
+import { Plus, Close,Check } from "@element-plus/icons-vue"
+import "vue-cropper/dist/index.css"
+import { VueCropper } from "vue-cropper"
 
 const image = ref('')
+const srcUrl = ref('')
 const props = defineProps({
-    signatureData: {
-        type: Object,
-        default: {}
-    }
-})
+  //第一版所需值
+  signatureData: {
+    type: Object,
+    default: {}
+  },
+  // 额外值
+  otherData: {
+    type: Object,
+    default: () => {},
+  },
+  // 请求头
+  headers: {
+    type: Object,
+    default: () => {},
+  },
+  //  参数值
+  modelValue: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  // 多选
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  //   大小限制：4 * 1024 * 1024 = 10MB
+  size: {
+    type: Number,
+    default: 4 * 1024 * 1024,
+  },
+  // 是否需要裁剪
+  isCropper: {
+    type: Boolean,
+    default: true,
+  },
+  // 请求的url
+  sendUrl: {
+    type: String,
+    default: "",
+  },
+});
+
+const acceptType = reactive({
+  doc: "application/msword",
+  docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  ppt: "application/vnd.ms-powerpoint",
+  pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  xls: "application/vnd.ms-excel",
+  xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  pdf: "application/pdf",
+  csv: ".csv",
+  txt: "text/plain",
+  image: "image/*",
+  png: "image/png",
+  gif: "image/gif",
+  jpg: "image/jpg",
+  jpeg: "image/jpeg",
+});
 
 const signatureInfo = ref({
     uploadUrl: '',
@@ -42,47 +153,47 @@ const signatureInfo = ref({
     noneBtnImg: false,
 })
 
+const tips = ref('')
 onMounted(async () => {
     await nextTick(() => {
-        console.log(props.signatureData)
-        signatureInfo.value = props.signatureData
-        console.log(signatureInfo.value)
+      signatureInfo.value = props.signatureData
+      queryAutographImageByCode(props.signatureData.param.code)
+      tips.value = '只能上传图片,且单张图片大小不能超过' + props.signatureData.pSize +'MB'
     })
+})
 
+watch(() => props.signatureData, () => {
+  signatureInfo.value = props.signatureData
 })
 
+const queryAutographImageByCode= (code) => {
+  selectAutographImageByCode(code)
+      .then((res) => {
+        if(res.autograph_image){
+          srcUrl.value = 'data:image/png;base64,' + res.autograph_image
+        }
+      })
+      .catch(() => {
+
+      })
+}
+
 // 上传前，限制的上传图片大小
 const beforeImageUpload = (rawFile) => {
-    if (rawFile.size / 1024 / 1024 > signatureInfo.value.pSize) {
+  const isJPG = rawFile.type === 'image/jpeg' || rawFile.type === 'image/png'
+  if (!isJPG) {
+    ElMessage.error('上传头像图片只能是 jpg 或 png 格式!')
+  }
+  if (rawFile.size / 1024 / 1024 > signatureInfo.value.pSize) {
         ElMessage.error("单张图片大小不能超过" + signatureInfo.value.pSize + "MB!");
         return false;
     }
     return true;
 }
 
-// 上传成功，获取返回的图片地址
-const handleImgChange = (file, fileList) => {
-    signatureInfo.value.noneBtnImg = fileList.length >= signatureInfo.value.limitCountImg
-}
-
-const coverFileSuccess = (response, file, fileList) => {
-    if (response.code == 0) {
-        let obj = {}
-        obj.name = file.name
-        obj.url = response.data.url
-        signatureInfo.value.coversList.push(obj)
-    } else {
-        ElMessage.error({
-            message: response.msg,
-            type: "error",
-        });
-    }
-
-}
-
 const coverFileRemove = (file, fileList) => {
     signatureInfo.value.coversList.forEach((item, index) => {
-        if (file.name == item.name) {
+        if (file.name === item.name) {
             signatureInfo.coversList.splice(index, 1);
         }
     });
@@ -95,4 +206,326 @@ const handleExceedCover = (files, fileList) => {
         type: "error",
     });
 }
+const emits = defineEmits(['update:modelValue', 'close', 'closeSignatureDialog'])
+// <{(e:"parentClick1",data:string):void,(e:"parentClick2",data:string):void}>()
+
+const cropperRefs = ref();
+const cropperCb = ref(null);
+const showCropper = ref(false);
+let fileList = reactive([]);
+//选择类型
+const acceptArray = reactive(["png", "jpg", "jpeg"]);
+
+// 监听传入的值
+watch(
+    props.modelValue,
+    (value) => {
+      const valueList = value || [];
+      let newFileList = [];
+      valueList.forEach((item) => {
+        const indexThis=fileList.findIndex(n=>n.src===item)
+        if(indexThis===-1){
+          newFileList.push({
+            src: item,
+            isSuccess: true,
+          });
+        }
+      });
+      fileList.unshift(...newFileList);
+    },
+    { immediate: true, deep: true }
+);
+
+// 监听当前页面的fileList
+watch(
+    fileList,
+    (value) => {
+      const valueList = value
+          .map((n) => {
+            if (n.isSuccess) {
+              return n.src;
+            }
+            return null;
+          })
+          .filter((n) => n != null);
+      emits("update:modelValue", valueList);
+    },
+    { deep: true }
+);
+
+// 裁剪的配置
+const option = reactive({
+  img: "", // 裁剪图片的地址
+  outputSize: 1, // 裁剪生成图片的质量(可选0.1 - 1)
+  outputType: "jpeg", // 裁剪生成图片的格式（jpeg || png || webp）
+  info: false, // 图片大小信息
+  canScale: true, // 图片是否允许滚轮缩放
+  autoCrop: true, // 是否默认生成截图框
+  autoCropWidth: 230, //默认生成截图框宽度
+  autoCropHeight: 150, //默认生成截图框高度
+  fixed: false, // 是否开启截图框宽高固定比例
+  fixedNumber: [1.53, 1], //截图框的宽高比例
+  full: false, // false按原比例裁切图片，不失真
+  fixedBox: false, // 固定截图框大小，不允许改变
+  canMove: true, // 上传图片是否可以移动
+  canMoveBox: true, // 截图框能否拖动
+  original: true, // 上传图片按照原始比例渲染
+  centerBox: true, // 截图框是否被限制在图片里面
+  high: false, // 是否按照设备的dpr 输出等比例图片
+  infoTrue: false, // true为展示真实输出图片宽高，false展示看到的截图框宽高
+  maxImgSize: 3000, // 限制图片最大宽度和高度
+  enlarge: 1, // 图片根据截图框输出比例倍数
+  mode: "550px 400px", // 图片默认渲染方式
+  limitMinSize: [108, 108], // 裁剪框限制最小区域
+  minCropBoxWidth: 108, // 设置最小裁切框宽度
+  minCropBoxHeight: 108, // 设置最小裁切框高度
+});
+
+// 类型，大小判断
+const judegFileSize = (file) => {
+  const filterSize = (size) => {
+    const pow1024 = (num) => {
+      return Math.pow(1024, num);
+    };
+    if (!size) return "";
+    if (size < pow1024(1)) return size + " B";
+    if (size < pow1024(2)) return (size / pow1024(1)).toFixed(0) + " KB";
+    if (size < pow1024(3)) return (size / pow1024(2)).toFixed(0) + " MB";
+    if (size < pow1024(4)) return (size / pow1024(3)).toFixed(0) + " GB";
+    return (size / pow1024(4)).toFixed(2) + " TB";
+  };
+  let retunBoolean = true;
+  let fileSize = file.size;
+  //判断文件类型
+  const fileExtArray = file.name.split(".");
+  const judegFn = () => {
+    if (acceptArray.indexOf(fileExtArray.at(-1)) === -1) {
+      alert(`${file.name}上传失败，只能上传${acceptArray.join("、")}`);
+      retunBoolean = false;
+    }
+  };
+  if (acceptArray.length > 0) {
+    if (acceptArray.indexOf("image") !== -1) {
+      var pattern = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
+      // 判断文件名是否匹配图片格式的正则表达式
+      if (!pattern.test(`.${fileExtArray.at(-1)}`)) {
+        judegFn();
+      }
+    } else {
+      judegFn();
+    }
+  }
+  if (retunBoolean) {
+    if (props.size > 0 && fileSize > props.size) {
+      ElMessage.info(`最大上传${filterSize(props.size)}`);
+      retunBoolean = false;
+    }
+  }
+  return retunBoolean;
+};
+const beforeAvatarUpload = (rawFile) => {
+  let retunBoolean = judegFileSize(rawFile);
+  if (retunBoolean) {
+    fileList.push({
+      src: URL.createObjectURL(rawFile),
+      file: rawFile,
+    });
+  }
+  return retunBoolean;
+};
+
+// 裁剪
+const cropperFn = (item, index) => {
+  showCropper.value = true;
+  option.img = URL.createObjectURL(item.file);
+  const reader = new FileReader();
+  reader.readAsDataURL(item.file);
+  cropperCb.value = (res) => {
+    if (res) {
+      cropperRefs.value.getCropBlob((data) => {
+        const result = new File([data], item.file.name, {
+          type: item.file.type,
+          lastModified: Date.now(),
+        });
+        result["uid"] = item.file.uid;
+        fileList.splice(index, 1, {
+          src: URL.createObjectURL(result),
+          file: result,
+        });
+        showCropper.value = false;
+      });
+    }
+  };
+};
+
+// 删除
+const delFn = (index) => {
+  fileList.splice(index, 1);
+};
+// 弹窗确定裁剪
+const onSubmit = () => {
+  if (cropperCb.value) cropperCb.value(true);
+};
+
+// 真实上传
+const uploadFileFn = (item) => {
+  if (props.sendUrl === "") return false;
+  // successFn(item.src);
+  const formData = new FormData();
+  formData.append("file", item.file);
+  if (props.otherData) {
+    Object.keys(props.otherData).forEach((key) => {
+      formData.append(key, props.otherData[key]);
+    });
+  }
+  fetch(props.sendUrl, {
+    method: "POST",
+    body: formData,
+    headers: props.headers,
+    "Content-type": "multipart/form-data",
+  })
+      .then((response) => response.json())
+      .then((res) => {
+        if(res.code === 200){
+          ElMessage.success(res.message)
+        }
+        // 接口成功后替换url
+        // successFn(props.sendUrl);
+        emits('closeSignatureDialog', true)
+      })
+      .catch((error) => {
+        // 接口失败的
+        console.log(error)
+      });
+};
+
+const successFn = (url) => {
+  const index = fileList.findIndex((n) => {
+    return n.file && n.file.uid === item.file.uid;
+  });
+  if (index !== -1) {
+    fileList.splice(index, 1, {
+      src: url,
+      file: item.file,
+      code: props.signatureData.param.code,
+      isSuccess: true,
+    });
+  }
+};
 </script>
+<style scoped lang="scss">
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  border: 1px solid #ccc;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+
+.uploadMian {
+  vertical-align: top;
+
+  display: flex;
+  flex-wrap: wrap;
+}
+.avatar-uploader {
+}
+
+.img-item {
+  display: inline-block;
+  width: 178px;
+  height: 178px;
+  margin-right: 10px;
+  border: 1px solid #ccc;
+  position: relative;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    position: relative;
+    z-index: 9;
+  }
+  &:hover{
+    .el-icon.uploader-close {
+      display: flex !important;
+    }
+  }
+  .uploader-Check{
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    z-index: 18;
+    top: 0;
+    left: 0;
+    display: flex;
+    background-color: #67c23a;
+    clip-path: polygon(0 0 ,100% 0, 0 100%);
+    -webkit-clip-path:polygon(0 0 ,100% 0,0 100% );
+    .el-icon{
+      position: absolute;
+      top: 4px;
+      left: 4px;
+      color: #fff;
+    }
+  }
+  .el-icon.uploader-close {
+    display: none;
+    position: absolute;
+    z-index: 20;
+    top: -5px;
+    right: -5px;
+    width: 20px;
+    height: 20px;
+    background-color: red;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    color: #fff;
+    font-size: 12px;
+    cursor: pointer;
+  }
+  .button-div {
+    position: absolute;
+    height: 45px;
+    z-index: 20;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.2);
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+}
+.cropper-content {
+  display: flex;
+  display: -webkit-flex;
+  justify-content: flex-end;
+  .cropper-box {
+    width: 550px;
+    .cropper {
+      width: auto;
+      height: 400px;
+    }
+  }
+
+  .show-preview {
+    flex: 1;
+    -webkit-flex: 1;
+    display: flex;
+    display: -webkit-flex;
+    justify-content: center;
+    .preview {
+      overflow: hidden;
+      border: 1px solid #67c23a;
+      background: #cccccc;
+    }
+  }
+}
+.dialog-footer {
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+}
+</style>

src/views/settings/permissions/UserRoleSettings.vue

@@ -126,7 +126,8 @@
   <el-dialog title="上传签名" v-model="signatureDialog" :close-on-click-modal="false" :close-on-press-escape="false"
              destroy-on-close>
     <!-- LUpload组件 -->
-    <LUpload :signatureData="signatureData"/>
+    <LUpload :otherData="paramData" :headers="headerData" v-model="urlList" :multiple="false"
+             :sendUrl="sendUrl" :signatureData="signatureData" @closeSignatureDialog="closeSignatureDialog"/>
   </el-dialog>
 </template>
 
@@ -363,11 +364,22 @@ const signatureData = ref({
 const signatureDialog = ref(false)
 const uploadSignature = (val) => {
   signatureData.value.param.code = val.code
+  paramData.value.code = val.code
   if (val.autographImag) {
     signatureData.value.coversList.push(val.autographImag)
   }
   signatureDialog.value = true
 }
-
+const closeSignatureDialog = (flag) => {
+  if (flag) {
+    signatureDialog.value = false
+  }
+}
+const sendUrl = ref(baseurl+'/settings/setAutographImage')
+const urlList = ref([])
+const headerData = {
+  token: localStorage.token,
+}
+const paramData = ref({})
 
 </script>

src/views/yp-dict/YpDictInfo.vue

@@ -1,84 +1,87 @@
 <template>
-    <page-layer>
-        <template #header>
-            <el-input v-model="text" class="w-50 m-2" style="width: 320px" placeholder="请输入编码/名称/首拼/五笔" clearable>
-                <template #prepend>编码/名称/首拼/五笔 </template>
-            </el-input>
-            <el-select v-model="groupNo" placeholder="请选择药库" filterable clearable style="width: 240px;margin-left: 3px">
-                <el-option v-for="item in ypGroupNameData" :key="item.code" :label="item.name" :value="item.code">
-                    <span style="float: left">{{ item.label }}</span>
-                    <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px; ">
+  <div class="layout_display_flex_y">
+    <div style="margin-bottom: 6px; background-color: #fff;">
+      <el-input v-model="text" class="w-50 m-2" style="width: 320px" placeholder="请输入编码/名称/首拼/五笔" clearable>
+        <template #prepend>编码/名称/首拼/五笔 </template>
+      </el-input>
+      <el-select v-model="groupNo" placeholder="请选择药库" filterable clearable style="width: 240px;margin-left: 3px">
+        <el-option v-for="item in ypGroupNameData" :key="item.code" :label="item.name" :value="item.code">
+          <span style="float: left">{{ item.label }}</span>
+          <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px; ">
                         {{ item.value }}
                     </span>
-                </el-option>
-            </el-select>
-            <el-button type="primary" icon="Search" @click="queryYpDict" style="margin-left: 5px">查询</el-button>
-            <el-button type="primary" icon="Plus" @click="addYpDict" style="margin-left: 5px">新增</el-button>
-        </template>
-        <template #main>
-            <el-table :data="drugDictData.slice(pageSize * (currentPage - 1), pageSize * currentPage)" border
-                style="width: 100%" :height="tableHeight" stripe highlight-current-row>
-                <el-table-column type="index" label="序号" width="60" />
-                <el-table-column prop="code" label="药品编码" width="70" />
-                <el-table-column prop="serial" label="药品包装" width="70" />
-                <el-table-column prop="name" label="药品名称" width="300" show-overflow-tooltip />
-                <el-table-column prop="specification" label="药品规格" width="180" show-overflow-tooltip />
-                <el-table-column prop="packRetprice" label="药品零售价" width="100" />
-                <el-table-column prop="delFlag" label="状态" width="70">
-                    <template #default="scope">
-                        <span v-if="scope.row.delFlag === '1'" style="color:#d12020;">停用</span>
-                        <span v-else></span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="ykFlag" label="药库状态" width="80" v-if="isYk">
-                    <template #default="scope">
-                        <span v-if="scope.row.ykFlag === '1'" style="color:#d12020;">药库停用</span>
-                        <span v-else></span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="pyCode" label="拼音码" width="150" />
-                <el-table-column prop="dcode" label="五笔码" width="150" />
-                <el-table-column fixed="right" label="操作" min-width="400" width="400" center>
-                    <template #default="scope">
-                        <el-button type="primary" size="small" v-if="!scope.row.isEdit"
-                            @click="editYpDict(scope.row)">编辑</el-button>
-                        <el-button :type="scope.row.tempPurchaseFlag === '1' ? 'primary' : 'info'" size="small"
-                            v-if="!scope.row.isEdit" @click="tempPurchase(scope.row)">临购</el-button>
-                        <el-button :type="scope.row.jbFlag === '1' ? 'primary' : 'info'" size="small"
-                            v-if="!scope.row.isEdit" @click="baseDrugConfirm(scope.row)">基本</el-button>
-                        <el-button type="primary" size="small" v-if="!scope.row.isEdit"
-                            @click="editYpDictName(scope.row)">别名</el-button>
-                        <el-button :type="scope.row.delFlag === '1' ? 'info' : 'primary'" size="small"
-                            @click="stopYpDict(scope.row)">
-                            <span v-if="scope.row.delFlag === '1'">启用</span>
-                            <span v-else>停用</span>
-                        </el-button>
-                        <el-button :type="scope.row.ykFlag === '1' ? 'info' : 'primary'" size="small"
-                            @click="stopYkYpDict(scope.row)" v-show="isYk">
-                            <span v-if="scope.row.ykFlag === '1'">药库启用</span>
-                            <span v-else>药库停用</span>
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 30, 45, 60]"
-                :total="drugDictData.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
-                @size-change="handleSizeChange" @current-change="handleCurrentChange">
-            </el-pagination>
-        </template>
-    </page-layer>
-    <el-dialog v-model="showYpEdit" :close-on-click-modal="false" :close-on-press-escape="false" :title="ypTitle"
-        class="yp-edit-dialog" width="80%" destroy-on-close fullscreen>
-        <YpZdDict :ypDetail="ypDetail" @closeYpEditFor="closeYpEditAdd" />
-    </el-dialog>
-    <el-dialog v-model="showYpPrintName" :close-on-click-modal="false" :close-on-press-escape="false"
-        :title="ypPrintName" width="80%" destroy-on-close>
-        <YpPrintName :ypPrintNameDetail="ypPrintNameDetail" @closeYpPrintNameEditFor="closeYpPrintName" />
-    </el-dialog>
+        </el-option>
+      </el-select>
+      <el-button type="primary" icon="Search" @click="queryYpDict" style="margin-left: 5px">查询</el-button>
+      <el-button type="primary" icon="Plus" @click="addYpDict" style="margin-left: 5px">新增</el-button>
+    </div>
+    <div class="layout_display_flex_y layout_flex_1-y">
+      <div class="layout_flex_1-y">
+        <el-table :data="drugDictData.slice(pageSize * (currentPage - 1), pageSize * currentPage)" border
+                  style="width: 100%" height="100%" stripe highlight-current-row>
+          <el-table-column type="index" label="序号" width="60" />
+          <el-table-column prop="code" label="药品编码" width="70" />
+          <el-table-column prop="serial" label="药品包装" width="70" />
+          <el-table-column prop="name" label="药品名称" width="300" show-overflow-tooltip />
+          <el-table-column prop="specification" label="药品规格" width="180" show-overflow-tooltip />
+          <el-table-column prop="packRetprice" label="药品零售价" width="100" />
+          <el-table-column prop="delFlag" label="状态" width="70">
+            <template #default="scope">
+              <span v-if="scope.row.delFlag === '1'" style="color:#d12020;">停用</span>
+              <span v-else></span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="ykFlag" label="药库状态" width="80" v-if="isYk">
+            <template #default="scope">
+              <span v-if="scope.row.ykFlag === '1'" style="color:#d12020;">药库停用</span>
+              <span v-else></span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="pyCode" label="拼音码" width="150" />
+          <el-table-column prop="dcode" label="五笔码" width="150" />
+          <el-table-column fixed="right" label="操作" min-width="400" width="400" center>
+            <template #default="scope">
+              <el-button type="primary" size="small" v-if="!scope.row.isEdit"
+                         @click="editYpDict(scope.row)">编辑</el-button>
+              <el-button :type="scope.row.tempPurchaseFlag === '1' ? 'primary' : 'info'" size="small"
+                         v-if="!scope.row.isEdit" @click="tempPurchase(scope.row)">临购</el-button>
+              <el-button :type="scope.row.jbFlag === '1' ? 'primary' : 'info'" size="small"
+                         v-if="!scope.row.isEdit" @click="baseDrugConfirm(scope.row)">基本</el-button>
+              <el-button type="primary" size="small" v-if="!scope.row.isEdit"
+                         @click="editYpDictName(scope.row)">别名</el-button>
+              <el-button :type="scope.row.delFlag === '1' ? 'info' : 'primary'" size="small"
+                         @click="stopYpDict(scope.row)">
+                <span v-if="scope.row.delFlag === '1'">启用</span>
+                <span v-else>停用</span>
+              </el-button>
+              <el-button :type="scope.row.ykFlag === '1' ? 'info' : 'primary'" size="small"
+                         @click="stopYkYpDict(scope.row)" v-show="isYk">
+                <span v-if="scope.row.ykFlag === '1'">药库启用</span>
+                <span v-else>药库停用</span>
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div>
+        <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 30, 45, 60]"
+                       :total="drugDictData.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
+                       @size-change="handleSizeChange" @current-change="handleCurrentChange">
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+  <el-dialog v-model="showYpEdit" :close-on-click-modal="false" :close-on-press-escape="false" :title="ypTitle"
+      class="yp-edit-dialog" width="80%" destroy-on-close fullscreen>
+      <YpZdDict :ypDetail="ypDetail" @closeYpEditFor="closeYpEditAdd" />
+  </el-dialog>
+  <el-dialog v-model="showYpPrintName" :close-on-click-modal="false" :close-on-press-escape="false"
+      :title="ypPrintName" width="80%" destroy-on-close>
+      <YpPrintName :ypPrintNameDetail="ypPrintNameDetail" @closeYpPrintNameEditFor="closeYpPrintName" />
+  </el-dialog>
 </template>
 <script setup name="YpDictInfo">
 import { ref, onMounted, nextTick } from 'vue'
-import PageLayer from '@/layout/PageLayer.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import {
     selectYpDict, updateYpStopOrUsed, selectYpDictByCode, selectYpGroupNameByYfFlag,
@@ -87,7 +90,6 @@ import {
 import YpZdDict from '@/views/yp-dict/YpZdDict.vue'
 import YpPrintName from '@/views/yp-dict/YpPrintName.vue'
 
-const tableHeight = window.innerHeight / 1.07;
 const text = ref('')
 const drugDictData = ref([])
 const ypTitle = ref('')
@@ -129,13 +131,7 @@ const queryYpGroupNameByYfFlag = (val) => {
 
 // 查询
 const queryYpDict = () => {
-
-    if (groupNo.value) {
-        isYk.value = true
-    } else {
-        isYk.value = false
-    }
-
+    isYk.value = !!groupNo.value;
     selectYpDict(text.value, groupNo.value)
         .then((res) => {
             res.forEach(row => {
@@ -213,7 +209,6 @@ const stopYpDict = (row) => {
                 showClose: true,
             });
             queryYpDict()
-            return
         })
     }).catch((action) => {
         if (action === 'cancel') {
@@ -249,7 +244,6 @@ const tempPurchase = (row) => {
                 showClose: true,
             });
             queryYpDict()
-            return
         })
     }).catch((action) => {
         if (action === 'cancel') {
@@ -296,7 +290,6 @@ const stopYkYpDict = (row) => {
                 showClose: true,
             });
             queryYpDict()
-            return
         })
     }).catch((action) => {
         if (action === 'cancel') {
@@ -332,7 +325,6 @@ const baseDrugConfirm = (row) => {
                 showClose: true,
             });
             queryYpDict()
-            return
         })
     }).catch((action) => {
         if (action === 'cancel') {

src/views/yp-dict/YpZdDict.vue

@@ -1,5 +1,8 @@
 <template>
-    <PageLayer>
+  <div class="layout_display_flex_y">
+
+  </div>
+  <PageLayer>
         <template #header class="hd-cl">
             <el-button type="primary" icon="Check" @click="submitForm(ruleFormRef)" style="margin-left: 10px">保存</el-button>
             <el-button type="primary" icon="Refresh" @click="resetForm(ruleFormRef)"
@@ -1015,17 +1018,17 @@ const specificationFormat = () => {
         specification2V = specificationV
     }
     if (ypForm.value.weight) {
-        specificationV += ypForm.value.weight + (wUnit == undefined ? '' : wUnit.label) + ' '
+        specificationV += ypForm.value.weight + (wUnit === undefined ? '' : wUnit.label) + ' '
         specification2V = specificationV
     }
     if (ypForm.value.volum) {
-        specificationV += ypForm.value.volum + (vUnit == undefined ? '' : vUnit.label) + ' '
+        specificationV += ypForm.value.volum + (vUnit === undefined ? '' : vUnit.label) + ' '
         specification2V = specificationV
     }
     if (ypForm.value.packSize) {
-        if (ypForm.value.packSize == 1) {
+        if (ypForm.value.packSize === 1) {
             specificationV += '/' + mUnit.label
-        } else if (mUnit.label != pUnit.label) {
+        } else if (mUnit.label !== pUnit.label) {
             specificationV += '×' + ypForm.value.packSize + mUnit.label + '/' + pUnit.label
         } else {
             specificationV += '/' + mUnit.label
@@ -1067,7 +1070,6 @@ const submitForm = async (formEl) => {
                         duration: 2500,
                         showClose: true,
                     });
-                    return
                 })
             }).catch((action) => {
                 if (action === 'cancel') {
@@ -1081,10 +1083,16 @@ const submitForm = async (formEl) => {
                 duration: 2500,
                 showClose: true,
             });
-            return
         }
     })
 
 }
 
+const resetForm = (formEl) => {
+  if (props.ypDetail.modeFlag === 'add') {
+    if (!formEl) return
+    formEl.resetFields()
+  }
+}
+
 </script>

src/views/yp-inventory/TempPurchaseAudit.vue

@@ -1,110 +1,107 @@
 <template>
-    <page-layer>
-        <template #mainMaxContentHeight>
-            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
-                :size="formSize" status-icon>
-                <el-row>
-                    <el-col :span="6">
-                        <el-form-item label="药品" prop="chargeName">
-                            <el-input v-model="ruleForm.chargeName" maxlength="2" show-word-limit placeholder="药品"
-                                disabled />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="序号" prop="serial">
-                            <el-input v-model="ruleForm.serial" maxlength="2" show-word-limit placeholder="序号"
-                                disabled />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="规格" prop="specification">
-                            <el-input v-model="ruleForm.specification" maxlength="40" show-word-limit placeholder="规格"
-                                disabled />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="数量" prop="amount">
-                            <el-input v-model="ruleForm.amount" maxlength="10" show-word-limit
-                                placeholder="请填写数量" disabled />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="6">
-                        <el-form-item label="申请人" prop="op">
-                            <el-input v-model="ruleForm.op" maxlength="40" show-word-limit placeholder="请填写申请人"
-                                disabled />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="患者姓名" prop="name">
-                            <el-input v-model="ruleForm.name" maxlength="40" show-word-limit placeholder="请填写患者姓名"
-                                disabled />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="住院号" prop="inpatientNo">
-                            <el-input v-model="ruleForm.inpatientNo" maxlength="6" show-word-limit placeholder="请填写住院号"
-                                disabled />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="申请日期" prop="applyDate">
-                            <el-input v-model="ruleForm.applyDate" show-word-limit placeholder="请填写申请日期" disabled />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="24">
-                        <el-form-item label="使用理由" prop="useResult">
-                            <el-input v-model="ruleForm.useResult" show-word-limit placeholder="请填写使用理由" disabled />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="6">
-                        <el-form-item label="是否接收" prop="receptFlag">
-                            <el-switch v-model="ruleForm.receptFlag" active-value="1" inactive-value="0"
-                                active-color="#13ce66" inactive-color="#ff4949" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="是否采购" prop="purchaseFlag">
-                            <el-switch v-model="ruleForm.purchaseFlag" active-value="1" inactive-value="0"
-                                active-color="#13ce66" inactive-color="#ff4949" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="是否入库" prop="storageFlag">
-                            <el-switch v-model="ruleForm.storageFlag" active-value="1" inactive-value="0"
-                                active-color="#13ce66" inactive-color="#ff4949" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="审核日期" prop="auditDate">
-                            <el-input v-model="ruleForm.auditDate" show-word-limit placeholder="请填写审核日期" disabled />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="24">
-                        <el-form-item label="采购信息" prop="result">
-                            <el-input v-model="ruleForm.result" show-word-limit placeholder="请填写采购信息" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-form-item>
-                    <el-button type="primary" @click="submitForm(ruleFormRef)">
-                        审核
-                    </el-button>
+  <div class="layout_display_flex_y">
+    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
+        :size="formSize" status-icon>
+        <el-row>
+            <el-col :span="6">
+                <el-form-item label="药品" prop="chargeName">
+                    <el-input v-model="ruleForm.chargeName" maxlength="2" show-word-limit placeholder="药品"
+                        disabled />
                 </el-form-item>
-            </el-form>
-        </template>
-    </page-layer>
+            </el-col>
+            <el-col :span="6">
+                <el-form-item label="序号" prop="serial">
+                    <el-input v-model="ruleForm.serial" maxlength="2" show-word-limit placeholder="序号"
+                        disabled />
+                </el-form-item>
+            </el-col>
+            <el-col :span="6">
+                <el-form-item label="规格" prop="specification">
+                    <el-input v-model="ruleForm.specification" maxlength="40" show-word-limit placeholder="规格"
+                        disabled />
+                </el-form-item>
+            </el-col>
+            <el-col :span="6">
+                <el-form-item label="数量" prop="amount">
+                    <el-input v-model="ruleForm.amount" maxlength="10" show-word-limit
+                        placeholder="请填写数量" disabled />
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="6">
+                <el-form-item label="申请人" prop="op">
+                    <el-input v-model="ruleForm.op" maxlength="40" show-word-limit placeholder="请填写申请人"
+                        disabled />
+                </el-form-item>
+            </el-col>
+            <el-col :span="6">
+                <el-form-item label="患者姓名" prop="name">
+                    <el-input v-model="ruleForm.name" maxlength="40" show-word-limit placeholder="请填写患者姓名"
+                        disabled />
+                </el-form-item>
+            </el-col>
+            <el-col :span="6">
+                <el-form-item label="住院号" prop="inpatientNo">
+                    <el-input v-model="ruleForm.inpatientNo" maxlength="6" show-word-limit placeholder="请填写住院号"
+                        disabled />
+                </el-form-item>
+            </el-col>
+            <el-col :span="6">
+                <el-form-item label="申请日期" prop="applyDate">
+                    <el-input v-model="ruleForm.applyDate" show-word-limit placeholder="请填写申请日期" disabled />
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="24">
+                <el-form-item label="使用理由" prop="useResult">
+                    <el-input v-model="ruleForm.useResult" show-word-limit placeholder="请填写使用理由" disabled />
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="6">
+                <el-form-item label="是否接收" prop="receptFlag">
+                    <el-switch v-model="ruleForm.receptFlag" active-value="1" inactive-value="0"
+                        active-color="#13ce66" inactive-color="#ff4949" />
+                </el-form-item>
+            </el-col>
+            <el-col :span="6">
+                <el-form-item label="是否采购" prop="purchaseFlag">
+                    <el-switch v-model="ruleForm.purchaseFlag" active-value="1" inactive-value="0"
+                        active-color="#13ce66" inactive-color="#ff4949" />
+                </el-form-item>
+            </el-col>
+            <el-col :span="6">
+                <el-form-item label="是否入库" prop="storageFlag">
+                    <el-switch v-model="ruleForm.storageFlag" active-value="1" inactive-value="0"
+                        active-color="#13ce66" inactive-color="#ff4949" />
+                </el-form-item>
+            </el-col>
+            <el-col :span="6">
+                <el-form-item label="审核日期" prop="auditDate">
+                    <el-input v-model="ruleForm.auditDate" show-word-limit placeholder="请填写审核日期" disabled />
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="24">
+                <el-form-item label="采购信息" prop="result">
+                    <el-input v-model="ruleForm.result" show-word-limit placeholder="请填写采购信息" />
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <el-form-item>
+            <el-button type="primary" @click="submitForm(ruleFormRef)">
+                审核
+            </el-button>
+        </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script setup name="YpTempPurchaseAudit">
 import { ref, onMounted, nextTick, watch } from 'vue'
-import PageLayer from '@/layout/PageLayer.vue'
 import { ElMessage } from 'element-plus'
 import { formatDatetime } from '@/utils/date'
 import { auditYpTempPurchase } from '@/api/yp-inventory/yp-temp-purchase.js'

src/views/yp-inventory/TempPurchaseEdit.vue

@@ -1,92 +1,89 @@
 <template>
-    <page-layer>
-        <template #mainMaxContentHeight>
-            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
-                :size="formSize" status-icon>
-                <el-row>
-                    <el-col :span="6">
-                        <el-form-item label="药品" prop="chargeCode">
-                            <el-select v-model="ruleForm.chargeCode" placeholder="请选择药品" filterable clearable
-                                style="width: 100%" @change="ypChange">
-                                <el-option v-for="item in tempPurchaseData" :key="item.chargeCode"
-                                    :label="item.chargeName" :value="item.chargeCode">
-                                    <span style="float: left">{{ item.chargeName }}</span>
-                                    <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px;">
-                                        {{ item.chargeCode }}
-                                    </span>
-                                </el-option>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="序号" prop="serial">
-                            <el-input v-model="ruleForm.serial" maxlength="2" show-word-limit placeholder="序号"
-                                disabled />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="规格" prop="specification">
-                            <el-input v-model="ruleForm.specification" maxlength="40" show-word-limit placeholder="规格"
-                                disabled />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="数量" prop="amount">
-                            <el-input v-model="ruleForm.amount" maxlength="10" show-word-limit
-                                placeholder="请填写数量" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="6">
-                        <el-form-item label="申请人" prop="op">
-                            <el-input v-model="ruleForm.op" maxlength="40" show-word-limit placeholder="请填写申请人"
-                                disabled />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="患者姓名" prop="name">
-                            <el-input v-model="ruleForm.name" maxlength="40" show-word-limit placeholder="请填写患者姓名" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="住院号" prop="inpatientNo">
-                            <el-input v-model="ruleForm.inpatientNo" maxlength="6" show-word-limit
-                                placeholder="请填写住院号" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="6">
-                        <el-form-item label="申请日期" prop="applyDate">
-                            <el-input v-model="ruleForm.applyDate" show-word-limit placeholder="请填写申请日期" disabled />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="24">
-                        <el-form-item label="使用理由" prop="useResult">
-                            <el-input v-model="ruleForm.useResult" show-word-limit placeholder="请填写使用理由" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="24">
-                        <el-form-item label="温馨提示" prop="desc">
-                            <el-input v-model="desc" show-word-limit placeholder="温馨提示" disabled />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-form-item>
-                    <el-button type="primary" @click="submitForm(ruleFormRef)">
-                        保存
-                    </el-button>
-                </el-form-item>
-            </el-form>
-        </template>
-    </page-layer>
+  <div class="layout_display_flex_y">
+      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
+          :size="formSize" status-icon>
+          <el-row>
+              <el-col :span="6">
+                  <el-form-item label="药品" prop="chargeCode">
+                      <el-select v-model="ruleForm.chargeCode" placeholder="请选择药品" filterable clearable
+                          style="width: 100%" @change="ypChange">
+                          <el-option v-for="item in tempPurchaseData" :key="item.chargeCode"
+                              :label="item.chargeName" :value="item.chargeCode">
+                              <span style="float: left">{{ item.chargeName }}</span>
+                              <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px;">
+                                  {{ item.chargeCode }}
+                              </span>
+                          </el-option>
+                      </el-select>
+                  </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                  <el-form-item label="序号" prop="serial">
+                      <el-input v-model="ruleForm.serial" maxlength="2" show-word-limit placeholder="序号"
+                          disabled />
+                  </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                  <el-form-item label="规格" prop="specification">
+                      <el-input v-model="ruleForm.specification" maxlength="40" show-word-limit placeholder="规格"
+                          disabled />
+                  </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                  <el-form-item label="数量" prop="amount">
+                      <el-input v-model="ruleForm.amount" maxlength="10" show-word-limit
+                          placeholder="请填写数量" />
+                  </el-form-item>
+              </el-col>
+          </el-row>
+          <el-row>
+              <el-col :span="6">
+                  <el-form-item label="申请人" prop="op">
+                      <el-input v-model="ruleForm.op" maxlength="40" show-word-limit placeholder="请填写申请人"
+                          disabled />
+                  </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                  <el-form-item label="患者姓名" prop="name">
+                      <el-input v-model="ruleForm.name" maxlength="40" show-word-limit placeholder="请填写患者姓名" />
+                  </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                  <el-form-item label="住院号" prop="inpatientNo">
+                      <el-input v-model="ruleForm.inpatientNo" maxlength="6" show-word-limit
+                          placeholder="请填写住院号" />
+                  </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                  <el-form-item label="申请日期" prop="applyDate">
+                      <el-input v-model="ruleForm.applyDate" show-word-limit placeholder="请填写申请日期" disabled />
+                  </el-form-item>
+              </el-col>
+          </el-row>
+          <el-row>
+              <el-col :span="24">
+                  <el-form-item label="使用理由" prop="useResult">
+                      <el-input v-model="ruleForm.useResult" show-word-limit placeholder="请填写使用理由" />
+                  </el-form-item>
+              </el-col>
+          </el-row>
+          <el-row>
+              <el-col :span="24">
+                  <el-form-item label="温馨提示" prop="desc">
+                      <el-input v-model="desc" show-word-limit placeholder="温馨提示" disabled />
+                  </el-form-item>
+              </el-col>
+          </el-row>
+          <el-form-item>
+              <el-button type="primary" @click="submitForm(ruleFormRef)">
+                  保存
+              </el-button>
+          </el-form-item>
+      </el-form>
+  </div>
 </template>
 <script setup name="YpTempPurchaseEdit">
 import { ref, onMounted, nextTick, watch } from 'vue'
-import PageLayer from '@/layout/PageLayer.vue'
 import { ElMessage } from 'element-plus'
 import { formatDatetime } from '@/utils/date'
 import { saveYpTempPurchase, selectTempPurchaseYp } from '@/api/yp-inventory/yp-temp-purchase.js'
@@ -203,7 +200,6 @@ const submitForm = async (formEl) => {
 
                     formEl.resetFields()
                     emit('closeTempPurchaseEdit', true)
-                    return
                 }
             });
         } else {

src/views/yp-inventory/YpOutInStat.vue

@@ -1,60 +1,69 @@
 <template>
-    <page-layer>
-        <template #header>
-            <el-input v-model="keyCode" class="w-50 m-2" style="width: 360px" placeholder="请输入药品" clearable>
-                <template #prepend>关键字</template>
-            </el-input>
-            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
-                end-placeholder="结束日期" :shortcuts="shortcuts" style="width: 360px;margin-left: 3px"></el-date-picker>
-            <el-select v-model="groupNo" placeholder="请选择药房" clearable style="width: 240px;margin-left: 3px">
-                <el-option v-for="item in groupNoList" :key="item.code" :label="item.name" :value="item.code">
-                    <span style="float: left">{{ item.label }}</span>
-                    <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px;">
-                        {{ item.value }}
-                    </span>
-                </el-option>
-            </el-select>
-            <el-button type="primary" icon="Search" @click="queryYpUsedQuantity" style="margin-left: 5px">查询</el-button>
-            <el-button type="primary" icon="Download" @click="exportData" style="margin-left: 5px">使用量导出</el-button>
-        </template>
-        <template #main>
-            <el-tabs :tab-position="tabPosition" style="height: 200px" class="demo-tabs">
-                <el-tab-pane label="药品使用量">
-                    <el-table :data="ypUserdData.slice(pageSize * (currentPage - 1), pageSize * currentPage)" border
-                        style="width: 100%" :height="tableHeight" highlight-current-row :row-style="rowStyle"
-                        :table-layout="tableLayout">
-                        <el-table-column type="index" label="排名" width="100" />
-                        <el-table-column prop="code" label="编码" width="120" />
-                        <el-table-column prop="serial" label="序号" width="100" />
-                        <el-table-column prop="name" label="品名" width="300" />
-                        <el-table-column prop="specification" label="规格" width="200" />
-                        <el-table-column prop="packRetprice" label="零售价" width="180" />
-                        <el-table-column prop="amount" label="数量" width="120" />
-                        <el-table-column label="操作" fixed="right" width="200" align="center" header-align="center">
-                            <template #default="scope">
-                                <el-button type="primary" size="small" @click="handleUserd(scope.row)">使用明细</el-button>
-                                <el-button type="primary" size="small" @click="handleStat(scope.row)">进销存计算</el-button>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                    <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 30, 45, 60]"
-                        :total="ypUserdData.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
-                        @size-change="handleSizeChange" @current-change="handleCurrentChange">
-                    </el-pagination>
-                </el-tab-pane>
-                <el-tab-pane label="药品进销存">
-                    <el-table :data="ypOutInData.slice(pageSize * (currentPage - 1), pageSize * currentPage)" border
-                        style="width: 100%" :height="tableHeight" highlight-current-row :row-style="rowStyle">
-                        <el-table-column type="index" label="序号" width="50" fixed />
-                    </el-table>
-                    <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 30, 45, 60]"
-                        :total="ypOutInData.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
-                        @size-change="handleSizeChange" @current-change="handleCurrentChange">
-                    </el-pagination>
-                </el-tab-pane>
-            </el-tabs>
-        </template>
-    </page-layer>
+  <div class="layout_display_flex_y">
+    <div style="margin-bottom: 6px; background-color: #fff;">
+      <el-input v-model="keyCode" class="w-50 m-2" style="width: 360px" placeholder="请输入药品" clearable>
+        <template #prepend>关键字</template>
+      </el-input>
+      <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+                      end-placeholder="结束日期" :shortcuts="shortcuts" style="width: 360px;margin-left: 3px"></el-date-picker>
+      <el-select v-model="groupNo" placeholder="请选择药房" clearable style="width: 240px;margin-left: 3px">
+        <el-option v-for="item in groupNoList" :key="item.code" :label="item.name" :value="item.code">
+          <span style="float: left">{{ item.label }}</span>
+          <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px;">{{ item.value }}</span>
+        </el-option>
+      </el-select>
+      <el-button type="primary" icon="Search" @click="queryYpUsedQuantity" style="margin-left: 5px">查询</el-button>
+      <el-button type="primary" icon="Download" @click="exportData" style="margin-left: 5px">使用量导出</el-button>
+    </div>
+    <div class="layout_display_flex_y">
+      <el-tabs class="cy-el-tabs__fill" type="border-card">
+        <el-tab-pane label="药品使用量">
+          <div class="layout_display_flex_y">
+            <div class="layout_flex_1-y">
+              <el-table :data="ypUserdData.slice(pageSize * (currentPage - 1), pageSize * currentPage)" border
+                        style="width: 100%" height="100%" highlight-current-row :row-style="rowStyle">
+                <el-table-column type="index" label="排名" width="100" />
+                <el-table-column prop="code" label="编码" width="120" />
+                <el-table-column prop="serial" label="序号" width="100" />
+                <el-table-column prop="name" label="品名" width="300" />
+                <el-table-column prop="specification" label="规格" width="200" />
+                <el-table-column prop="packRetprice" label="零售价" width="180" />
+                <el-table-column prop="amount" label="数量" width="120" />
+                <el-table-column label="操作" fixed="right" width="200" align="center" header-align="center">
+                  <template #default="scope">
+                    <el-button type="primary" size="small" @click="handleUserd(scope.row)">使用明细</el-button>
+                    <el-button type="primary" size="small" @click="handleStat(scope.row)">进销存计算</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+            <div>
+              <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 30, 45, 60]"
+                             :total="ypUserdData.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
+                             @size-change="handleSizeChange" @current-change="handleCurrentChange">
+              </el-pagination>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="药品进销存">
+          <div class="layout_display_flex_y">
+            <div class="layout_flex_1-y">
+              <el-table :data="ypOutInData.slice(pageSize * (currentPage - 1), pageSize * currentPage)" border
+                        style="width: 100%" height="100%" highlight-current-row :row-style="rowStyle">
+                <el-table-column type="index" label="序号" width="50" fixed />
+              </el-table>
+            </div>
+            <div>
+              <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 30, 45, 60]"
+                             :total="ypOutInData.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
+                             @size-change="handleSizeChange" @current-change="handleCurrentChange">
+              </el-pagination>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
     <el-dialog v-model="showUsedMx" :close-on-click-modal="false" :close-on-press-escape="false" :title="ypTitle"
         class="yp-edit-dialog" width="80%" height="80%" destroy-on-close>
         <YpUsedDetail :ypUsedMx="ypUsedDetail" />
@@ -62,7 +71,6 @@
 </template>
 <script setup name="YpOutInStat">
 import { ref, onMounted, nextTick } from 'vue'
-import PageLayer from '@/layout/PageLayer.vue'
 import { shortcuts, seltYearAndNowLast } from '@/data/shortcuts'
 import { formatDate, getDateRangeFormatDate } from '@/utils/date'
 import { ElMessage } from 'element-plus'
@@ -72,9 +80,6 @@ import { Export } from '@/utils/ExportExcel'
 import { clone } from '@/utils/clone'
 import YpUsedDetail from '@/views/yp-inventory/YpUsedDetail.vue'
 
-const tabPosition = ref('top')
-const tableLayout = ref('fixed')
-const tableHeight = window.innerHeight / 1.15;
 const pageSize = ref(30)
 const currentPage = ref(1)
 const showUsedMx = ref(false)

src/views/yp-inventory/YpTempPurchase.vue

@@ -1,203 +1,214 @@
 <template>
-    <page-layer>
-        <template #header>
-            <el-input v-model="inpatientNo" class="w-50 m-2" style="width: 220px" placeholder="请输入姓名/住院号" clearable>
-            </el-input>
-            <el-select v-model="chargeCode" placeholder="请选择临购药品" filterable clearable
-                style="width: 320px;margin-left: 3px">
-                <el-option v-for="item in tempPurchaseData" :key="item.chargeCode" :label="item.chargeName"
-                    :value="item.chargeCode">
-                    <span style="float: left">{{ item.chargeName }}</span>
-                    <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px; ">
+  <div class="layout_display_flex_y">
+    <div style="margin-bottom: 6px; background-color: #fff;">
+      <el-input v-model="inpatientNo" class="w-50 m-2" style="width: 220px" placeholder="请输入姓名/住院号" clearable>
+      </el-input>
+      <el-select v-model="chargeCode" placeholder="请选择临购药品" filterable clearable
+                 style="width: 320px;margin-left: 3px">
+        <el-option v-for="item in tempPurchaseData" :key="item.chargeCode" :label="item.chargeName"
+                   :value="item.chargeCode">
+          <span style="float: left">{{ item.chargeName }}</span>
+          <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px; ">
                         {{ item.chargeCode }}
                     </span>
-                </el-option>
-            </el-select>
-            <el-select v-model="ztFlag" placeholder="请选择申请进度" clearable style="width: 140px;margin-left: 3px">
-                <el-option v-for="item in ztOptions" :key="item.value" :label="item.label" :value="item.value">
-                </el-option>
-            </el-select>
-            <el-date-picker v-model="dateRange" type="daterange" :shortcuts="maxHalfYear" range-separator="至"
-                start-placeholder="开始时间" end-placeholder="结束时间" style="width: 260px;margin-left: 3px">
-            </el-date-picker>
-            <el-button type="primary" icon="Search" @click="queryYpTempPurchaseData"
-                style="margin-left: 5px">查询</el-button>
-            <el-button type="primary" icon="Download" @click="exportData" style="margin-left: 5px">导出</el-button>
-        </template>
-        <template #main>
-            <el-tabs v-model="editableTabsValue" type="border-card" @tab-click="handleClick">
-                <el-tab-pane key="ypPurchase" label="明细" name="ypPurchaseInfo">
-                    <el-table :data="ypPurchaseData.slice(pageSize * (currentPage - 1), pageSize * currentPage)" border
-                        style="width: 100%" :height="tableHeight" stripe highlight-current-row>
-                        <el-table-column type="index" label="序号" width="60" />
-                        <el-table-column prop="chargeCode" label="药品编码" width="90" />
-                        <el-table-column prop="serial" label="药品包装" width="70">
-                            <template #default="scope">
-                                <span v-if="scope.row.serial === '99'">大包装</span>
-                                <span v-else>小包装</span>
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="chargeName" label="药品名称" width="220" show-overflow-tooltip />
-                        <el-table-column prop="specification" label="药品规格" width="140" show-overflow-tooltip />
-                        <el-table-column prop="name" label="患者姓名" width="100" />
-                        <el-table-column prop="inpatientNo" label="住院号" width="100" />
-                        <el-table-column prop="amount" label="数量" width="70" />
-                        <el-table-column prop="useResult" label="使用理由" width="200" show-overflow-tooltip />
-                        <el-table-column prop="op" label="申请人" width="100" />
-                        <el-table-column prop="applyDate" label="申请时间" width="140" />
-                        <el-table-column prop="receptFlag" label="是否接收" width="80">
-                            <template #default="scope">
-                                <span v-if="scope.row.receptFlag === '1'" style="color:#106898;">已接收</span>
-                                <span v-else-if="scope.row.receptFlag === '0'" style="color:#d12020;">拒接收</span>
-                                <span v-else></span>
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="purchaseFlag" label="是否采购" width="80">
-                            <template #default="scope">
-                                <span v-if="scope.row.purchaseFlag === '1'" style="color:#106898;">已采购</span>
-                                <span v-else-if="scope.row.purchaseFlag === '0'" style="color:#d12020;">拒采购</span>
-                                <span v-else></span>
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="storageFlag" label="是否入库" width="80">
-                            <template #default="scope">
-                                <span v-if="scope.row.storageFlag === '1'" style="color:#106898;">已入库</span>
-                                <span v-else-if="scope.row.storageFlag === '0'" style="color:#d12020;">拒入库</span>
-                                <span v-else></span>
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="result" label="采购情况" width="200" show-overflow-tooltip />
-                        <el-table-column fixed="right" label="操作" min-width="80" width="80" header-align="center"
-                            align="center">
-                            <template #default="scope">
-                                <el-button type="primary" size="small" v-if="scope.row.permissions === '1'"
-                                    @click="auditTempPurchase(scope.row)">审核</el-button>
-                                <el-button type="primary" size="small" v-if="scope.row.permissions === '0'"
-                                    @click="editTempPurchase(scope.row)">修改</el-button>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                    <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 30, 45, 60]"
-                        :total="ypPurchaseData.length" layout="total, sizes, prev, pager, next, jumper"
-                        style="margin-top: 5px" @size-change="handleSizeChange" @current-change="handleCurrentChange">
-                    </el-pagination>
-                    <el-dialog v-model="showAuditTempPurchase" :close-on-click-modal="false"
-                        :close-on-press-escape="false" :title="auditTempPurchaseName" width="80%" destroy-on-close>
-                        <TempPurchaseAudit :ypTempPurchaseDetail="ypTempPurchaseDetail"
-                            @closeTempPurchaseAudit="closeTempPurchaseAudit" />
-                    </el-dialog>
-                    <el-dialog v-model="showEditTempPurchase" :close-on-click-modal="false"
-                        :close-on-press-escape="false" :title="editTempPurchaseName" width="80%" destroy-on-close>
-                        <TempPurchaseEdit :ypTempPurchaseEditData="ypTempPurchaseEditData"
-                            @closeTempPurchaseEdit="closeTempPurchaseEdit" />
-                    </el-dialog>
-                </el-tab-pane>
-                <el-tab-pane key="ypPurchase" label="申请" name="ypPurchase">
-                    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px"
-                        class="demo-ruleForm" :size="formSize" status-icon>
-                        <el-row>
-                            <el-col :span="6">
-                                <el-form-item label="药品" prop="chargeCode">
-                                    <el-select v-model="ruleForm.chargeCode" placeholder="请选择药品" filterable clearable
-                                        style="width: 100%" @change="ypChange">
-                                        <el-option v-for="item in tempPurchaseData" :key="item.chargeCode"
-                                            :label="item.chargeName" :value="item.chargeCode">
-                                            <span style="float: left">{{ item.chargeName }}</span>
-                                            <span
-                                                style="float: right; color: var(--el-text-color-secondary); font-size: 13px;">
-                                                {{ item.chargeCode }}
-                                            </span>
-                                        </el-option>
-                                    </el-select>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="6">
-                                <el-form-item label="序号" prop="serial">
-                                    <el-input v-model="ruleForm.serial" maxlength="2" show-word-limit placeholder="序号"
-                                        disabled />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="6">
-                                <el-form-item label="规格" prop="specification">
-                                    <el-input v-model="ruleForm.specification" maxlength="40" show-word-limit
-                                        placeholder="规格" disabled />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="6">
-                                <el-form-item label="数量" prop="amount">
-                                    <el-input v-model="ruleForm.amount" maxlength="10" show-word-limit
-                                        placeholder="请填写数量" autocomplete="off" />
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-row>
-                            <el-col :span="6">
-                                <el-form-item label="申请人" prop="op">
-                                    <el-input v-model="ruleForm.op" maxlength="40" show-word-limit
-                                        placeholder="请填写申请人" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="6">
-                                <el-form-item label="患者姓名" prop="name">
-                                    <el-input v-model="ruleForm.name" maxlength="40" show-word-limit
-                                        placeholder="请填写患者姓名" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="6">
-                                <el-form-item label="住院号" prop="inpatientNo">
-                                    <el-input v-model="ruleForm.inpatientNo" maxlength="6" show-word-limit
-                                        placeholder="请填写住院号" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="6">
-                                <el-form-item label="申请日期" prop="applyDate">
-                                    <el-input v-model="ruleForm.applyDate" show-word-limit placeholder="请填写申请日期"
-                                        disabled />
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-row>
-                            <el-col :span="24">
-                                <el-form-item label="使用理由" prop="useResult">
-                                    <el-input v-model="ruleForm.useResult" show-word-limit placeholder="请填写使用理由" />
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-row>
-                            <el-col :span="24">
-                                <el-form-item label="温馨提示" prop="desc">
-                                    <el-input v-model="desc" show-word-limit placeholder="温馨提示" disabled />
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-form-item>
-                            <el-button type="primary" @click="submitForm(ruleFormRef)">
-                                申请
-                            </el-button>
-                            <el-button type="info" @click="resetForm(ruleFormRef)">重置</el-button>
-                        </el-form-item>
-                    </el-form>
-                </el-tab-pane>
-            </el-tabs>
-        </template>
-    </page-layer>
+        </el-option>
+      </el-select>
+      <el-select v-model="ztFlag" placeholder="请选择申请进度" clearable style="width: 140px;margin-left: 3px">
+        <el-option v-for="item in ztOptions" :key="item.value" :label="item.label" :value="item.value">
+        </el-option>
+      </el-select>
+      <el-date-picker v-model="dateRange" type="daterange" :shortcuts="maxHalfYear" range-separator="至"
+                      start-placeholder="开始时间" end-placeholder="结束时间" style="width: 260px;margin-left: 3px">
+      </el-date-picker>
+      <el-button type="primary" icon="Search" @click="queryYpTempPurchaseData"
+                 style="margin-left: 5px">查询
+      </el-button>
+      <el-button type="primary" icon="Download" @click="exportData" style="margin-left: 5px">导出</el-button>
+    </div>
+    <div class="layout_display_flex_y">
+      <el-tabs class="cy-el-tabs__fill" v-model="editableTabsValue" type="border-card" @tab-click="handleClick">
+        <el-tab-pane key="ypPurchase" label="明细" name="ypPurchaseInfo">
+          <div class="layout_display_flex_y">
+            <div class="layout_flex_1-y">
+              <el-table :data="ypPurchaseData.slice(pageSize * (currentPage - 1), pageSize * currentPage)" border
+                        style="width: 100%" height="100%" stripe highlight-current-row>
+                <el-table-column type="index" label="序号" width="60"/>
+                <el-table-column prop="chargeCode" label="药品编码" width="90"/>
+                <el-table-column prop="serial" label="药品包装" width="70">
+                  <template #default="scope">
+                    <span v-if="scope.row.serial === '99'">大包装</span>
+                    <span v-else>小包装</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="chargeName" label="药品名称" width="220" show-overflow-tooltip/>
+                <el-table-column prop="specification" label="药品规格" width="140" show-overflow-tooltip/>
+                <el-table-column prop="name" label="患者姓名" width="100"/>
+                <el-table-column prop="inpatientNo" label="住院号" width="100"/>
+                <el-table-column prop="amount" label="数量" width="70"/>
+                <el-table-column prop="useResult" label="使用理由" width="200" show-overflow-tooltip/>
+                <el-table-column prop="op" label="申请人" width="100"/>
+                <el-table-column prop="applyDate" label="申请时间" width="140"/>
+                <el-table-column prop="receptFlag" label="是否接收" width="80">
+                  <template #default="scope">
+                    <span v-if="scope.row.receptFlag === '1'" style="color:#106898;">已接收</span>
+                    <span v-else-if="scope.row.receptFlag === '0'" style="color:#d12020;">拒接收</span>
+                    <span v-else></span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="purchaseFlag" label="是否采购" width="80">
+                  <template #default="scope">
+                    <span v-if="scope.row.purchaseFlag === '1'" style="color:#106898;">已采购</span>
+                    <span v-else-if="scope.row.purchaseFlag === '0'" style="color:#d12020;">拒采购</span>
+                    <span v-else></span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="storageFlag" label="是否入库" width="80">
+                  <template #default="scope">
+                    <span v-if="scope.row.storageFlag === '1'" style="color:#106898;">已入库</span>
+                    <span v-else-if="scope.row.storageFlag === '0'" style="color:#d12020;">拒入库</span>
+                    <span v-else></span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="result" label="采购情况" width="200" show-overflow-tooltip/>
+                <el-table-column fixed="right" label="操作" min-width="80" width="80" header-align="center"
+                                 align="center">
+                  <template #default="scope">
+                    <el-button type="primary" size="small" v-if="scope.row.permissions === '1'"
+                               @click="auditTempPurchase(scope.row)">审核
+                    </el-button>
+                    <el-button type="primary" size="small" v-if="scope.row.permissions === '0'"
+                               @click="editTempPurchase(scope.row)">修改
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+            <div>
+              <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 30, 45, 60]"
+                             :total="ypPurchaseData.length" layout="total, sizes, prev, pager, next, jumper"
+                             style="margin-top: 5px" @size-change="handleSizeChange"
+                             @current-change="handleCurrentChange">
+              </el-pagination>
+            </div>
+          </div>
+
+          <el-dialog v-model="showAuditTempPurchase" :close-on-click-modal="false" :before-close="handleClose"
+                     :close-on-press-escape="false" :title="auditTempPurchaseName" width="80%" destroy-on-close>
+            <TempPurchaseAudit :ypTempPurchaseDetail="ypTempPurchaseDetail"
+                               @closeTempPurchaseAudit="closeTempPurchaseAudit"/>
+          </el-dialog>
+          <el-dialog v-model="showEditTempPurchase" :close-on-click-modal="false" :before-close="handleClose"
+                     :close-on-press-escape="false" :title="editTempPurchaseName" width="80%" destroy-on-close>
+            <TempPurchaseEdit :ypTempPurchaseEditData="ypTempPurchaseEditData"
+                              @closeTempPurchaseEdit="closeTempPurchaseEdit"/>
+          </el-dialog>
+        </el-tab-pane>
+        <el-tab-pane key="ypPurchase" label="申请" name="ypPurchase">
+          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px"
+                   class="demo-ruleForm" :size="formSize" status-icon>
+            <el-row>
+              <el-col :span="6">
+                <el-form-item label="药品" prop="chargeCode">
+                  <el-select v-model="ruleForm.chargeCode" placeholder="请选择药品" filterable clearable
+                             style="width: 100%" @change="ypChange">
+                    <el-option v-for="item in tempPurchaseData" :key="item.chargeCode"
+                               :label="item.chargeName" :value="item.chargeCode">
+                      <span style="float: left">{{ item.chargeName }}</span>
+                      <span
+                          style="float: right; color: var(--el-text-color-secondary); font-size: 13px;">
+                          {{ item.chargeCode }}
+                        </span>
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="序号" prop="serial">
+                  <el-input v-model="ruleForm.serial" maxlength="2" show-word-limit placeholder="序号"
+                            disabled/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="规格" prop="specification">
+                  <el-input v-model="ruleForm.specification" maxlength="40" show-word-limit
+                            placeholder="规格" disabled/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="数量" prop="amount">
+                  <el-input v-model="ruleForm.amount" maxlength="10" show-word-limit
+                            placeholder="请填写数量" autocomplete="off"/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="6">
+                <el-form-item label="申请人" prop="op">
+                  <el-input v-model="ruleForm.op" maxlength="40" show-word-limit
+                            placeholder="请填写申请人" disabled/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="患者姓名" prop="name">
+                  <el-input v-model="ruleForm.name" maxlength="40" show-word-limit
+                            placeholder="请填写患者姓名"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="住院号" prop="inpatientNo">
+                  <el-input v-model="ruleForm.inpatientNo" maxlength="6" show-word-limit
+                            placeholder="请填写住院号"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="申请日期" prop="applyDate">
+                  <el-input v-model="ruleForm.applyDate" show-word-limit placeholder="请填写申请日期"
+                            disabled/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="使用理由" prop="useResult">
+                  <el-input v-model="ruleForm.useResult" show-word-limit placeholder="请填写使用理由"/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="温馨提示" prop="desc">
+                  <el-input v-model="desc" show-word-limit placeholder="温馨提示" disabled/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-form-item>
+              <el-button type="primary" @click="submitForm(ruleFormRef)">
+                申请
+              </el-button>
+              <el-button type="info" @click="resetForm(ruleFormRef)">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
 </template>
-<script setup name="YpTempPurchase">
-import { ref, onMounted, nextTick } from 'vue'
-import PageLayer from '@/layout/PageLayer.vue'
-import store from '@/store'
-import { ElMessage } from 'element-plus'
-import { Export } from '@/utils/ExportExcel'
-import { formatDatetime } from '@/utils/date'
-import { maxHalfYear } from '@/data/shortcuts'
-import { clone } from '@/utils/clone'
-import { selectYpTempPurchase, selectTempPurchaseYp, saveYpTempPurchase } from '@/api/yp-inventory/yp-temp-purchase.js'
+<script setup>
+import {ref, onMounted, nextTick} from 'vue'
+import {useUserStore} from '@/pinia/user-store'
+import {ElMessage} from 'element-plus'
+import {Export} from '@/utils/ExportExcel'
+import {formatDatetime, getDateRangeFormatDate} from '@/utils/date'
+import {maxHalfYear} from '@/data/shortcuts'
+import {clone} from '@/utils/clone'
+import {selectYpTempPurchase, selectTempPurchaseYp, saveYpTempPurchase} from '@/api/yp-inventory/yp-temp-purchase.js'
 import TempPurchaseAudit from '@/views/yp-inventory/TempPurchaseAudit.vue'
 import TempPurchaseEdit from '@/views/yp-inventory/TempPurchaseEdit.vue'
 
+const userInfo = useUserStore().userInfo
 const editableTabsValue = ref('ypPurchaseInfo')
-const userCode = store.state.user.info.code
-const userName = store.state.user.info.name
+const userCode = userInfo.code
+const userName = userInfo.name
 const ypPurchaseData = ref([])
 const inpatientNo = ref('')
 const chargeCode = ref('')
@@ -206,44 +217,42 @@ const dateRange = ref([])
 const now = formatDatetime(new Date())
 const start = formatDatetime(maxHalfYear[2].value[0])
 const end = formatDatetime(maxHalfYear[2].value[1])
-const windowSize = store.state.app.windowSize
-const tableHeight = windowSize.h / 1.2
 const pageSize = ref(30)
 const currentPage = ref(1)
 const handleSizeChange = (val) => {
-    pageSize.value = val
+  pageSize.value = val
 }
 const handleCurrentChange = (val) => {
-    currentPage.value = val
+  currentPage.value = val
 }
 const handleClick = (tab, event) => {
-    editableTabsValue.value = tab.props.name
-    if (editableTabsValue.value === 'ypPurchaseInfo') {
-        queryYpTempPurchaseData()
-    }
+  editableTabsValue.value = tab.props.name
+  if (editableTabsValue.value === 'ypPurchaseInfo') {
+    queryYpTempPurchaseData()
+  }
 }
 const ztOptions = [
-    { value: '1', label: '已接收' }, { value: '2', label: '未接收' },
-    { value: '3', label: '已采购' }, { value: '4', label: '未采购' },
-    { value: '5', label: '已入库' }, { value: '6', label: '未入库' }]
+  {value: '1', label: '已接收'}, {value: '2', label: '未接收'},
+  {value: '3', label: '已采购'}, {value: '4', label: '未采购'},
+  {value: '5', label: '已入库'}, {value: '6', label: '未入库'}]
 const desc = ref('科室临购药品在本院出现滞销（90天以上未使用或使用数量低于购进数量的30%以下），导致过期现象，则该药品的损失由申请科室承担，并1年内不能再申请新药。')
 const tempPurchaseData = ref([])
 const queryData = ref({
-    inpatientNo: '',
-    chargeCode: '',
-    ztFlag: '',
-    startTime: '',
-    endTime: '',
+  inpatientNo: '',
+  chargeCode: '',
+  ztFlag: '',
+  startTime: '',
+  endTime: '',
 })
 
 onMounted(() => {
-    nextTick(() => {
-        queryTempPurchaseYp('')
-        queryData.startTime = start;
-        queryData.endTime = end + " 23:59:59";
-        dateRange.value = [start, end];
-        queryYpTempPurchaseData()
-    })
+  nextTick(() => {
+    queryTempPurchaseYp('')
+    queryData.startTime = start;
+    queryData.endTime = end + " 23:59:59";
+    dateRange.value = [start, end];
+    queryYpTempPurchaseData()
+  })
 })
 
 const showAuditTempPurchase = ref(false)
@@ -255,232 +264,215 @@ const editTempPurchaseName = ref('临购药品修改')
 const ypTempPurchaseEditData = ref([])
 
 const queryYpTempPurchaseData = () => {
-    if (dateRange.value) {
-        queryData.value.startTime = formatDatetime(dateRange.value[0])
-        queryData.value.endTime = formatDatetime(dateRange.value[1])
-    }
-    queryData.value.chargeCode = chargeCode.value
-    queryData.value.inpatientNo = inpatientNo.value
-    queryData.value.ztFlag = ztFlag.value
-    selectYpTempPurchase(queryData.value)
-        .then((res) => {
-            ypPurchaseData.value = res
-        })
-        .catch(() => {
-            ypPurchaseData.value = []
-        })
+  if (dateRange.value) {
+    let dateS = getDateRangeFormatDate(dateRange.value)
+    queryData.value.startTime = dateS.startTime
+    queryData.value.endTime = dateS.endTime
+  }
+  queryData.value.chargeCode = chargeCode.value
+  queryData.value.inpatientNo = inpatientNo.value
+  queryData.value.ztFlag = ztFlag.value
+  selectYpTempPurchase(queryData.value)
+      .then((res) => {
+        ypPurchaseData.value = res
+      })
+      .catch(() => {
+        ypPurchaseData.value = []
+      })
 
 }
 
 const queryTempPurchaseYp = (text) => {
-    selectTempPurchaseYp(text)
-        .then((res) => {
-            tempPurchaseData.value = res
-        })
-        .catch(() => {
-            tempPurchaseData.value = []
-        })
+  selectTempPurchaseYp(text)
+      .then((res) => {
+        tempPurchaseData.value = res
+      })
+      .catch(() => {
+        tempPurchaseData.value = []
+      })
 
 }
 
 const ypChange = async () => {
-    await nextTick()
-    let dataF = tempPurchaseData.value.filter((item) => {
-        return item.chargeCode === ruleForm.value.chargeCode
-    })
-    if (dataF) {
-        ruleForm.value.chargeName = dataF[0].chargeName
-        ruleForm.value.serial = dataF[0].serial
-        ruleForm.value.specification = dataF[0].specification
-    }
+  await nextTick()
+  let dataF = tempPurchaseData.value.filter((item) => {
+    return item.chargeCode === ruleForm.value.chargeCode
+  })
+  if (dataF) {
+    ruleForm.value.chargeName = dataF[0].chargeName
+    ruleForm.value.serial = dataF[0].serial
+    ruleForm.value.specification = dataF[0].specification
+  }
 }
 
 const formSize = ref('default')
 const ruleFormRef = ref()
 const ruleForm = ref({
-    applyId: '', // 申请id
-    chargeName: '', // 药品名称
-    chargeCode: '', // 药品code
-    serial: '', // 序号
-    specification: '', // 规格
-    amount: '', // 申请数量
-    useResult: '', // 使用理由
-    op: userName, // 申请人(要求是临床科主任)
-    opId: userCode, // 申请人id
-    name: '', // 患者姓名
-    inpatientNo: '', // 住院号
-    receptFlag: '', // 是否接收(1: 接收)
-    purchaseFlag: '', // 是否采购(1: 采购)
-    storageFlag: '', // 是否入库(1: 入库)
-    applyDate: now, // 申请日期
-    auditDate: '', // 审核日期
-    result: '', // 未采购原因
+  applyId: '', // 申请id
+  chargeName: '', // 药品名称
+  chargeCode: '', // 药品code
+  serial: '', // 序号
+  specification: '', // 规格
+  amount: '', // 申请数量
+  useResult: '', // 使用理由
+  op: userName, // 申请人(要求是临床科主任)
+  opId: userCode, // 申请人id
+  name: '', // 患者姓名
+  inpatientNo: '', // 住院号
+  receptFlag: '', // 是否接收(1: 接收)
+  purchaseFlag: '', // 是否采购(1: 采购)
+  storageFlag: '', // 是否入库(1: 入库)
+  applyDate: now, // 申请日期
+  auditDate: '', // 审核日期
+  result: '', // 未采购原因
 })
 const rules = ref({
-    chargeCode: [
-        { required: true, message: '请选择药品', trigger: 'change' },
-    ],
-    amount: [
-        { required: true, message: '请填写申请数量', trigger: 'blur' },
-    ],
-    useResult: [
-        { required: true, message: '请填写使用理由', trigger: 'blur' },
-    ],
-    name: [
-        { required: true, message: '请填写患者姓名', trigger: 'blur' },
-    ],
-    inpatientNo: [
-        { required: true, message: '请填写住院号', trigger: 'blur' },
-    ],
+  chargeCode: [
+    {required: true, message: '请选择药品', trigger: 'change'},
+  ],
+  amount: [
+    {required: true, message: '请填写申请数量', trigger: 'blur'},
+  ],
+  useResult: [
+    {required: true, message: '请填写使用理由', trigger: 'blur'},
+  ],
+  name: [
+    {required: true, message: '请填写患者姓名', trigger: 'blur'},
+  ],
+  inpatientNo: [
+    {required: true, message: '请填写住院号', trigger: 'blur'},
+  ],
 })
 
 const submitForm = async (formEl) => {
-    if (!formEl) return
-    await formEl.validate((valid, fields) => {
-        if (valid) {
-            alert(Number.parseFloat(ruleForm.value.amount))
-            if (Number.isNaN(Number.parseFloat(ruleForm.value.amount))) {
-                ElMessage({
-                    type: "warning",
-                    message: '申请数量不是数值，请检查！',
-                    duration: 2500,
-                    showClose: true,
-                });
-                return
-            }
-            saveYpTempPurchase(ruleForm.value).then((res) => {
-                if (res.cg) {
-                    ElMessage({
-                        type: "success",
-                        message: res.cg,
-                        duration: 2500,
-                        showClose: true,
-                    });
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      alert(Number.parseFloat(ruleForm.value.amount))
+      if (Number.isNaN(Number.parseFloat(ruleForm.value.amount))) {
+        ElMessage({
+          type: "warning",
+          message: '申请数量不是数值，请检查！',
+          duration: 2500,
+          showClose: true,
+        });
+        return
+      }
+      saveYpTempPurchase(ruleForm.value).then((res) => {
+        if (res.cg) {
+          ElMessage({
+            type: "success",
+            message: res.cg,
+            duration: 2500,
+            showClose: true,
+          });
 
-                    formEl.resetFields()
-                    return
-                }
-            });
-        } else {
-            console.log('error submit!', fields)
+          formEl.resetFields()
         }
-    })
+      });
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
 }
 
 const resetForm = (formEl) => {
-    if (!formEl) return
-    formEl.resetFields()
+  if (!formEl) return
+  formEl.resetFields()
 }
 
 const auditTempPurchase = (row) => {
-    showAuditTempPurchase.value = true
-    ypTempPurchaseDetail.value = row
+  showAuditTempPurchase.value = true
+  ypTempPurchaseDetail.value = row
 }
 
 const closeTempPurchaseAudit = (flag) => {
-    if (flag) {
-        showAuditTempPurchase.value = false
-    }
-    queryYpTempPurchaseData()
+  if (flag) {
+    showAuditTempPurchase.value = false
+  }
+  queryYpTempPurchaseData()
+}
+
+const handleClose = (done) => {
+  queryYpTempPurchaseData()
+  done()
 }
 
 const editTempPurchase = (row) => {
-    if (row.receptFlag === '1') {
-        ElMessage({
-            type: "warning",
-            message: '临购药品已接收的申请不允许修改，请检查！',
-            duration: 2500,
-            showClose: true,
-        });
-        return
-    }
+  if (row.receptFlag === '1') {
+    ElMessage({
+      type: "warning",
+      message: '临购药品已接收的申请不允许修改，请检查！',
+      duration: 2500,
+      showClose: true,
+    });
+    return
+  }
 
-    showEditTempPurchase.value = true
-    ypTempPurchaseEditData.value = row
+  showEditTempPurchase.value = true
+  ypTempPurchaseEditData.value = row
 }
 
 const closeTempPurchaseEdit = (flag) => {
-    if (flag) {
-        showEditTempPurchase.value = false
-    }
-    queryYpTempPurchaseData()
+  if (flag) {
+    showEditTempPurchase.value = false
+  }
+  queryYpTempPurchaseData()
 }
 
 // 导出临购药品明细信息
 const exportData = () => {
-    if (ypPurchaseData.value.length === 0) {
-        ElMessage({
-            message: "没有可以导出的数据！",
-            type: "warning",
-            duration: 2500,
-            showClose: true,
-        });
-    } else {
-        const title = {
-            chargeCode: "药品编码",
-            chargeName: "药品名称",
-            serial: "药品包装",
-            specification: "药品规格",
-            name: "患者姓名",
-            inpatientNo: "住院号",
-            amount: "数量",
-            useResult: "使用理由",
-            op: "申请人",
-            receptFlag: "是否接收",
-            purchaseFlag: "是否采购",
-            storageFlag: "是否入库",
-            applyDate: "申请日期",
-            auditDate: "审核日期",
-            result: "采购情况",
-        };
+  if (ypPurchaseData.value.length === 0) {
+    ElMessage({
+      message: "没有可以导出的数据！",
+      type: "warning",
+      duration: 2500,
+      showClose: true,
+    });
+  } else {
+    const title = {
+      chargeCode: "药品编码",
+      chargeName: "药品名称",
+      serial: "药品包装",
+      specification: "药品规格",
+      name: "患者姓名",
+      inpatientNo: "住院号",
+      amount: "数量",
+      useResult: "使用理由",
+      op: "申请人",
+      receptFlag: "是否接收",
+      purchaseFlag: "是否采购",
+      storageFlag: "是否入库",
+      applyDate: "申请日期",
+      auditDate: "审核日期",
+      result: "采购情况",
+    };
 
-        const d = clone(ypPurchaseData.value)
-        d.forEach(val => {
-            if (val.serial === '99') {
-                val.serial = '大包装'
-            } else {
-                val.serial = '小包装'
-            }
-            if (val.receptFlag === '1') {
-                val.receptFlag = '是'
-            } else {
-                val.receptFlag = '否'
-            }
-            if (val.purchaseFlag === '1') {
-                val.purchaseFlag = '是'
-            } else {
-                val.purchaseFlag = '否'
-            }
-            if (val.storageFlag === '1') {
-                val.storageFlag = '是'
-            } else {
-                val.storageFlag = '否'
-            }
-        });
-        Export(d, title, "临购药品明细信息")
-    }
+    const d = clone(ypPurchaseData.value)
+    d.forEach(val => {
+      if (val.serial === '99') {
+        val.serial = '大包装'
+      } else {
+        val.serial = '小包装'
+      }
+      if (val.receptFlag === '1') {
+        val.receptFlag = '是'
+      } else {
+        val.receptFlag = '否'
+      }
+      if (val.purchaseFlag === '1') {
+        val.purchaseFlag = '是'
+      } else {
+        val.purchaseFlag = '否'
+      }
+      if (val.storageFlag === '1') {
+        val.storageFlag = '是'
+      } else {
+        val.storageFlag = '否'
+      }
+    });
+    Export(d, title, "临购药品明细信息")
+  }
 }
 
-</script>
-<!-- <template>
-    <el-timeline style="max-width: 600px">
-      <el-timeline-item center timestamp="2018/4/12" placement="top">
-        <el-card>
-          <h4>Update Github template</h4>
-          <p>Tom committed 2018/4/12 20:46</p>
-        </el-card>
-      </el-timeline-item>
-      <el-timeline-item timestamp="2018/4/3" placement="top">
-        <el-card>
-          <h4>Update Github template</h4>
-          <p>Tom committed 2018/4/3 20:46</p>
-        </el-card>
-      </el-timeline-item>
-      <el-timeline-item center timestamp="2018/4/2" placement="top">
-        Event start
-      </el-timeline-item>
-      <el-timeline-item timestamp="2018/4/2" placement="top">
-        Event end
-      </el-timeline-item>
-    </el-timeline>
-  </template> -->
+</script>