240228

package.json

@@ -16,6 +16,7 @@
     "file-saver": "^2.0.5",
     "iconv-lite": "^0.6.3",
     "js-md5": "^0.8.3",
+    "qiniu-js": "^3.4.2",
     "qs": "^6.11.2",
     "register-service-worker": "^1.7.2",
     "three": "^0.158.0",

src/api/index.ts

@@ -13,6 +13,10 @@ export * from './module/printUilts'//打印，导出
 
 export * from './module/home'
 export * from './module/menu'
+export * from './module/files'
+export * from './module/medicine'
+
+
 
 
 

src/api/module/files.ts

@@ -0,0 +1,7 @@
+
+import $http from '@/utils/index'
+
+// 获取上传七牛云token
+export const upFileToken = (params: any) => $http.get('/UpFileToken', params)
+
+

src/api/module/medicine.ts

@@ -0,0 +1,7 @@
+
+import $http from '@/utils/index'
+
+
+
+// 销售管理-列表
+export const medicineList = (params: any) => $http.post('/medicine-img/list', params)

src/assets/icons/demo_index.html

@@ -55,6 +55,18 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe6ea;</span>
+                <div class="name">药品</div>
+                <div class="code-name">&amp;#xe6ea;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b8;</span>
+                <div class="name">药品</div>
+                <div class="code-name">&amp;#xe7b8;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#x100d9;</span>
                 <div class="name">标签</div>
                 <div class="code-name">&amp;#x100d9;</div>
@@ -198,9 +210,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1700121886027') format('woff2'),
-       url('iconfont.woff?t=1700121886027') format('woff'),
-       url('iconfont.ttf?t=1700121886027') format('truetype');
+  src: url('iconfont.woff2?t=1710742058392') format('woff2'),
+       url('iconfont.woff?t=1710742058392') format('woff'),
+       url('iconfont.ttf?t=1710742058392') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -227,6 +239,24 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-yaopin"></span>
+            <div class="name">
+              药品
+            </div>
+            <div class="code-name">.icon-yaopin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yaopin1"></span>
+            <div class="name">
+              药品
+            </div>
+            <div class="code-name">.icon-yaopin1
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-biaoqian1"></span>
             <div class="name">
               标签
@@ -444,6 +474,22 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yaopin"></use>
+                </svg>
+                <div class="name">药品</div>
+                <div class="code-name">#icon-yaopin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yaopin1"></use>
+                </svg>
+                <div class="name">药品</div>
+                <div class="code-name">#icon-yaopin1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-biaoqian1"></use>
                 </svg>
                 <div class="name">标签</div>

src/assets/icons/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4333703 */
-  src: url('iconfont.woff2?t=1700121886027') format('woff2'),
-       url('iconfont.woff?t=1700121886027') format('woff'),
-       url('iconfont.ttf?t=1700121886027') format('truetype');
+  src: url('iconfont.woff2?t=1710742058392') format('woff2'),
+       url('iconfont.woff?t=1710742058392') format('woff'),
+       url('iconfont.ttf?t=1710742058392') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-yaopin:before {
+  content: "\e6ea";
+}
+
+.icon-yaopin1:before {
+  content: "\e7b8";
+}
+
 .icon-biaoqian1:before {
   content: "\100d9";
 }

src/assets/icons/iconfont.json

