第三方账号配置

src/views/tourism/thirdParty/detailsBox/thirdPartyDetails.vue

@@ -0,0 +1,404 @@
+<template>
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="70%"
+      append-to-body
+      :close-on-click-modal="false"
+      @close="cancel"
+    >
+      <div class="form-dialog-box"
+      v-loading="loading"
+      :element-loading-text="loadingText"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0)">
+        <div
+          v-loading="loading"
+          :element-loading-text="''"
+          element-loading-spinner="''"
+          element-loading-background="rgba(0, 0, 0, 0.8)"
+          >
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="基本信息：" name="first"></el-tab-pane>
+          </el-tabs>
+          <el-form :model="form" ref="form" :rules="rules" label-width="120px">
+            <div v-show="activeName == 'first'">
+                <el-form-item label="第三方名称：" prop="name">
+                  <span>{{ form.name }}</span>
+                </el-form-item>
+                <el-form-item label="状态：" prop="status">
+                    <span style="display: inline-block;width: 250px;">
+                        <dict-tag :options="dict.type.openapi_account_status" :value="form.status"/>
+                    </span>
+                </el-form-item>
+                <el-form-item label="通知地址：" prop="noticeUrl">
+                    <span>{{ form.noticeUrl }}</span>
+                </el-form-item>
+                <el-form-item label="允许访问API：" prop="apiList">
+                  <span>{{ form.apiList }}</span>
+                </el-form-item>
+                <el-form-item label="来源标签：" prop="sourceLabel">
+                    <span style="display: inline-block;width: 250px;">
+                        <dict-tag :options="dict.type.order_form_type" :value="form.sourceLabel"/>
+                    </span>
+                </el-form-item>
+                <el-form-item label="appId：" prop="appId">
+                  <span>{{ form.appId }}</span>
+                </el-form-item>
+                <el-form-item label="appKey：" prop="appKey">
+                  <span>{{ form.appKey }}</span>
+                </el-form-item>
+                <el-form-item label="AES秘钥：" prop="aesKey">
+                  <span>{{ form.aesKey }}</span>
+                </el-form-item>
+                <el-form-item label="AES加密向量：" prop="aesVector">
+                  <span>{{ form.aesVector }}</span>
+                </el-form-item>
+            </div>
+          </el-form>
+        </div>
+      </div>
+
+      <span slot="footer" class="dialog-footer" v-if="formStatus==1">
+        <el-button @click="cancel">关闭</el-button>
+      </span>
+      <!-- 添加或修改对话框 End -->
+    </el-dialog>
+  </template>
+  
+  <script>
+  import { 
+    getTableDeatilsByIdApi,
+    updateTableApi,
+    addTableApi,
+    listTableApi,
+   } from '@/api/CURD'
+  //import selectMoreBox from '@/myComponents/selectMoreBox.vue';
+  export default {
+    name: "addAndEdit",
+    //components: {selectMoreBox},
+    dicts: ['openapi_account_status','order_form_type'],
+    data() {
+      return {
+        title: "",
+        model: "", // EDIT: 编辑模式 ADD : 新增模式  EDITInit : 编辑模式（需要请求详情）
+        open: false,
+        loading: false,
+        loadingText: "拼命加载数据中...",
+        formStatus: null, // 0/null : 加载中 1 : 获取详情成功 2  : 获取详情失败 
+        status: "1",
+        configUrl: {
+          list: '', // 列表地址
+          add: '/thirdapi/openapiAccount/insertOrUpdate', // 新增地址
+          details: '/thirdapi/openapiAccount/selectById', // 详情地址
+          edit: '/thirdapi/openapiAccount/insertOrUpdate', // 编辑地址
+        },
+        form: {
+          id: undefined,
+        },
+        rules: {
+         
+        },
+  
+        activeName: 'first',
+  
+        actionUrl: process.env.VUE_APP_BASE_API + process.env.VUE_APP_UPLOAD_IMAGE,
+        actionUrlLoading: false,
+  
+        templateIdList: []
+      };
+    },
+    methods: {
+      async initData(title , model,row){
+        this.title = title
+        this.activeName = 'first'
+        this.open = true
+        this.loadingText = "拼命加载数据中..."
+        this.loading = true
+        this.model = model
+        this.formStatus = 0
+        if(model=='ADD') { // 新增
+          this.$set(this,'form',{
+            ...row,
+            //couponVoList: [],
+            //performVoList: [],
+          })
+          this.formStatus = 1
+        }else if(model=='EDIT') { // 新增
+          let obj = {
+            ...row,
+            image: row.image?row.image.split(','):[],
+          }
+          this.$set(this,'form',{
+            memberId: row.id
+          })
+          this.formStatus = 1
+        }else if(model=='EDITInit') { // 新增
+          await this.getTableDeatilsFun(row)
+        }
+        this.loading = false
+        this.$nextTick(()=>{
+          if(this.$refs["form"]) {
+            this.$refs["form"].clearValidate();
+          }
+        })
+      },
+      /** 获取详情 */
+      async getTableDeatilsFun(row) {
+        const id = row.id
+        this.loading = true
+        try {
+          let res = await getTableDeatilsByIdApi(this.configUrl.details,{id})
+          if(res.code == 200) {
+            let obj = {
+              ...res.data,
+              //eventTime: [res.data.startDate,res.data.endDate], // 发放时间段
+              //image: res.data.image?res.data.image.split(','):[],
+            }
+            this.$set(this,'form',JSON.parse(JSON.stringify(obj)))
+            this.formStatus = 1
+          }else {
+            this.$message.error('获取详情失败!!!');
+            this.formStatus = 2
+            this.loading = false
+            this.open = false;
+          }
+          this.loading = false
+        } catch (error) {
+          console.error('获取详情失败!!!!',error)
+          this.formStatus = 2
+          this.loading = false
+          this.open = false;
+        }
+      },
+      
+      /**
+       * 保存
+       * @date 2023-11-22
+       * @returns {any}
+       */
+      submitForm() {
+        this.$refs["form"].validate((valid ,object)=> {
+          if (valid) {
+            this.loadingText = "提交数据中..."
+            this.loading = true
+            let param = JSON.parse(JSON.stringify(this.form))
+            //param['startDate'] = param.eventTime[0]
+            //param['endDate'] = param.eventTime[1]
+  
+            //param['couponIdList'] = this.form.couponVoList.map((item)=> item.id)
+            //param['performIdList'] = this.form.performVoList.map((item)=> item.id)
+  
+            //delete param.eventTime
+            //delete param.couponVoList
+            //delete param.performVoList
+            if (this.model != 'ADD') {
+              addTableApi(
+                this.configUrl.edit,{
+                  ...param,
+                  //image: param.image ? param.image.join(','):'',
+                }).then(response => {
+                this.$modal.msgSuccess("修改成功");
+                this.loading = false
+                this.open = false;
+                this.$emit('refresh')
+              }).catch(()=>{
+                this.$message.error("修改失败!!!");
+                this.loading = false
+              })
+            } else {
+              addTableApi(this.configUrl.edit,{
+                  ...param,
+                  //image: param.image ? param.image.join(','):'',
+                }).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.loading = false
+                this.open = false;
+                this.$emit('refresh')
+              }).catch(()=>{
+                this.$message.error("新增失败!!!");
+                this.loading = false
+              })
+            }
+          }else {
+            console.log("fsdfsd===",valid,object)
+            if(object&&JSON.stringify(object)!='{}') {
+              let srt = ''
+              for(let key in object) {
+                if(object.hasOwnProperty(key)) {
+                  srt = srt + `[${object[key][0].message}],`
+                }
+              }
+              this.$message.error(srt);
+            }
+            
+          }
+        });
+      },
+      /**
+       * 重置
+       * @date 2023-11-22
+       * @returns {any}
+       */
+      reset() {
+        if(this.$refs["form"]) {
+          this.$refs["form"].clearValidate();
+        }
+      },
+      /**
+       * 关闭弹框
+       * @date 2023-11-22
+       * @returns {any}
+       */
+      cancel() {
+        this.reset();
+        this.open = false;
+      },
+      /**  点击tab  */
+      handleClick() {
+  
+      },
+      
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .form-dialog-box {
+    padding: 0 30px;
+    padding: 0 30px;
+    min-height: 50vh;
+    max-height: 65vh;
+    overflow-y: auto;
+    >div {
+      width: 100%;
+      min-height: 50vh;
+    }
+    .form-title {
+      padding: 0 0 10px 0;
+      span {
+        display: flex;
+        color: rgba(65,80,88,1);
+        font-size: 16px;
+        font-family: SourceHanSansSC;
+        font-weight: 700;
+        line-height: 23px;
+        border-left: 4px solid rgb(22, 132, 252);
+        padding-left: 10px;
+      }
+      
+    }
+    ::v-deep .ql-editor {
+      height: 400px;
+    }
+    .upload-btn {
+      width: 100px;
+      height: 100px;
+      background-color: #fbfdff;
+      border: dashed 1px #c0ccda;
+      border-radius: 5px;
+      i {
+        font-size: 30px;
+        margin-top: 20px;
+      }
+      &-text {
+        margin-top: -10px;
+      }
+    }
+    .avatar {
+      cursor: pointer;
+    }
+  }
+  .el-table{
+    .upload-btn {
+      width: 100px;
+      height: 100px;
+      background-color: #fbfdff;
+      border: dashed 1px #c0ccda;
+      border-radius: 5px;
+      i {
+        font-size: 30px;
+        margin-top: 20px;
+      }
+      &-text {
+        margin-top: -10px;
+      }
+    }
+    .avatar {
+      cursor: pointer;
+    }
+  }
+  
+  .area-container {
+    min-height: 400px;
+  }
+  
+  ::v-deep .area-wrap-city.el-cascader {
+    line-height: normal;
+    .el-input {
+      cursor: pointer;
+      width: 100% !important;
+      height: 28px !important;
+      .el-input__inner {
+        display: none !important;
+      }
+      span.el-input__suffix {
+        position: inherit !important;
+        i.el-input__icon {
+          line-height: inherit;
+          margin-left: 5px;
+        }
+      }
+  
+      .el-input__wrapper {
+        box-shadow: none;
+        input {
+          display: none;
+        }
+      }
+    }
+  
+    .el-cascader__tags {
+      display: none;
+    }
+  }
+  
+  .area-city-popper {
+    .el-cascader-panel {
+      .el-scrollbar.el-cascader-menu {
+        .el-cascader-menu__wrap.el-scrollbar__wrap {
+          height: 315px;
+        }
+      }
+    }
+  }
+  
+  ::v-deep .avatar-uploader .el-upload {
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    ::v-deep .avatar-uploader .el-upload:hover {
+      border-color: #409EFF;
+    }
+    ::v-deep .avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 100px;
+      height: 100px;
+      line-height: 100px;
+      text-align: center;
+    }
+    ::v-deep .avatar {
+      width: 100px;
+      height: 100px;
+      display: block;
+    }
+  </style>
+  <style>
+  .custom-class-box {
+    z-index: 999999 !important;
+  }
+  </style>

