Ver código fonte

修改form表单上传

zhaoke 1 ano atrás
pai
commit
8e7b789b4d

+ 20 - 2
src/components/publicPageForm/index.vue

@@ -20,7 +20,7 @@
               <el-input show-password v-model="tableForm[item.pagecode]"></el-input>
             </template>
             <template v-else-if="fromDataType(item.datatype) == 'UPLOAD'">
-              <upload ref="upload" />
+              <upload :id="index" :base-img="tableForm[item.pagecode]" ref="upload" />
             </template>
             <template v-else-if="fromDataType(item.datatype) == 'SWITCH'">
               <el-switch v-model="tableForm[item.pagecode]"></el-switch>
@@ -87,6 +87,10 @@ export default {
       type: Number,
       default: 8
     },
+    formType: {
+      type: String,
+      default: 'add'
+    },
     labelWidth: {
       type: String,
       default: '80px'
@@ -110,6 +114,10 @@ export default {
     },
     formData: {
       handler (obj) {
+        if (!Object.keys(obj).length) {
+          const nload = this.formItemArr.filter(item => item.datatype == 'upload' || item.datatype == 'UPLOAD')
+          if (nload?.length) this.clearTypeUpload(nload)
+        }
         this.tableForm = obj
       },
       deep: true,
@@ -215,7 +223,16 @@ export default {
       if (nload?.length) {
         const files = this.$refs['upload']
         files.map((item, index) => {
-          if (item.imageUrl) this.tableForm[nload[index]['pagecode']] = item.imageUrl
+          this.tableForm[nload[index]['pagecode']] = item.imageUrl
+        })
+      }
+    },
+    clearTypeUpload (nload = []) {
+      if (nload?.length) {
+        const files = this.$refs['upload']
+        files.map((item) => {
+          item.imageUrl = ''
+          item.$el.firstChild.value = ''
         })
       }
     },
@@ -229,6 +246,7 @@ export default {
       this.$refs["ruleForm"].validate((valid) => {
         if (valid) {
           flag = true
+          this.clearTypeUpload(nload)
         } else {
           flag = false;
         }

+ 34 - 9
src/components/publicPageForm/upload.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="form-upload">
-    <input type="file" @change="previewFile()" /><br />
+    <input :id="'upflie' + id" type="file" @change="previewFile()" /><br />
     <img :src="imageUrl" height="200" alt="Image preview..." />
   </div>
 </template>
@@ -8,11 +8,33 @@
 <script>
 export default {
   name: 'Formupload',
+  props: {
+    id: {
+      type: Number,
+      default: 0
+    },
+    baseImg: {
+      type: String,
+      default: ''
+    }
+  },
   data () {
     return {
       imageUrl: ''
     };
   },
+  watch: {
+    baseImg: {
+      handler (str) {
+        this.imageUrl = ''
+        if (str) {
+          this.imageUrl = str
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
   methods: {
     beforeAvatarUpload (file) {
       const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
@@ -30,15 +52,18 @@ export default {
     },
     previewFile () {
       const that = this
-      const file = document.querySelector("input[type=file]").files[0]
-      const reader = new FileReader()
-      if (file) {
-        if (!this.beforeAvatarUpload(file)) return
-        reader.readAsDataURL(file)
-        reader.onload = function (e) {
-          that.imageUrl = this.result
+      that.$nextTick(() => {
+        const fileId = document.getElementById('upflie' + that.id)
+        const file = fileId?.files[0]
+        const reader = new FileReader()
+        if (file) {
+          if (!this.beforeAvatarUpload(file)) return
+          reader.readAsDataURL(file)
+          reader.onload = function (e) {
+            that.imageUrl = e.target.result
+          }
         }
-      }
+      })
     }
   }
 }

+ 6 - 6
src/getMenu.js

@@ -50,7 +50,7 @@ router.beforeEach(async (to, from, next) => {
         try {
           const treeData = await store.dispatch('user/getMenuInfo')
           if (Array.isArray(treeData) && treeData.length) {
-            const ndOrder = _.orderBy(treeData,['displaynumber'])
+            const ndOrder = _.orderBy(treeData, ['displaynumber'])
             const nd = ndOrder.filter(item => item.pageconfigurationid)
             store.dispatch('auth/changeAuthArrs', nd)
             // const typeData = setType(treeData, 'up_auth_id', 'auth_id')
@@ -62,11 +62,11 @@ router.beforeEach(async (to, from, next) => {
             router.addRoutes(menus)
             next({ ...to, replace: true })
           } else {
-            // await store.dispatch('user/resetToken')
-            // Message.error(error || 'Has Error')
-            // next(`/login?redirect=${to.path}`)
-            // NProgress.done()
-            next({ ...to, replace: true })
+            await store.dispatch('user/resetToken')
+            Message.error(error || 'Has Error')
+            next(`/login?redirect=${to.path}`)
+            NProgress.done()
+            // next({ ...to, replace: true })
           }
         } catch (error) {
           // remove token and go to login page to re-login

+ 7 - 1
src/layout/components/Navbar.vue

@@ -4,6 +4,11 @@
     <!-- <breadcrumb class="breadcrumb-container" /> -->
     <div class="navbar_top">
       <div class="nav_left">
+        <div class="log_img">
+          <el-avatar :size="40" :src="imgSrc">
+            <img src="@/assets/logo/error.png">
+          </el-avatar>
+        </div>
         <div class="log_name">{{ pageTitle }}</div>
       </div>
       <div class="newdata">{{ newData }}</div>
@@ -50,7 +55,7 @@ export default {
       breadList: this.getBreadcrumb(),
       getTimeInterval: null,
       usertHeart: null,
-      imgSrc: window.location.origin + sessionStorage.getItem('appLog'),
+      imgSrc: sessionStorage.getItem('appLogo'),
       pageTitle: sessionStorage.getItem('appName') ?? '行李全流程跟踪系统',
       name: sessionStorage.getItem('userName')
     }
@@ -190,6 +195,7 @@ export default {
         background: #ffffff;
       }
       > .log_name {
+        margin-left: 10px;
         font-size: 14px;
         font-family: Microsoft YaHei;
         font-weight: bold;

+ 8 - 8
src/views/login/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="{'background':backgroundImg ? 'url('+backgroundImg+')' :'url('+defaultBgImg+')'}" class="login-container">
+  <div :style="{'backgroundImage':backgroundImg ? 'url('+backgroundImg+')' :'url('+defaultBgImg+')'}" class="login-container">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
       <div class="title-container flex-wrap">
         <el-avatar :size="36" :src="imgSrc" @error="errorHandler">
@@ -77,15 +77,15 @@ export default {
         'appsecret': PLATFROM_CONFIG.appKeyString
       })
       if (code == 0 && isValue(returnData)) {
-        const { appname, background, logo, securitycoderule, smalllogo, token } = returnData;
-        this.imgSrc = logo
+        const { appname, backgroundimage, applogo, securitycoderule, smalllogo, token } = returnData;
+        this.imgSrc = smalllogo
         this.pageTitle = appname ?? '行李全流程跟踪系统'
         this.isCode = securitycoderule
-        this.backgroundImg = background
+        this.backgroundImg = backgroundimage
         setToken(TokenKey, token);
         sessionStorage.setItem('appConfig', JSON.stringify({ ...returnData }))
         // setToken('active_duration', active_duration);
-        sessionStorage.setItem('appLog', logo)
+        sessionStorage.setItem('appLogo', applogo)
         sessionStorage.setItem('appName', this.pageTitle)
         if (securitycoderule) {
           this.getCheckCode()
@@ -144,7 +144,7 @@ export default {
           this.loginForm.password = ""
           this.loginForm.identify = ""
           this.changeCode()
-          if (res==1) {
+          if (res == 1) {
             this.dialogOpen()
           } else {
             this.userLogin()
@@ -191,7 +191,7 @@ export default {
       const { code, message, returnData } = await getVCode();
       if (code == 0 && isValue(returnData)) {
         const { verifyCodeImage } = returnData;
-        this.loginForm.identify="";
+        this.loginForm.identify = "";
         this.baseImg = verifyCodeImage;
       } else {
         this.$message.error(message);
@@ -220,7 +220,7 @@ $light_gray: #eee;
   overflow: hidden;
   //background-image: url("../../assets/loginpage/bg.jpg");
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: 100% 100%;
   display: flex;
   justify-content: center;
   align-items: center;

+ 8 - 8
src/views/tablePage/index.vue

@@ -17,7 +17,7 @@
     <div class="TablePage_dialog">
       <!--新增/编辑-->
       <PublicPageDialog :dialog-title="tableTitle" dialogSize="630px" :dialog-drawer="flag" @handleClose="submitClickClose('ruleForm')" @handleSubmit="submitClickHandler">
-        <PublicPageForm ref="ruleForm" :label-width="labelWidth" :form-item="formItem" :form-data="tableForm" />
+        <PublicPageForm ref="ruleForm" :label-width="labelWidth" :form-type="tableType" :form-item="formItem" :form-data="tableForm" />
       </PublicPageDialog>
       <!--高级查询-->
       <PublicPageDialog dialog-title="高级查询" dialogSize="600px" :dialog-drawer="advancedDrawer" @handleClose="advancedDrawer = false" @handleSubmit="advancedTable('advancedDialogForm')">
@@ -250,9 +250,9 @@ export default {
       // const tableColumnArrs = pageAuths.filter(item => item['superiorid'] == pageconfigurationid && item['pagetype'] == 'column')
       // this.dialogName = pageroute
       this.flag = true;
-      this.tableType = "add";
-      this.tableTitle = "新增";
-      this.tableForm = {};
+      this.tableType = "add"
+      this.tableTitle = "新增"
+      this.tableForm = {}
       for (let k in this.defaultfilter) {
         if (k != 1) {
           this.tableForm[k] = this.defaultfilter[k]
@@ -265,10 +265,10 @@ export default {
       const { openmode, pageroute } = this.pageAuthBtnEdit
       if (!openmode) return
       if (openmode != 2) this.autoBtnClick(openmode, pageroute)
-      this.flag = true;
-      this.tableType = "edit";
-      this.tableTitle = "编辑";
-      this.tableForm = _.cloneDeep(row);
+      this.flag = true
+      this.tableType = "edit"
+      this.tableTitle = "编辑"
+      this.tableForm = _.cloneDeep(row)
 
     },
     //表格-其他类型按钮操作