@@ -6,6 +6,20 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "4940482",
+      "name": "药品",
+      "font_class": "yaopin",
+      "unicode": "e6ea",
+      "unicode_decimal": 59114
+    },
+    {
+      "icon_id": "10177373",
+      "name": "药品",
+      "font_class": "yaopin1",
+      "unicode": "e7b8",
+      "unicode_decimal": 59320
+    },
+    {
       "icon_id": "29959511",
       "name": "标签",
       "font_class": "biaoqian1",

src/components/files.vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="files">
+        <el-drawer v-model="drawer" direction="rtl" append-to-body>
+            <template #header>
+                <h4>上传图片</h4>
+            </template>
+            <template #default>
+                <div>
+                    <el-upload v-model:file-list="fileList" multiple 
+                        action="#" 
+                        list-type="picture-card"
+                        :before-upload="beforeUpload"  
+                        :on-preview="handlePictureCardPreview">
+                        <el-icon>
+                            <Plus />
+                        </el-icon>
+                    </el-upload>
+
+                    <el-dialog v-model="dialogVisible">
+                        <img w-full :src="dialogImageUrl" style="width: 100%;height: auto;"/>
+                    </el-dialog>
+                </div>
+            </template>
+            <template #footer>
+                <div style="flex: auto">
+                    <el-button @click="drawer = false">取消</el-button>
+                    <el-button type="primary" @click="confirmClick">立即提交</el-button>
+                </div>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import * as qiniu from 'qiniu-js';
+import { upFileToken } from "@/api";
+import type { UploadProps, UploadUserFile } from 'element-plus'
+
+const dialogImageUrl = ref('')
+const dialogVisible = ref(false)
+
+const fileList = ref<UploadUserFile[]>([])//上传的图片列表
+
+const beforeUpload = async(file:any) => {  
+    // 这里可以添加文件类型、大小等校验逻辑  
+    // 如果校验通过，返回 true 继续上传；否则返回 false 终止上传  
+    var strtype:any = file.name.substring(file.name.lastIndexOf('.') + 1); //获取后缀 png jpg
+    const token:any = await upFileTokenApi(strtype)
+    handleUpload(file,token.data);
+}
+
+const handleUpload = (file:any,qiniuToken:any)=> {  
+    console.log('上传文件',file,qiniuToken,qiniu)
+    var config = {
+        useCdnDomain: false, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
+        region: qiniu.region.z2,
+        domain: "https://qiniu.region.z2", //配置好的七牛云域名  如   https://cdn.qniyun.com/
+        chunkSize: 1000, //每个分片的大小，单位mb，默认值3
+        forceDirect: false //直传还是断点续传方式，true为直传
+    };
+    var putExtra:any = {
+        params: {},
+        mimeType: [] || null
+    };
+    var key = file.name || null
+    // const observable = qiniu.upload(file, key, qiniuToken);  
+
+    const observable = qiniu.upload(file, key, qiniuToken, putExtra, config);  
+    observable.subscribe({  
+      next(res:any) {  
+        // 上传进度信息  
+        console.log(`上传进度信息: ${res}`);  
+      },  
+      error(err:any) {  
+        // 上传错误信息  
+        console.log(`上传错误信息: ${err}`);  
+      },  
+      complete(res:any) {  
+        // 上传完成信息  
+        console.log(`${res}`);  
+        // 更新你的文件列表或进行其他操作  
+        fileList.value.push({ name: file.name, url: res.key });  
+      },  
+    });  
+  }
+
+  
+
+
+
+
+/**
+ * 查看图片
+ */
+const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
+    console.log('')
+  dialogImageUrl.value = uploadFile.url!
+  dialogVisible.value = true
+}
+
+const drawer = ref(false)
+
+const confirmClick = () => {
+    console.log('提交',fileList.value)
+}
+const showDrawer = () => {
+    drawer.value = true
+}
+//函数
+const upFileTokenApi = async (strtype:any)=>{
+    return await upFileToken({T_suffix: strtype})
+}
+
+//暴露方法
+defineExpose({
+    showDrawer
+})
+</script>
+<style lang="scss">
+/* @import url(); 引入css类 */
+</style>

src/views/medicine/index.vue

@@ -0,0 +1,10 @@
+<template>
+    <div class=""><router-view /></div>
+</template>
+
+<script setup lang="ts">
+</script>
+<style lang="scss">
+/* @import url(); 引入css类 */
+
+</style>n

src/views/medicine/medicineManage/index.vue

