1

src/components/common/fileUpload.vue

 <template>
   <div>
     <template v-if="!data.isShowEdit">
-      <q-input filled bg-color="myInput" @focus="data.isShowEdit=true" label="请输入跟进记录" />
+      <q-input filled bg-color="myInput" @focus="data.isShowEdit = true" label="请输入跟进记录" />
     </template>
     <template v-else>
       <div class="editer_input">
-        <q-input v-model="text" style="50px" maxlength="1000" type="textarea" placeholder="请填写跟进记录" />
-        <!-- <div></div> -->
+        <q-input v-model="msg.Remark" maxlength="1000" type="textarea" placeholder="请填写跟进记录" />
+        <div class="file_box">
+          <div class="img_list">
+            <div v-for="(e,i) in msg.ImageList" :key="i" class="img_box">
+              <img :src="e" class="img" />
+              <q-icon name="cancel" color="primary" class="del_icon"  @click="delImg(i)"/>
+            </div>
+          </div>
+          <div class="file_list">
+            <div v-for="(e,i) in msg.FileList" :key="i" class="flex items-center file_box">
+              <div class="flex items-center">
+                附件：
+                <span style="color:#333">{{ e.FileName }}</span>
+                ({{ e.size }})
+              </div>
+              <div class="del_btn" @click="delFile(i)">删除</div>
+            </div>
+          </div>
+        </div>
         <div class="file_Space">
           <div style="display:flex;align-items:center;">
             <div>
-              <a-upload v-model:file-list="data.imageList" name="file" :multiple="true"
-                action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="uploadImg">
+              <a-upload
+                accept="image/*"
+                v-model:file-list="data.imageList"
+                name="file"
+                :multiple="true"
+                :show-upload-list="false"
+                :customRequest="customUploadImg"
+              >
                 <i style="font-size:25px;cursor:pointer;" class="iconfont icon-picture"></i>
               </a-upload>
             </div>
             <div style="margin-left:8px;">
-              <a-upload v-model:file-list="data.fileList" name="file" :multiple="true"
-                action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="handleChange">
+              <a-upload
+                v-model:file-list="data.fileList"
+                name="file"
+                :multiple="true"
+                :show-upload-list="false"
+                :customRequest="customUploadFile"
+              >
                 <i style="font-size:20px;cursor:pointer;" class="iconfont icon-paperclip"></i>
               </a-upload>
             </div>
           </div>
           <div>
-            <q-btn color="myInput" text-color="#000" size="sm" @click="data.isShowEdit=false" label="取消" />
-            <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" />
+            <q-btn
+              color="myInput"
+              text-color="#000"
+              size="sm"
+              @click="data.isShowEdit = false"
+              label="取消"
+            />
+            <q-btn color="primary" style="margin-left:10px;" size="sm" @click="save" label="确定" />
           </div>
         </div>
       </div>
@@ -32,76 +66,129 @@
   </div>
 </template>
 <script lang="ts">
