230912

components.d.ts

@@ -65,6 +65,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TableBase: typeof import('./src/components/TableBase/index.vue')['default']
+    Upimg: typeof import('./src/components/upImg/upimg.vue')['default']
     Upload: typeof import('./src/components/Upload/index.vue')['default']
   }
   export interface ComponentCustomProperties {

package.json

@@ -20,6 +20,7 @@
     "js-md5": "^0.7.3",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.33",
+    "qiniu-js": "^3.4.1",
     "qs": "^6.11.2",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"

src/components/upImg/upimg.vue

@@ -0,0 +1,170 @@
+<!-- 上传一张图片回显 -->
+<template>
+    <div class="">
+        <div class="upImg">
+            <div class="upImg-item" v-if="!imgData">
+                <input class="upImg-item-input" type="file" placeholder="选择图片" @change="changesFun" />
+                <div class="upImg-item-icon"><el-icon>
+                        <Plus />
+                    </el-icon></div>
+            </div>
+            <div class="upImg-img" v-else @mouseenter="showModel=true" @mouseleave="showModel=false">
+                <img :src="imgData" style="width: 100%;height: 100%;object-fit: cover;">
+                <div class="upImg-img-model" v-show='showModel'>
+                    <div @click="clickDel" style="color: #fff;">删除</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { defineEmits ,ref} from 'vue';
+import { UpFileToken } from '@/api/public/index'
+import { GlobalStore } from '@/stores/index'
+import { resolve } from 'path';
+import qiniu from "qiniu-js";
+import { ElMessage} from 'element-plus'
+
+const props = defineProps({
+    imgData: {
+        type: String,
+        default: () => '',
+    },
+});
+
+const uploadData = {
+  token: '',
+  key: ''
+}
+const globalStore = GlobalStore()
+const showModel = ref(false)
+const emits = defineEmits()
+const files = ref()
+const changesFun = async (e:any) => {
+    files.value = e.target.files[0]
+    await clickToken()//获取token
+    uploadData.key = e.target.files[0].name  || null
+    QiniuYun()
+    console.log('选择',e,uploadData)
+}
+
+//获取token Api
+const clickToken = async () => {
+    return new Promise((resolve:any)=>{
+        UpFileToken({ User_tokey: globalStore.GET_User_tokey }).then(res => {
+            uploadData.token = res.Data as string
+            resolve()
+        })
+    })
+   
+}
+
+//函数
+const QiniuYun = async ()=>{
+    var config = {
+        useCdnDomain: false, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
+        region: qiniu.region.z2,
+        domain: "https://up-z2.qiniup.com", //配置好的七牛云域名  如   https://cdn.qniyun.com/
+        chunkSize: 1000, //每个分片的大小，单位mb，默认值3
+        forceDirect: false //直传还是断点续传方式，true为直传
+    };
+    var putExtra = {
+        fname: files.value.name, //文件原始文件名
+        params: {},
+        mimeType: [] || null
+    };
+    var observable = qiniu.upload(files.value, {...uploadData});
+    //   设置实例的监听对象
+    var observer = {
+    next(res:any) {
+       console.log('实例监听对象', res)
+    },
+    // 接收上传错误信息
+    error(err:any) {
+        switch (err.code) {
+            case 413:
+                ElMessage.error('错了哦，图片可能太大了哦')
+                break
+            case 408:
+                ElMessage.error('错了哦，请求超时')
+                break
+            default:
+                ElMessage.error('错了哦，上传错误')
+        }
+    },
+    // 接收上传完成后的信息
+    complete(com:any) {
+        console.log('七牛云返回',com)
+    }
+};
+observable.subscribe(observer);
+}
+
+//删除
+const clickDel = async (e:any)=>{
+    console.log('删除',e)
+    emits('update:upImg','');
+}
+
+</script>
+<style lang="scss">
+/* @import url(); 引入css类 */
+.upImg {
+    width: 50px;
+    height: 50px;
+    position: relative;
+    overflow: hidden;
+    border-radius: 6px;
+
+    &-item:hover {
+        border: 1px dashed var(--el-color-primary);
+    }
+
+    &-item {
+        border: 1px dashed var(--el-border-color-darker);
+
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+
+        &-input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            z-index: 1;
+            cursor: pointer;
+        }
+
+        &-icon {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+        }
+    }
+
+    &-img {
+        width: 100%;
+        height: 100%;
+        position: relative;
+
+        &-model {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(#000, 0.5);
+        }
+    }
+
+}</style>

src/hooks/useTablePublic.ts

@@ -96,7 +96,7 @@ export const verifyFormColumns = [
   { label: '产品型号', prop: 'T_model', align: 'center ' },
   { label: '产品规格', prop: 'T_spec', align: 'center ' },
   { label: '*数量', prop: 'count', align: 'center ', name: 'count', sortable: true },
-  { label: '单价', prop: 'T_price', align: 'center ', sortable: true },
+  { label: '单价', prop: 'T_price',  name: 'T_price',align: 'center ', sortable: true },
   { label: '总价', prop: 'T_total', align: 'center ', sortable: true },
   { prop: 'operation', label: '操作', width: 80, fixed: 'right' }
 ]

src/plugins/reimbursemyData.js

@@ -1,4 +1,4 @@
-export default dataList = [{
+var dataList = [{
     mapPick: [],
     selectData:[],
     T_trip_start_time: "",
@@ -63,4 +63,5 @@ export default dataList = [{
     T_reasons: "",
     T_project: "",
     T_img: ""
-}]
+}]
+export default dataList;

src/views/salary/ReimburseMy.vue

@@ -112,17 +112,19 @@
                             </template>
                         </el-table-column>
 
-                        <el-table-column label="附件" :min-width="data.drawerTiti != '详情' ? '80' : ''" >
+                        <el-table-column label="附件" :min-width="data.drawerTiti != '详情' ? '800' : ''">
                             <template #default="scope">
-                                <Upload :limit="1" v-model="scope.row.T_img" accept="image/*"
-                                    style="display: inline-block;float: left;"
+                                <!-- {{ kk }} -->
+                                <upImg v-model:upImg="scope.row.T_img" :imgData="scope.row.T_img"></upImg>
+                                <!-- <Upload ref="uploadRef" :limit="1" v-model="scope.row.T_img" accept="image/*"
+                                    style="float: left;"
                                      :disabled="data.drawerTiti=='详情'?true:false"
                                      :show-file-list="false">
                                         <el-icon>
                                             <Plus />
                                         </el-icon>
-                                    </Upload>
-                                    <img :src="scope.row.T_img" style="width: 40px;margin-left: 10px;">
+                                    </Upload> -->
+                                    <!-- <img :src="scope.row.T_img" style="width: 40px;margin-left: 10px;"> -->
                             </template>
                         </el-table-column>
                         <el-table-column fixed="right" min-width="300" v-if="data.drawerTiti != '详情'">
@@ -144,7 +146,6 @@
                         <el-table-column type="index" label="序号" fixed width="70" />
                         <el-table-column prop="T_time" label="打款时间" width="300" />
                         <el-table-column prop="T_money" label="打款金额" />
-                       
                     </el-table>
                 </el-form-item>
             </el-form>
@@ -168,10 +169,13 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 const dialogImageUrl = ref('')
 const dialogVisible = ref(false)
 import { GlobalStore } from '@/stores/index'
-import Upload from '@/components/Upload/index.vue'
 
+import upImg from '@/components/upImg/upimg.vue'
 
+// import dataList from '@/plugins/reimbursemyData.js'
 
+
+const kk = ref(555)
 const data = reactive({
     //费用类型
     optionsFeeType: [{ Id: '', T_name: '',FeeDetails:[]}],
@@ -204,11 +208,10 @@ const data = reactive({
             T_reasons: "",
             T_project: "",
             T_img: ""
-        }]
+        },]
     }
 })