@@ -0,0 +1,126 @@
+<!--  -->
+<template>
+  <div class="medicineManage">
+      <searchAdd isButtom="查询" :inline="true" @event="eventFun">
+          <template #searchConter>
+              <el-form-item label="日期">
+                  <el-date-picker v-model="data.datePicker" type="daterange" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
+                      start-placeholder="开始时间" end-placeholder="结束时间" clearable style="width: 200px;" @change="changeTime"/>
+              </el-form-item>
+              <el-form-item label="品种">
+                  <el-select v-model="data.initParam.productId" placeholder="品种" clearable @clear="data.initParam.productId=null">
+                      <el-option :label="item.name" :value="item.id" v-for="item,index in data.prodOptions" :key="index"/>
+                  </el-select>
+              </el-form-item>
+              <el-form-item label="购货单位">
+                  <el-select v-model="data.initParam.receivingUnit" filterable remote reserve-keyword placeholder="购货单位"
+                      :remote-method="remoteMethod" :loading="loading" @click="click2" clearable style="width: 200px;">
+                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                  </el-select>
+              </el-form-item>
+          </template>
+      </searchAdd>
+      <bg istitle="基本信息">
+          <template #bg>
+              <tables ref="TableRef" :requestApi="salesList" :columns="columns" :initParam="data.initParam">
+                <template #right="{ row }">
+                    <el-button link type="primary" size="small">查看</el-button>
+                    <el-button link type="danger" size="small" @click="filesFn">上传</el-button>
+                </template>
+              </tables>
+          </template>
+      </bg>
+      <files ref="FilesRef"></files>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted,nextTick} from 'vue'
+import { medicineList,prodList,stockunit,salesList} from "@/api";
+
+import tables from "@/components/table.vue";
+import files from "@/components/files.vue";
+import searchAdd from "@/components/searchAdd.vue";
+import bg from '@/components/bg.vue'
+const TableRef = ref()
+const FilesRef = ref()
+
+//函数
+const filesFn = async ()=>{
+  FilesRef.value.showDrawer()
+}
+const loading = ref(false)
+interface ListItem {
+  value: string
+  label: string
+}
+const list = ref<ListItem[]>([])
+const options = ref<ListItem[]>([])
+  const click2 = async ()=>{options.value = list.value }
+onMounted(async() => {
+  prodListApi()
+  const result:any = await stockunit({type:2,name:''})
+  let arr = result.data?.list || []
+  list.value = arr.map((item:any) => {
+      return { value: item, label: item}
+  })
+})
+//品名
+const prodListApi = async ()=>{
+  const result:any = await prodList({"page": 1,"pageSize": 99999})
+  data.prodOptions = result.data?.list
+}
+const remoteMethod = async(query: string) => {
+  if (query) {
+      loading.value = true
+      setTimeout(() => {
+          loading.value = false
+          options.value =  list.value.filter((item:any) => {
+              return item.label.toLowerCase().includes(query.toLowerCase())
+          })
+      }, 200)
+  } else {
+      options.value = []
+  }
+}
+
+
+// 渲染表格
+const columns: any = [
+  { prop: 'date', label: '名称', width: 120 },
+  { prop: 'receiving_unit', label: '批号', width: 120},
+  { prop: 'product_name', label: '失效日期', width: 120},
+  { prop: 'enterprise_name', label: '生产日期', width: 120},
+  { prop: 'spec_name', label: '批准文号', width: 120},
+  { prop: 'dosage_form_name', label: '生产企业', width: 120},
+  { prop: 'batch_number', label: '规格（剂/粒/支）', width: 150},
+  { prop: 'unit_name', label: '单位', width: 120},
+  { prop: 'quantity', label: '剂型', width: 120},
+  { prop: 'unit_price', label: '批签发合格编号', width: 150},
+  { prop: 'operation', label: '图片', fixed: 'right', 'min-width': 150 }
+]
+
+//请求参数
+const data:any = reactive({
+  datePicker: [],//时间选择
+  prodOptions:[],
+  initParam: {
+      "endDate": "",
+      "startDate": "",
+      "productId":null,
+      "receivingUnit": ""
+  }
+})
+
+//函数
+const changeTime = async () => {
+  if(data.datePicker){data.initParam.startDate = data.datePicker[0];data.initParam.endDate = data.datePicker[1]}
+  else {data.initParam.startDate='';data.initParam.endDate = ''}
+}
+//搜索
+const eventFun = async ()=>{
+  nextTick(() => {
+      TableRef.value?.getTableList()
+  })
+}
+</script>

src/views/salesmanagement/index.vue

@@ -7,4 +7,4 @@
 <style lang="scss">
 /* @import url(); 引入css类 */
 
-</style>n
+</style>