-  import {
-    reactive,
-  } from 'vue'
-  // import message from '@/utils/message'
-  // import customer2 from '@/api/customer2'
-  export default {
-    setup() {
-      interface dataParam {
-        [key: string]: any
-      }
-      interface FileItem {
-        uid: string;
-        name?: string;
-        status?: string;
-        response?: string;
-        url?: string;
-      }
-      interface FileInfo {
-        file: FileItem;
-        fileList: FileItem[];
-      }
-      const data = reactive < dataParam > ({
-        isShowEdit: false,
-        fileList: [],
-        imageList: []
+import {
+  reactive,
+  inject
+} from 'vue'
+import customer2 from '@/api/customer2'
+import massage from "@/utils/message"
+import { UploadSelfFile } from '@/utils/upload'
+interface dataParam {
+  [key: string]: any
+}
+export default {
+  setup(props,ctx) {
+    let msg =  reactive<dataParam>({
+        CustomerId: inject('CustomerId'),
+        Remark: "",
+        ImageList: [],
+        FileList: []
+      })
+    const data = reactive<dataParam>({
+      isShowEdit: false,
+      fileList: [],
+      imageList: []
+    })
+    let customUploadImg = (file) => {
+      UploadSelfFile('/horse', file.file, (res) => {
+        msg.ImageList.push(res.FileUrl )
+      })
+    }
+    let customUploadFile = (file) => {
+      UploadSelfFile('/horse', file.file, (res) => {
+       msg.FileList.push({ FileName: res.FileName, FileUrl: res.FileUrl, size: res.Size })
+      })
+    }
+    const delImg=(i)=>{
+      msg.ImageList.splice(i,1)
+    }
+    const delFile=(i)=>{
+       msg.FileList.splice(i,1)
+    }
+    const save = () => {
+      customer2.setCustomerTripFollowUpInfo(msg).then((res)=>{
+        massage.successMsg(res.data.Message)
+        msg.Remark=""
+        msg.ImageList=[]
+        msg.FileList=[]
+        ctx.emit("success")
       })
-      const uploadImg = (info: FileInfo) => {
-        if (info.file.status !== 'uploading') {
-          console.log(info.file, info.fileList);
-        }
-        console.log(info,'info');
-        // if (info.file.status === 'done') {
-        //   message.success(`${info.file.name} file uploaded successfully`);
-        // } else if (info.file.status === 'error') {
-        //   message.error(`${info.file.name} file upload failed.`);
-        // }
-      };
-      // onMounted(() => {
+    }
 
-      // })
-      return {
-        data,
-        uploadImg
-      }
+    return {
+      msg,
+      data,
+      customUploadImg,
+      customUploadFile,
+      delImg,
+      delFile,
+      UploadSelfFile,
+      save
     }
   }
+}
 
 </script>
-<style lang="scss">
-  .editer_input {
-    padding: 5px 0;
-  }
+<style lang="scss" scoped>
+.editer_input {
+  padding: 5px 0;
+}
 
-  .myInput {
-    background-color: #f6f6f6 !important;
-  }
-
-  .file_Space {
+.myInput {
+  background-color: #f6f6f6 !important;
+}
+.file_box {
+  margin-top: 5px;
+  .img_list {
     display: flex;
-    justify-content: space-between;
-    margin-top: 10px;
-    align-items: center;
-  }
+    flex-wrap: wrap;
+    .img_box {
+      width: 40px;
+      height: 40px;
+      margin: 10px;
 
-  .q-field__control {
-    background-color: #f6f6f6 !important;
+      position: relative;
+      .img {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        object-fit: cover;
+      }
+      .del_icon {
+        font-size: 18px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(50%, -50%);
+      }
+    }
   }
-
-  .q-field--filled .q-field__control:hover:before {
-    opacity: 0;
+  .file_list {
+    .file_box {
+      font-size: 14px;
+      color: #9696a6;
+      .del_btn {
+        margin-left: 10px;
+        padding-left: 5px;
+        border-left: 1px solid var(--q-primary);
+        color: var(--q-primary);
+        cursor: pointer;
+      }
+    }
   }
+}
+.file_Space {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+  align-items: center;
+}
+
+.q-field__control {
+  background-color: #f6f6f6 !important;
+}
 
+.q-field--filled .q-field__control:hover:before {
+  opacity: 0;
+}
 </style>

src/pages/customer/customerSetup.vue

 <template>
   <div class="q-pa-md">
-    <q-page padding style="background: #FFF;border-radius: 10px;" >
+    <q-page padding class="page"  :style-fn="myTweak(640)">
       <q-tabs
         v-model="tab"
         dense
@@ -16,12 +16,12 @@
         <q-tab name="clue" label="线索分配规则" />
         <q-tab name="phase" label="客户阶段" />
       </q-tabs>
-    
+      <div class="container fit">
         <customer-Field v-if="tab == 'field'"></customer-Field>
         <clue-rule v-if="tab == 'clue'"></clue-rule>
         <customer-phase v-if="tab == 'phase'"></customer-phase>
         <customerlabel v-if="tab == 'label'"></customerlabel>
-     
+      </div>
     </q-page>
   </div>
 </template>
@@ -39,7 +39,7 @@ import {
 } from 'vue'
 
 export default defineComponent({
- 
+
   components: {
     customerField,
     clueRule,
@@ -48,15 +48,31 @@ export default defineComponent({
   },
   setup() {
     let tab = ref<string>('field')
-    if( router.currentRoute.value.query && router.currentRoute.value.query.type){
+    if (router.currentRoute.value.query && router.currentRoute.value.query.type) {
       tab.value = router.currentRoute.value.query.type as string
-      
+
+    }
+    let myTweak= (offset)=> {
+      return { minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh' }
     }
     return {
       tab,
+      myTweak
     }
 
   }
 })
 
 </script>
+<style lang="scss" scoped>
+.page{
+   background: #FFF;
+   box-sizing: border-box;
+   border-radius: 10px;
+}
+  .container{
+    box-sizing: border-box;
+    overflow: scroll;
+
+  }
+</style>
\ No newline at end of file

src/store/modules/user/getters.ts

@@ -14,6 +14,9 @@ const userGetter = {
     const userInfo = store.state.user.userDetail
     return userInfo
   },
+  getLoginUserInfo() {
+    return  store.state.user.loginUserInfo
+  }
 }
 
 type UserGetter = typeof userGetter

src/store/modules/user/state.ts

@@ -18,6 +18,7 @@ const state = {
     roleId: 0,
     userAvatar:''
   },
+  loginUserInfo:{},
   currentTeamRoleId: 0, // 当前所选择的团队用户所具有的权限
   currentProjectRoleId: 0, // 当前所选择的项目用户所具有的权限
   menuList: []

src/utils/common.ts

-import {Loading} from 'quasar'
-  
-interface itemParams {
-    [propName: string]: any
-}
-/**
- * 配置相关
- */
-export function CommonConfig() {
-    return {
-      FileConfig: {
-        FileUrl: 'http://192.168.10.214:8130', //本地服务器文件预览地址
-        UploadUrl: "http://192.168.10.214:8120", //本地上传文件地址
-      }
-    }
-  }
-  
-  /**
-   * 上传文件 
-   */
-  export function UploadSelfFile(path, file, callback, configObj) {
-    //用户登录缓存
-    const cacheInfo:itemParams = JSON.parse(window.localStorage["loginUserInfo"]);
-    //上传配置
-    let uploadConfig:itemParams={};
-    if (cacheInfo && cacheInfo.data && cacheInfo.data.UploadConfig) {
-      uploadConfig = cacheInfo.data.UploadConfig;
-    }
-    //获取文件扩展名
-    // const index:string = file.name.lastIndexOf(".");
-    // let suffix:string = file.name.substr(index);
-    // const MyDate:any = new Date()
-    // var timestamp1 = Date.parse(MyDate) + "_" + (Math.ceil(Math.random() * 1000));
-    const str = '/Test';
-    const newPath = "/EduSystem" + str + '/Upload/' + path;
-    const uploadLoadding = Loading;
-    uploadLoadding.show({
-      message: '正在上传文件,请稍后...'
-    })
-    if (uploadConfig) {    
-       switch (uploadConfig.StoreType) {
-        //上传文件到腾讯云
-        // case 1:
-        //   newPath += "/" + timestamp1 + "" + suffix;
-        //   UploadFileToTencent(uploadConfig, newPath, file, uploadLoadding, callback);
-        //   break;
-        //   //上传文件到阿里云
-        // case 2:
-        //   newPath += "/" + timestamp1 + "" + suffix;
-        //   UploadFileToALi(uploadConfig, newPath, file, uploadLoadding, callback);
-        //   break;
-          //上传文件到自己文件服务器
-        case 3:
-          UploadFileToSystem(uploadConfig, newPath, file, uploadLoadding, callback, configObj);
-          break;
-      }
-    }
-  }
-  
-  /**
-   * 上传文件到本地文件系统
-   */
-  export function UploadFileToSystem(uploadConfig, fileFullPath, fileObj, uploadLoadding, successCall, configObj) {
-    const fileConfig:itemParams = CommonConfig();
-    const locationName:string = window.location.hostname;
-    if (locationName.indexOf('localhost') !== -1) {
-      uploadConfig.UploadDomain = fileConfig.FileConfig.UploadUrl;
-      uploadConfig.CustomDomain = fileConfig.FileConfig.FileUrl;
-    }
-    let url = uploadConfig.UploadDomain + "/Upload?filePath=" + fileFullPath;
-    if (configObj) {
-      //是否转换图片
-      if (configObj.isTrans && configObj.isTrans == 1) {
-        url += "&isTrans=1"
-      }
-      if (configObj.isCreateCover && configObj.isCreateCover == 1) {
-        url += "&isCreateCover=1"
-      }
-    }
-    const formData = new FormData()
-    formData.append('myfile', fileObj)
-    const xhr = new XMLHttpRequest()
-    xhr.onload = function () {
-      uploadLoadding.hide();
-      const jsonObj:itemParams = JSON.parse(xhr.responseText);
-      if (jsonObj.StatusCode === 1 && successCall) {
-        const tempArray:any = [];
-        if (jsonObj.OtherFile && jsonObj.OtherFile.length > 0) {
-          jsonObj.OtherFile.forEach(item => {
-            tempArray.push(uploadConfig.CustomDomain + item);
-          })
-        }
-        const uploadResult:itemParams = {
-          Code: 1,
-          FileName: fileObj.name,
-          FileUrl: uploadConfig.CustomDomain + jsonObj.FilePath,
-          VideoCoverImg: uploadConfig.CustomDomain + jsonObj.VideoCoverImg,
-          ExtFile: tempArray
-        }
-        if (successCall) {
-  
-          successCall(uploadResult);
-        }
-      }
-    }
-    xhr.open('post', url, true)
-    xhr.send(formData)
-  }
-  
-//   export function UploadFileToTencent(){
-  
-//   }
-//   export function UploadFileToALi(){
-  
-//   }
\ No newline at end of file