src/views/tourism/thirdParty/formBox/thirdPartyForm.vue

@@ -0,0 +1,408 @@
+<template>
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="70%"
+      append-to-body
+      :close-on-click-modal="false"
+      @close="cancel"
+    >
+      <div class="form-dialog-box"
+      v-loading="loading"
+      :element-loading-text="loadingText"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0)">
+        <div
+          v-loading="loading"
+          :element-loading-text="''"
+          element-loading-spinner="''"
+          element-loading-background="rgba(0, 0, 0, 0.8)"
+          >
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="基本信息：" name="first"></el-tab-pane>
+          </el-tabs>
+          <el-form :model="form" ref="form" :rules="rules" label-width="120px">
+            <div v-show="activeName == 'first'">
+                <el-form-item label="第三方名称：" prop="name">
+                  <el-input style="width: 350px;" v-model="form.name" placeholder="请输入第三方名称" maxlength="50" show-word-limit />
+                </el-form-item>
+                <el-form-item label="状态：" prop="status">
+                    <el-radio-group v-model="form.status">
+                    <el-radio 
+                        v-for="dict in dict.type.openapi_account_status"
+                        :label="Number(dict.value)"
+                        :key="dict.value"
+                        >{{ dict.label }}</el-radio>
+                    </el-radio-group>
+                    
+                </el-form-item>
+                <el-form-item label="通知地址：" prop="noticeUrl">
+                  <el-input style="width: 350px;" v-model="form.noticeUrl" placeholder="请输入通知地址" maxlength="50" show-word-limit />
+                </el-form-item>
+                <el-form-item label="允许访问API：" prop="apiList">
+                  <el-input style="width: 350px;" type="textarea" v-model="form.apiList" placeholder="请输入允许访问API" maxlength="200" show-word-limit />
+                </el-form-item>
+                <el-form-item label="来源标签：" prop="sourceLabel">
+                    <el-select v-model="form.sourceLabel" clearable placeholder="请选择来源标签">
+                      <el-option
+                          v-for="dict in dict.type.order_form_type"
+                          :key="dict.value"
+                          :label="dict.label"
+                          :value="Number(dict.value)">
+                      </el-option>
+                    </el-select>
+                </el-form-item>
+            </div>
+          </el-form>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer" v-if="formStatus==1">
+        <el-button @click="cancel">取消</el-button>
+        <el-button
+          type="primary"
+          @click="submitForm"
+          :loading="loading"
+          element-loading-text="提交中..."
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)"
+        > 
+          {{ loading ? '提交中...' : '保存' }}
+        </el-button>
+      </span>
+      <!-- 添加或修改对话框 End -->
+    </el-dialog>
+  </template>
+  
+  <script>
+  import { 
+    getTableDeatilsByIdApi,
+    updateTableApi,
+    addTableApi,
+    listTableApi,
+   } from '@/api/CURD'
+  //import selectMoreBox from '@/myComponents/selectMoreBox.vue';
+  export default {
+    name: "addAndEdit",
+    //components: {selectMoreBox},
+    dicts: ['openapi_account_status','order_form_type'],
+    data() {
+      return {
+        title: "",
+        model: "", // EDIT: 编辑模式 ADD : 新增模式  EDITInit : 编辑模式（需要请求详情）
+        open: false,
+        loading: false,
+        loadingText: "拼命加载数据中...",
+        formStatus: null, // 0/null : 加载中 1 : 获取详情成功 2  : 获取详情失败 
+        configUrl: {
+          list: '', // 列表地址
+          add: '/thirdapi/openapiAccount/insertOrUpdate', // 新增地址
+          details: '/thirdapi/openapiAccount/selectById', // 详情地址
+          edit: '/thirdapi/openapiAccount/insertOrUpdate', // 编辑地址
+        },
+        form: {
+          id: undefined,
+        },
+        rules: {
+          name: [{ required: true, message: "请输入第三方名称", trigger: ["change","blur"] }],
+          status: [{ required: true, message: "请选择状态", trigger: ["change","blur"] }],
+          noticeUrl: [{ required: true, message: "请输入通知地址", trigger: ["change","blur"] }],
+          apiList: [{ required: true, message: "请输入允许访问API列表", trigger: ["change","blur"] }],
+          sourceLabel: [{ required: true, message: "请输入来源标签", trigger: ["change","blur"] }],
+        },
+  
+        activeName: 'first',
+  
+        actionUrl: process.env.VUE_APP_BASE_API + process.env.VUE_APP_UPLOAD_IMAGE,
+        actionUrlLoading: false,
+  
+        templateIdList: []
+      };
+    },
+    
+    methods: {
+      async initData(title , model,row){
+        this.title = title
+        this.activeName = 'first'
+        this.open = true
+        this.loadingText = "拼命加载数据中..."
+        this.loading = true
+        this.model = model
+        this.formStatus = 0
+        if(model=='ADD') { // 新增
+          this.$set(this,'form',{
+            ...row,
+            status: 1,
+            //performVoList: [],
+          })
+          this.formStatus = 1
+        }else if(model=='EDIT') { // 新增
+          let obj = {
+            ...row,
+            //image: row.image?row.image.split(','):[],
+          }
+          this.$set(this,'form',{
+            memberId: row.id
+          })
+          this.formStatus = 1
+        }else if(model=='EDITInit') { // 新增
+          await this.getTableDeatilsFun(row)
+        }
+        this.loading = false
+        this.$nextTick(()=>{
+            if(this.$refs["form"]) {
+            this.$refs["form"].clearValidate();
+            }
+        })
+      },
+      /** 获取详情 */
+      async getTableDeatilsFun(row) {
+        const id = row.id
+        this.loading = true
+        try {
+          let res = await getTableDeatilsByIdApi(this.configUrl.details,{id})
+          if(res.code == 200) {
+            let obj = {
+              ...res.data,
+              //status: 1,
+              //eventTime: [res.data.startDate,res.data.endDate], // 发放时间段
+              //image: res.data.image?res.data.image.split(','):[],
+            }
+            this.$set(this,'form',JSON.parse(JSON.stringify(obj)))
+            this.formStatus = 1
+          }else {
+            this.$message.error('获取详情失败!!!');
+            this.formStatus = 2
+            this.loading = false
+            this.open = false;
+          }
+          this.loading = false
+        } catch (error) {
+          console.error('获取详情失败!!!!',error)
+          this.formStatus = 2
+          this.loading = false
+          this.open = false;
+        }
+      },
+      
+      /**
+       * 保存
+       * @date 2023-11-22
+       * @returns {any}
+       */
+      submitForm() {
+        this.$refs["form"].validate((valid ,object)=> {
+          if (valid) {
+            this.loadingText = "提交数据中..."
+            this.loading = true
+            let param = JSON.parse(JSON.stringify(this.form))
+            
+            if (this.model != 'ADD') {
+              addTableApi(
+                this.configUrl.edit,{
+                  ...param,
+                  //image: param.image ? param.image.join(','):'',
+                }).then(response => {
+                this.$modal.msgSuccess("修改成功");
+                this.loading = false
+                this.open = false;
+                this.$emit('refresh')
+              }).catch(()=>{
+                this.$message.error("修改失败!!!");
+                this.loading = false
+              })
+            } else {
+              addTableApi(this.configUrl.edit,{
+                  ...param,
+                  //image: param.image ? param.image.join(','):'',
+                }).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.loading = false
+                this.open = false;
+                this.$emit('refresh')
+              }).catch(()=>{
+                this.$message.error("新增失败!!!");
+                this.loading = false
+              })
+            }
+          }else {
+            console.log("fsdfsd===",valid,object)
+            if(object&&JSON.stringify(object)!='{}') {
+              let srt = ''
+              for(let key in object) {
+                if(object.hasOwnProperty(key)) {
+                  srt = srt + `[${object[key][0].message}],`
+                }
+              }
+              this.$message.error(srt);
+            }
+            
+          }
+        });
+      },
+      /**
+       * 重置
+       * @date 2023-11-22
+       * @returns {any}
+       */
+      reset() {
+        if(this.$refs["form"]) {
+          this.$refs["form"].clearValidate();
+        }
+      },
+      /**
+       * 关闭弹框
+       * @date 2023-11-22
+       * @returns {any}
+       */
+      cancel() {
+        this.reset();
+        this.open = false;
+      },
+      /**  点击tab  */
+      handleClick() {
+  
+      },
+      
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .form-dialog-box {
+    padding: 0 30px;
+    padding: 0 30px;
+    min-height: 50vh;
+    max-height: 65vh;
+    overflow-y: auto;
+    >div {
+      width: 100%;
+      min-height: 50vh;
+    }
+    .form-title {
+      padding: 0 0 10px 0;
+      span {
+        display: flex;
+        color: rgba(65,80,88,1);
+        font-size: 16px;
+        font-family: SourceHanSansSC;
+        font-weight: 700;
+        line-height: 23px;
+        border-left: 4px solid rgb(22, 132, 252);
+        padding-left: 10px;
+      }
+      
+    }
+    ::v-deep .ql-editor {
+      height: 400px;
+    }
+    .upload-btn {
+      width: 100px;
+      height: 100px;
+      background-color: #fbfdff;
+      border: dashed 1px #c0ccda;
+      border-radius: 5px;
+      i {
+        font-size: 30px;
+        margin-top: 20px;
+      }
+      &-text {
+        margin-top: -10px;
+      }
+    }
+    .avatar {
+      cursor: pointer;
+    }
+  }
+  .el-table{
+    .upload-btn {
+      width: 100px;
+      height: 100px;
+      background-color: #fbfdff;
+      border: dashed 1px #c0ccda;
+      border-radius: 5px;
+      i {
+        font-size: 30px;
+        margin-top: 20px;
+      }
+      &-text {
+        margin-top: -10px;
+      }
+    }
+    .avatar {
+      cursor: pointer;
+    }
+  }
+  
+  .area-container {
+    min-height: 400px;
+  }
+  
+  ::v-deep .area-wrap-city.el-cascader {
+    line-height: normal;
+    .el-input {
+      cursor: pointer;
+      width: 100% !important;
+      height: 28px !important;
+      .el-input__inner {
+        display: none !important;
+      }
+      span.el-input__suffix {
+        position: inherit !important;
+        i.el-input__icon {
+          line-height: inherit;
+          margin-left: 5px;
+        }
+      }
+  
+      .el-input__wrapper {
+        box-shadow: none;
+        input {
+          display: none;
+        }
+      }
+    }
+  
+    .el-cascader__tags {
+      display: none;
+    }
+  }
+  
+  .area-city-popper {
+    .el-cascader-panel {
+      .el-scrollbar.el-cascader-menu {
+        .el-cascader-menu__wrap.el-scrollbar__wrap {
+          height: 315px;
+        }
+      }
+    }
+  }
+  
+  ::v-deep .avatar-uploader .el-upload {
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    ::v-deep .avatar-uploader .el-upload:hover {
+      border-color: #409EFF;
+    }
+    ::v-deep .avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 100px;
+      height: 100px;
+      line-height: 100px;
+      text-align: center;
+    }
+    ::v-deep .avatar {
+      width: 100px;
+      height: 100px;
+      display: block;
+    }
+  </style>
+  <style>
+  .custom-class-box {
+    z-index: 999999 !important;
+  }
+  </style>

