红德堂-总后台新增小程序配置新增授权文件上传

.env.development

@@ -51,3 +51,6 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true
 VUE_APP_PATIENT_INFO = '客户信息'
 # 添加病人
 VUE_APP_ADD_PATIENT = '添加信息'
+
+# 认证文件上传域名地址
+VUE_APP_AUTH_TXT_UTL = "http://127.0.0.1:8113"

.env.prod-hdt

@@ -46,3 +46,6 @@ VUE_APP_LIVE_WS_URL = ws://live.hbhdt.top/ws
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
+
+# 认证文件上传域名地址
+VUE_APP_AUTH_TXT_UTL = "https://userapp.hbhdt.top"

src/views/course/coursePlaySourceConfig/index.vue

@@ -147,6 +147,12 @@
       <el-table-column label="token" align="center" prop="token" />
       <el-table-column label="aesKey" align="center" prop="aesKey" />
       <el-table-column label="msgDataFormat" align="center" prop="msgDataFormat" />
+      <el-table-column label="认证文件" align="center" prop="authTxtUrl" width="120px">
+        <template slot-scope="scope">
+          <span v-if="scope.row.authTxtUrl">{{ getFileNameFromUrl(scope.row.authTxtUrl) }}</span>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
       <el-table-column label="类型" align="center" prop="type">
         <template slot-scope="scope">
           <dict-tag  :options="typesOptions" :value="scope.row.type"/>
@@ -338,6 +344,29 @@
         <el-form-item label="msgDataFormat" prop="msgDataFormat">
           <el-input v-model="form.msgDataFormat" placeholder="请输入msgDataFormat" />
         </el-form-item>
+        <el-form-item label="认证文件" prop="authTxtUrl">
+          <el-upload
+            v-if="txtFileList.length === 0"
+            class="upload-txt"
+            drag
+            :action="uploadTxtUrl"
+            :limit="1"
+            :file-list="txtFileList"
+            :on-success="handleTxtUploadSuccess"
+            :on-remove="handleTxtRemove"
+            :on-exceed="handleTxtExceed"
+            :before-upload="beforeTxtUpload"
+            accept=".txt"
+          >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            <div class="el-upload__tip" slot="tip">只能上传txt文件</div>
+          </el-upload>
+          <div v-else class="uploaded-file">
+            <span>{{ getFileNameFromUrl(form.authTxtUrl) }}</span>
+            <el-button type="text" icon="el-icon-delete" @click="handleTxtRemove()">删除</el-button>
+          </div>
+        </el-form-item>
 
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -516,8 +545,10 @@ export default {
       title: null,
       open: false,
       form: {
-        setCompanyIdList: []
+        setCompanyIdList: [],
+        authTxtUrl: null
       },
+      txtFileList: [],
       bindRules:{
         merchantType: [
           { required: true, message: "商户类型不能为空", trigger: "blur" }
@@ -560,6 +591,11 @@ export default {
       }
     }
   },
+  computed: {
+    uploadTxtUrl() {
+      return process.env.VUE_APP_AUTH_TXT_UTL + '/app/common/uploadTxt'
+    }
+  },
   created() {
     this.getDicts("sys_pay_mode").then(response => {
       this.sysPayModes = response.data;
@@ -579,6 +615,34 @@ export default {
   },
   methods: {
     resetForm,
+    // txt文件上传成功回调
+    handleTxtUploadSuccess(response, file, fileList) {
+      if (response.code === 200) {
+        this.form.authTxtUrl = response.data
+        this.txtFileList = fileList
+        this.msgSuccess('上传成功')
+      } else {
+        this.msgError('上传失败：' + response.msg)
+        this.txtFileList = []
+      }
+    },
+    // txt文件移除回调
+    handleTxtRemove(file, fileList) {
+      this.form.authTxtUrl = null
+      this.txtFileList = fileList || []
+    },
+    // txt上传前校验
+    beforeTxtUpload(file) {
+      const isTxt = file.type === 'text/plain' || file.name.endsWith('.txt')
+      if (!isTxt) {
+        this.msgError('只能上传txt文件!')
+      }
+      return isTxt
+    },
+    // 超出文件数量限制
+    handleTxtExceed(files, fileList) {
+      this.$message.warning('只能上传1个txt文件')
+    },
     resetOption(){
       console.log(1)
       this.companyOptions = [];
@@ -817,7 +881,8 @@ export default {
       get(id).then(response => {
         this.form = {
           ...response.data,
-          type: response.data.type.toString()
+          type: response.data.type.toString(),
+          authTxtUrl: response.data.authTxtUrl || null
         }
         if(!!this.form.setCompanyIds){
            this.$set(
@@ -825,14 +890,24 @@ export default {
             "setCompanyIdList",
             this.form.setCompanyIds.split(",").map(str => parseInt(str, 10))
           );
-          // this.form.setCompanyIdList = this.form.setCompanyIds.split(",").map(str => parseInt(str, 10));
         }
-        console.log( this.form);
+        // 回显txt文件
+        if (this.form.authTxtUrl) {
+          this.txtFileList = [{ name: this.getFileNameFromUrl(this.form.authTxtUrl), url: this.form.authTxtUrl }]
+        } else {
+          this.txtFileList = []
+        }
         this.searchCompanies("");
         this.open = true
         this.title = "修改小程序配置"
       })
     },
+    // 从URL中提取文件名
+    getFileNameFromUrl(url) {
+      if (!url) return '认证文件.txt'
+      const parts = url.split('/')
+      return parts[parts.length - 1] || '认证文件.txt'
+    },
     handleDelete(row) {
       const id = row.id || this.ids
       this.$confirm('是否确认删除小程序配置编号为"' + id + '"的数据项?', "警告", {
@@ -903,10 +978,12 @@ export default {
         aesKey: 'HlEiBB55eaWUaeBVAQO3cWKWPYv1vOVQSq7nFNICw4E',
         msgDataFormat: 'JSON',
         type: '1',
-        status: 0
+        status: 0,
+        authTxtUrl: null
       }
+      this.txtFileList = []
       this.resetForm("form");
-          },
+    },
     getStatusLabel(status) {
       const statusMap = {
         0: '正常',
@@ -920,5 +997,11 @@ export default {
 </script>
 
 <style scoped>
-
+.uploaded-file {
+  display: flex;
+  align-items: center;
+}
+.uploaded-file span {
+  margin-right: 20px;
+}
 </style>