-
-
+const uploadRef = ref()
 
 const changeFun = (timeKey: any, e: any) => {
     data.fromData.ReimburseDetails[e.$index].T_trip_start_time = timeKey[0]
@@ -233,6 +236,8 @@ const handlePictureCardPreview = (uploadFile: any) => {
 }
 //点击编辑/新增得确定按钮
 const subData = () => {
+    console.log('编辑',data.fromData)
+    return
     if (data.drawerTiti == '新增') {
         setAddApi()
     } else {
@@ -315,7 +320,7 @@ const handleCurrentChange = (val: number) => {
 }
 //显示弹窗
 const showDrawer = (e: string, datas: any) => {
-    console.log('datas', datas)
+    
     let id
     if (datas) id = datas.Id
     
@@ -352,6 +357,7 @@ const showDrawer = (e: string, datas: any) => {
             console.log('datas', datas,e)
             GetdetAPi(id)
             data.disabledNum = -1
+            // data.fromData.ReimburseDetails = [...data.fromData.ReimburseDetails,...dataList]
             break;
         case 'edi':
             FeeTypeApi()//获取费用类型
@@ -360,12 +366,14 @@ const showDrawer = (e: string, datas: any) => {
             data.disabledNum = 0
             GetdetAPi(id)
             data.fromData.T_id = id
+            // data.fromData.ReimburseDetails = [...data.fromData.ReimburseDetails,...dataList]
             break;
         default:
             console.log('提交审核')
             SubmitApi(id)
             break;
     }
+    
 }
 //提交审核api
 const SubmitApi = async(Id:any)=>{
@@ -385,6 +393,7 @@ const GetdetAPi = async (Id: any) => {
         data.tableRemit = resIt.Data.T_remit_detail
         data.fromData.T_money = resIt.Data.T_money
         data.fromData.ReimburseDetails = []
+        console.log('datas',uploadRef.value)
         arr.forEach((item: any) => {
             item.mapPick = [item.T_trip_start_time, item.T_trip_end_time]
         })
@@ -397,6 +406,7 @@ const GetdetAPi = async (Id: any) => {
 const handleClose = () => {
     data.drawer = false
 }
+
 //点击了编辑
 const EditFun = (e: any) => {
     data.disabledNum = e.$index

src/views/storehouse/sales/VerifyForm.vue

@@ -135,19 +135,26 @@ const deleteProduct = (row: any) => {
   // 设置产品的选中
   drawerProductRef.value?.selectTableChange(row)
 }
-const getMontageStr = (arr: any[], value1: string, value2: string): string => {
+const getMontageStr = (arr: any[], value1: string, value2: string ): string => {
   let str = ''
   arr.forEach(item => {
     str += `${item[value1]},${item[value2]}|`
   })
   return str
 }
+const getproductStr = (arr: any[], value1: string, value2: string ,value3: string): string => {
+  let str = ''
+  arr.forEach(item => {
+    str += `${item[value1]},${item[value2]},${item[value3]}|`
+  })
+  return str
+}
 const getFomrParams = () => {
   const recoveriesData = RecoveriesRef.value?.getMoneyDeatil()
   const invoiceData = InvoiceRef.value?.getMoneyDeatil()
   if (recoveriesData?.length) form.value.T_recoveries = getMontageStr(recoveriesData, 'T_date', 'T_money')
   if (invoiceData?.length) form.value.T_invoice = getMontageStr(invoiceData, 'T_date', 'T_money')
-  const product = getMontageStr(tableData.value, 'Id', 'count')
+  const product = getproductStr(tableData.value, 'Id', 'count','T_price')
   const params = {
     ...form.value,
     User_tokey: globalStore.GET_User_tokey,
@@ -163,9 +170,9 @@ const AddContract = (formEl: FormInstance | undefined) => {
     if (valid) {
       let res: any = {}
       const params = getFomrParams()
-      if (isNew.value) {
+      if (isNew.value) {//true新增
         res = await Storehouse_VerifyContract_Add({ ...params, T_customer_id: props.verify_customer_id })
-      } else {
+      } else {//false编辑
         res = await Storehouse_VerifyContract_Edit({ ...params, T_customer_id: props.verify_customer_id })
       }
       if (res.Code === 200) {
@@ -319,6 +326,13 @@ defineExpose({
                     autocomplete="off"
                     @blur="blurHandle"
                   />
+                  <el-input
+                    v-if="item.prop === 'T_price'"
+                    v-model.number="row.T_price"
+                    type="text"
+                    autocomplete="off"
+                    @blur="blurHandle"
+                  />
                   <ImageCom v-if="item.prop === 'T_img'" :src="row.T_img" />
                 </template>
               </el-table-column>