src/views/tourism/thirdParty/index.vue

@@ -0,0 +1,289 @@
+<template>
+    <div class="app-container">
+      <el-row :gutter="20">
+        <!--用户数据-->
+        <el-col :span="24" :xs="24">
+          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+            <el-form-item label="第三方名称" prop="name" label-width="88px">
+              <el-input
+                v-model="queryParams.name"
+                placeholder="请输入第三方名称"
+                clearable
+                style="width: 240px"
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+  
+          <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+              <el-button
+                type="primary"
+                plain
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleAdd"
+                v-hasPermi="configPermi.add"
+              >新增</el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+          </el-row>
+  
+          <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
+            <el-table-column type="index" label="序号" align="center"  />
+            <el-table-column label="第三方名称" align="center" key="name" prop="name" v-if="columns[0].visible" :show-overflow-tooltip="true" />
+            <el-table-column label="appId" align="center" key="appId" prop="appId" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+            <el-table-column label="appKey" align="center" key="appKey" prop="appKey" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+            <el-table-column label="AES秘钥" align="center" key="aesKey" prop="aesKey" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+            <el-table-column label="AES加密向量" align="center" key="aesVector" prop="aesVector" v-if="columns[4].visible" :show-overflow-tooltip="true" />
+            <el-table-column label="通知地址" align="center" key="noticeUrl" prop="noticeUrl" v-if="columns[5].visible" :show-overflow-tooltip="true" />
+            <el-table-column label="来源标签" align="center" key="sourceLabel" prop="sourceLabel" v-if="columns[6].visible">
+              <template slot-scope="scope">
+                <dict-tag :options="dict.type.order_form_type" :value="scope.row.sourceLabel"/>
+              </template>
+            </el-table-column>
+            <el-table-column label="禁用/启用" align="center" key="status" v-if="columns[7].visible">
+              <template slot-scope="scope">
+                <switchBox 
+                :defaultChecked="true" 
+                v-model="scope.row.status" 
+                @changeFun="openAttraction(scope.row)" 
+                :disabled="false"
+                :active-value="1"
+                :inactive-value="0"
+                 />
+              </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="center" key="createTime" prop="createTime" v-if="columns[8].visible" :show-overflow-tooltip="true" />
+            <el-table-column
+              label="操作"
+              align="center"
+              width="160"
+              class-name="small-padding fixed-width"
+            >
+              <template slot-scope="scope" >
+                <!--<el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleDelete(scope.row)"
+                  v-hasPermi="configPermi.delect"
+                >删除</el-button>-->
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleUpdate(scope.row)"
+                  v-hasPermi="configPermi.edit"
+                >修改</el-button>
+                
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-document"
+                  @click="handleDetails(scope.row)"
+                  v-hasPermi="configPermi.details"
+                >详情</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+  
+          <pagination
+            v-show="total>0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
+          />
+        </el-col>
+      </el-row>
+      <!--  详情 -->
+      <detailsBox ref="detailsBox" />
+      <addAndEdit ref="addAndEdit" @refresh="getList" />
+      
+    </div>
+  </template>
+
+<script>
+import { 
+    listTableApi, 
+    delTableParamsApi,
+    addTableApi
+  } from "@/api/CURD";
+  import detailsBox from "./detailsBox/thirdPartyDetails.vue"
+  import addAndEdit from "./formBox/thirdPartyForm.vue" 
+
+ export default {
+   name: "User",
+   components: {detailsBox,addAndEdit},
+   dicts: ['openapi_account_status','order_form_type'],
+   data() {
+      return {
+        title: "第三方账号管理",// 通用标题 ThirdParty
+        configPermi: {
+          add: ['tourism:thirdParty:add'], // 新增权限
+          details: ['tourism:thirdParty:details'], // 详情权限
+          delect: ['tourism:thirdParty:delect'], // 删除权限
+          edit: ['tourism:thirdParty:edit'], // 编辑权限
+          upload: [''],// 导入权限
+          export: [''],// 导出权限
+        },
+        configUrl: {
+          list: '/thirdapi/openapiAccount/pageList', // 列表地址
+          delect: '', // 删除地址
+          upload: '',// 导入地址
+          download:'', // 下载模板地址
+          export: '',// 导出地址
+          updateStatus: '/thirdapi/openapiAccount/insertOrUpdate', // 编辑地址
+        },
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 用户表格数据
+        tableList: null,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+        },
+        dateRange: [],
+        // 控制列表是否显示
+        columns: [
+          { key: 0, label: `第三方名称`, visible: true },
+          { key: 1, label: `appId`, visible: true },
+          { key: 2, label: `appKey`, visible: true },
+          { key: 3, label: `AES秘钥`, visible: true },
+          { key: 4, label: `AES加密向量`, visible: true },
+          { key: 5, label: `通知地址`, visible: true },
+          { key: 6, label: `来源标签`, visible: true },
+          { key: 7, label: `状态`, visible: true },
+          { key: 2.5, label: `创建时间`, visible: true },
+        ],
+      };
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      /** 查询用户列表 */
+      getList() {
+        this.loading = true;
+        listTableApi(
+          this.configUrl.list,
+          this.addDateRange(
+            this.queryParams, 
+            this.dateRange)).then(response => {
+              this.tableList = response.data.rows;
+              this.total = response.data.total;
+              this.loading = false;
+          }
+        ).catch (error=>{
+          console.error('获取列表失败!!!!',error)
+          this.tableList = [];
+          this.total = 0;
+          this.loading = false
+        }) 
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.dateRange = [];
+        this.queryParams = {
+          pageNum: 1,
+          pageSize: 10,
+        }
+        this.handleQuery();
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        if(this.$refs.addAndEdit) {
+          this.$refs.addAndEdit.initData(this.title + '新增', "ADD",{})
+        }
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.id);
+        this.single = selection.length != 1;
+        this.multiple = !selection.length;
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        if(this.$refs.addAndEdit) {
+          this.$refs.addAndEdit.initData(this.title + '编辑', "EDITInit",{...row})
+        }
+      },
+      handleDetails(row){
+        if(this.$refs.detailsBox) {
+          this.$refs.detailsBox.initData(this.title + '详情', "EDITInit",{...row})
+        }
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const ids = row.id || this.ids;
+        this.$modal.confirm('是否确认删除数据项？').then( () => {
+          return delTableParamsApi(this.configUrl.delect,{
+            id: ids
+          });
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch((e) => {
+          console.error("删除失败====",e)
+        });
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        this.download(this.configUrl.export, {
+          ...this.queryParams
+        }, `${this.title }_${new Date().getTime()}.xlsx`)
+      },
+      /** 导入按钮操作 */
+      handleImport() {
+        if(this.$refs.upload) {
+          this.$refs.upload.initData({
+            width: '400px',
+            // 弹出层标题（用户导入）
+            title: this.title + "导入",
+            // 下载模板地址
+            importTemplate: this.configUrl.download,
+            // 上传的地址
+            url: this.configUrl.upload
+          })
+        }
+      },
+      /** 开/闭  */
+      openAttraction(row) {
+        this.$modal.confirm(`是否确认${row.status == 1 ? '禁用' : '启用'} ${row.realName||''}吗？`).then( () => {
+          return addTableApi(this.configUrl.updateStatus,{
+            id: row.id,
+            status: row.status == 1 ? 0 : 1
+          });
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess(`${row.status == 1 ? '禁用' : '启用'}成功`);
+        }).catch((e) => {
+          console.error("失败====",e)
+        });
+      }
+    }
+ };
+</script>
+
+