szzs/src/views/base/shopManage/components/appletView.vue

<template>
  <div class="page-box">
    <moduleView :propConfig="config" ref="view" v-loading="load" @pagination="pagination" @onRefresh="getList" @resert="queryList" @search="queryList" @clickHandle="clickHandle" @modalHandle="modalHandle" @detail="detail" />
  </div>
</template>

<script setup>
  import { computed,getCurrentInstance,ref, shallowRef  } from "vue";
  const { proxy } = getCurrentInstance();
  import {appList,addApp,updateApp,deleApp} from '@/api/base/shopManage'
  import txt from "./txt.vue";
  import merchant from "./merchant.vue";

  const config = ref({
    attr:{
      calculateH:true
    },
    search:{
      attr:{
        size:'mini'
      },
      columns:[
        [{
          span:8,
          // label:'设备名称',
          labelWidth:16,
          prop:'searchText',
          component:'by-input',
          compConfig:{ 
            attr:{
              placeholder:'请输入小程序名称',
              prefixIcon:'vxe-icon-search'
            }
          }
        }]
      ]
    },
    tool:{
      tools:{
        export:true,
        add:true,
        search:true,
        refresh:true
      }
    },
    table:{
      attr:{
        size:'mini',
        seq:true,
        align:'center',
        // checkbox:true
      },
      columns:[
      {
        isDetail:true,
        title:'小程序名称',
        field:'appName',
      },  
      {
        title:'应用ID',
        field:'appkey',
      },
      {
        title:'所属商户',
        field:'commercialName'
      },
      {
        title:'创建时间',
        field:'createTime'
      }]
    },
    modal:{
      tool:{
        tools:{
          return:true,
          add:true
        }
      },
      form:{
        attr:{
          width:'1000px',
          size:'small',
          labelWidth:'130px',
          rules:{
            appLogo:[
              {required: true, message: '请上传小程序logo', trigger: 'change'}
            ],
            appName:[
              {required: true, message: '请输入小程序名称', trigger: 'blur'}
            ],
            appIntroduce:[
              {required: true, message: '请输入小程序描述', trigger: 'blur'},
            ],
            commercialName:[
              {required: true, message: '请选择商户', trigger: 'change'}
            ],
            callBack:[
              {required: true, message: '请输入回调地址', trigger: 'blur'}
            ]
          }
        },
        columns:[
          [{
            label:'小程序logo',
            prop:'appLogo',
            component:'ByUpload'
          }],
          [{
            label:'小程序名称',
            prop:'appName',
            component:'by-input'
          }],
          [{
            label:'小程序描述',
            prop:'appIntroduce',
            component:'by-input',
            compConfig:{
              attr:{
                type:'textarea'
              }
            }
          }],
          [{
            label:'商户',
            prop:'commercialName',
            component:'by-select',
            compConfig:{
              attr:{
                label:'commercialName',
                value:'commercialId',
                retConfig:{
                  commercialName:'commercialName',
                  commercialId:'commercialId'
                },
                // disabledHandle: item => {
                //   return item.state == 1 ? false : true
                // }
              },
              request:{
                url:'/app/getCommercialList',
                method:'get'
              }
            }
          }],
          [{
            label:'回调地址',
            prop:'callBack',
            component:'by-input',
            compConfig:{
              attr:{
                type:'textarea'
              }
            }
          }],
          [{
            label:'应用ID',
            prop:'appkey',
            component:shallowRef(txt)
          }],
          [{
            label:'应用秘钥',
            prop:'appSecret',
            component:shallowRef(txt)
          }],
          [{
            label:'备注',
            prop:'annotation',
            component:'by-input',
            compConfig:{
              attr:{
                type:'textarea'
              }
            }
          }]
        ]
      }
    }
  })
  const load = ref(false)
  const isSearch = ref(false)
  const timeNum = ref(0);

  const detail = () => {
    config.value.modal.tool.tools.save = true;
    delete config.value.modal.tool.tools.add;
    proxy.$refs.view.initFormTool();
  }

  const clickHandle = n => {
    if(n == 'onAdd'){
      config.value.modal.tool.tools.add = true;
      delete config.value.modal.tool.tools.save;
      proxy.$refs.view.initFormTool();
    }
    if(n == 'onDelete'){
      delHandle()
    }
  }
  const modalHandle = n =>{
    if(n == 'onAdd'){
      proxy.$refs.view.getFormValidate(addData)
    }

    if(n == 'onSave'){
      proxy.$refs.view.getFormValidate(onSave)
    }
  }
  const delHandle = () => {
    let data = proxy.$refs.view.getSelectData();
    let ids = []
    if(!data && data.lenght == 0) {
      proxy.$message('请选择数据')
      return
    }
    for(const item of data) {
      ids.push(item.equipmentId)
    }
    proxy.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      load.value = true;
      deleApp({
        appKeys:appkey,
      }).then(()=>{
        proxy.$message({message:'删除成功！',type:'success'})
        load.value = false;
        getList();
      }).catch(()=>{
        load.value = false;
      })
    }).catch(()=>{})
  }
  //添加
  const addData = () => {
    let value = proxy.$refs.view.getFormValue();
    if(value){
      load.value = true;
      addApp(value).then(res =>{
        load.value = false;
        proxy.$message({
          message:res.msg,
          type:'success'
        });
        proxy.$refs.view.closeModal();
        getList();
      }).catch(()=>{
        load.value = false;
      })
    }
  }
  //保存
  const onSave = () => {
    let data = proxy.$refs.view.getFormValue();
    load.value = true;
    updateApp(data).then(res => {
      proxy.$message({
        message:res.msg,
        type:'success'
      });
      load.value = false;
      proxy.$refs.view.closeModal();
      pagination();
    }).catch(() => {
      load.value = false;
    })
  }
  const pagination = () => {
    if(isSearch.value){
      queryList();
    }else{
      getList()
    }
  }
  //列表请求（包含分页和搜素条件）
  const queryList = () => {
    isSearch.value = true;
    let data = proxy.$refs.view.getQuery();
    requestList(data);
  }
  const getList = () => {
    if(!proxy.$refs.view){
      if(timeNum.value > 5){
        return
      }
      setTimeout(()=>{
        getList()
      },500) 
      timeNum.value ++;
      return
    }
    timeNum.value = 0;
    isSearch.value = false;
    let data = proxy.$refs.view.getPage();
    requestList(data);
  }
  const requestList = data => {
    load.value = true;
    data.pageNum = data.pageNo;
    delete data.pageNo;
    appList(data).then(res => {
      load.value = false;
      proxy.$refs.view.setTableValue(res.data.records);
      let page = {
        pageNo: res.data.current, //当前页
        pageSize: data.pageSize, //每页条数
        total: res.data.total //总条数
      };
      proxy.$refs.view.setPage(page)

    }).catch(()=>{
      load.value = false;
    })
  }
  nextTick(()=>{
    getList()
  })
  const calculateTable = () => {
    nextTick(() => {
      proxy.$refs.view.initTable()
    })
  }
  defineExpose({
    calculateTable
  })
</script>