更换组合式API写法

2022-06-13 12:31:18 +08:00 · 2022-06-13 12:31:18 +08:00 · 6b505312d9
commit 6b505312d9
parent 4035eaee47
6 changed files with 525 additions and 561 deletions
--- a/src/views/dashboard/BarChart.vue
+++ b/src/views/dashboard/BarChart.vue
@ -1,101 +1,90 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
 </template>

-<script>
-import * as echarts from 'echarts';
-// import resize from './mixins/resize'
-
+<script setup>
+import * as echarts from 'echarts'
+let chart = null
+const { proxy } = getCurrentInstance()
 const animationDuration = 6000
-
-export default {
-  // mixins: [resize],
-  props: {
+const props = defineProps({
  className: {
    type: String,
-      default: 'chart'
+    default: 'chart',
  },
  width: {
    type: String,
-      default: '100%'
+    default: '100%',
  },
  height: {
    type: String,
-      default: '300px'
-    }
+    default: '300px',
  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el)
+})
+function initChart() {
+  chart = echarts.init(proxy.$refs.chartRef, 'macarons')

-      this.chart.setOption({
+  chart.setOption({
    tooltip: {
      trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+      },
    },
    grid: {
      top: 10,
      left: '2%',
      right: '2%',
      bottom: '3%',
-          containLabel: true
+      containLabel: true,
    },
-        xAxis: [{
+    xAxis: [
+      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
-            alignWithLabel: true
-          }
-        }],
-        yAxis: [{
+          alignWithLabel: true,
+        },
+      },
+    ],
+    yAxis: [
+      {
        type: 'value',
        axisTick: {
-            show: false
-          }
-        }],
-        series: [{
+          show: false,
+        },
+      },
+    ],
+    series: [
+      {
        name: 'pageA',
        type: 'bar',
        stack: 'vistors',
        barWidth: '60%',
        data: [79, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }, {
+        animationDuration,
+      },
+      {
        name: 'pageB',
        type: 'bar',
        stack: 'vistors',
        barWidth: '60%',
        data: [80, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }, {
+        animationDuration,
+      },
+      {
        name: 'pageC',
        type: 'bar',
        stack: 'vistors',
        barWidth: '60%',
        data: [30, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }]
+        animationDuration,
+      },
+    ],
  })
-    }
-  }
 }
+onMounted(() => {
+  initChart()
+})
 </script>
--- a/src/views/dashboard/LineChart.vue
+++ b/src/views/dashboard/LineChart.vue
@ -1,14 +1,12 @@
 <template>
-  <div :class="className" :style="{ height: height, width: width }" />
+  <div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
 </template>

-<script>
+<script setup>
 import * as echarts from 'echarts'
-// import resize from './mixins/resize'
-
-export default {
-  // mixins: [resize],
-  props: {
+const { proxy } = getCurrentInstance()
+const chartRef = ref(null)
+const props = defineProps({
  className: {
    type: String,
    default: 'chart',
@ -29,39 +27,18 @@ export default {
    type: Object,
    required: true,
  },
+})
+let chart = null
+watch(
+  () => props.chartData,
+  (val) => {
+    setOptions(val)
  },
-  data() {
-    return {
-      chart: null,
-    }
-  },
-  watch: {
-    chartData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-      },
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el)
-      this.setOptions(this.chartData)
-    },
-    setOptions({ expectedData, actualData } = {}) {
-      this.chart.setOption({
+  { deep: true },
+)
+
+function setOptions({ expectedData, actualData } = {}) {
+  chart.setOption({
    xAxis: {
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      boundaryGap: false,
@ -127,7 +104,15 @@ export default {
      },
    ],
  })
-    },
-  },
+}
+function initChart() {
+  chart = echarts.init(proxy.$refs.chartRef, 'macarons')
+  setOptions(props.chartData)
+}
+onMounted(() => {
+  initChart()
+})
+window.onresize = function () {
+  chart.resize()
 }
 </script>
--- a/src/views/dashboard/PieChart.vue
+++ b/src/views/dashboard/PieChart.vue
@ -1,57 +1,38 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
 </template>

-<script>
-import * as echarts from 'echarts';
-// import resize from './mixins/resize'
-
-export default {
-  // mixins: [resize],
-  props: {
+<script setup>
+import * as echarts from 'echarts'
+const { proxy } = getCurrentInstance()
+let chart = null
+const props = defineProps({
  className: {
    type: String,
-      default: 'chart'
+    default: 'chart',
  },
  width: {
    type: String,
-      default: '100%'
+    default: '100%',
  },
  height: {
    type: String,
-      default: '300px'
-    }
+    default: '300px',
  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el)
+})

-      this.chart.setOption({
+function initChart() {
+  chart = echarts.init(proxy.$refs.chartRef)
+
+  chart.setOption({
    tooltip: {
      trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
+      formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
      left: 'center',
      bottom: '10',
-          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+      data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'],
    },
    series: [
      {
@ -65,14 +46,15 @@ export default {
          { value: 240, name: 'Technology' },
          { value: 149, name: 'Forex' },
          { value: 100, name: 'Gold' },
-              { value: 59, name: 'Forecasts' }
+          { value: 59, name: 'Forecasts' },
        ],
        animationEasing: 'cubicInOut',
-            animationDuration: 2600
-          }
-        ]
+        animationDuration: 2600,
+      },
+    ],
  })
-    }
-  }
 }
+onMounted(() => {
+  initChart()
+})
 </script>
--- a/src/views/dashboard/RaddarChart.vue
+++ b/src/views/dashboard/RaddarChart.vue
@ -4,7 +4,6 @@

 <script>
 import * as echarts from 'echarts'
-// import resize from './mixins/resize'

 const animationDuration = 3000

--- a/src/views/monitor/logininfor/index.vue
+++ b/src/views/monitor/logininfor/index.vue
@ -8,12 +8,18 @@
        <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="登录状态" clearable  >
+        <el-select v-model="queryParams.status" placeholder="登录状态" clearable>
          <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="登录时间">
-        <el-date-picker v-model="dateRange"  style="width: 240px" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+        <el-date-picker
+          v-model="dateRange"
+          style="width: 240px"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
@ -23,7 +29,9 @@

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
-        <el-button type="danger" plain icon="delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:logininfor:remove']">删除</el-button>
+        <el-button type="danger" plain icon="delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:logininfor:remove']"
+          >删除</el-button
+        >
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="delete" @click="handleClean" v-hasPermi="['monitor:logininfor:remove']">清空</el-button>
@ -43,7 +51,7 @@
      <el-table-column label="浏览器" align="center" prop="browser" />
      <el-table-column label="操作系统" align="center" prop="os" />
      <el-table-column label="操作状态" align="center" prop="status">
-        <template #default="{row}">
+        <template #default="{ row }">
          <dict-tag :options="statusOptions" :value="row.status"></dict-tag>
        </template>
      </el-table-column>
@ -55,142 +63,124 @@
      </el-table-column>
    </el-table>

-    <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
  </div>
 </template>

-<script>
-import {
-  list,
-  delLogininfor,
-  cleanLogininfor,
-  exportLogininfor,
-} from "@/api/monitor/logininfor";
+<script setup name="logininfor">
+import { list as queryList, delLogininfor, cleanLogininfor, exportLogininfor } from '@/api/monitor/logininfor'

-export default {
-  name: "logininfor",
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 表格数据
-      list: [],
-      // 状态数据字典
-      statusOptions: [],
-      // 日期范围
-      dateRange: [],
-      // 查询参数
-      queryParams: {
+// 遮罩层
+const loading = ref(true)
+// 选中数组
+const ids = ref([])
+// 非多个禁用
+const multiple = ref(true)
+// 显示搜索条件
+const showSearch = ref(true)
+// 总条数
+const total = ref(0)
+// 表格数据
+const list = ref([])
+// 状态数据字典
+const statusOptions = ref([])
+// 日期范围
+const dateRange = ref([])
+// 查询参数
+const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  ipaddr: undefined,
  userName: undefined,
  status: undefined,
-      },
-    };
-  },
-  created() {
-    this.getList();
-    this.getDicts("sys_common_status").then((response) => {
-      this.statusOptions = response.data;
-    });
-  },
-  methods: {
-    /** 查询登录日志列表 */
-    getList() {
-      this.loading = true;
-      list(this.addDateRange(this.queryParams, this.dateRange)).then(
-        (response) => {
-          this.loading = false;
+})
+
+const { proxy } = getCurrentInstance()
+/** 查询登录日志列表 */
+function getList() {
+  loading.value = true
+  queryList(proxy.addDateRange(queryParams, dateRange.value)).then((response) => {
+    loading.value = false
    if (response.code == 200) {
-            this.list = response.data.result;
-            this.total = response.data.totalNum;
+      list.value = response.data.result
+      total.value = response.data.totalNum
    } else {
-            this.total = 0;
-            this.list = [];
+      total.value = 0
+      list.value = []
    }
-        }
-      );
-    },
-    // 登录状态字典翻译
-    statusFormat(row, column) {
-      return this.selectDictLabel(this.statusOptions, row.status);
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = [];
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.infoId);
-      this.multiple = !selection.length;
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const infoIds = row.infoId || this.ids;
-      this.$confirm(
-        '是否确认删除访问编号为"' + infoIds + '"的数据项?',
-        "警告",
-        {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        }
-      )
+  })
+}
+// 登录状态字典翻译
+function statusFormat(row, column) {
+  return proxy.selectDictLabel(statusOptions.value, row.status)
+}
+getList()
+proxy.getDicts('sys_common_status').then((response) => {
+  statusOptions.value = response.data
+})
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNum = 1
+  getList()
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = []
+  proxy.resetForm('queryForm')
+  handleQuery()
+}
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.infoId)
+  multiple.value = !selection.length
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const infoIds = row.infoId || ids.value
+  proxy
+    .$confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
    .then(function () {
-          return delLogininfor(infoIds);
+      return delLogininfor(infoIds)
    })
    .then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        });
-    },
-    /** 清空按钮操作 */
-    handleClean() {
-      this.$confirm("是否确认清空所有登录日志数据项?", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+      getList()
+      proxy.$modal.msgSuccess('删除成功')
+    })
+}
+/** 清空按钮操作 */
+function handleClean() {
+  proxy
+    .$confirm('是否确认清空所有登录日志数据项?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
    })
    .then(function () {
-          return cleanLogininfor();
+      return cleanLogininfor()
    })
    .then(() => {
-          this.getList();
-          this.$modal.msgSuccess("清空成功");
-        });
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams;
-      this.$confirm("是否确认导出所有操作日志数据项?", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+      getList()
+      proxy.$modal.msgSuccess('清空成功')
+    })
+}
+/** 导出按钮操作 */
+function handleExport() {
+  proxy
+    .$confirm('是否确认导出所有操作日志数据项?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
    })
    .then(function () {
-          return exportLogininfor(queryParams);
+      return exportLogininfor(queryParams)
    })
    .then((response) => {
-          this.download(response.data.path);
-        });
-    },
-  },
-};
+      proxy.download(response.data.path)
+    })
+}
 </script>
-
--- a/src/views/monitor/operlog/index.vue
+++ b/src/views/monitor/operlog/index.vue
@ -90,7 +90,7 @@

    <!-- 操作日志详细 -->
    <el-dialog title="操作日志详细" v-model="open" width="700px" append-to-body>
-      <el-form ref="form" :model="form" label-width="100px">
+      <el-form ref="formRef" :model="form" label-width="100px">
        <el-row>
          <el-col :lg="12">
            <el-form-item label="操作模块：">{{ form.title }} </el-form-item>
@ -136,36 +136,33 @@
  </div>
 </template>

-<script>
-import { list, delOperlog, cleanOperlog, exportOperlog } from '@/api/monitor/operlog'
+<script setup name="operlog">
+import { list as listOperLog, delOperlog, cleanOperlog, exportOperlog } from '@/api/monitor/operlog'

-export default {
-  name: 'operlog',
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 表格数据
-      list: [],
-      // 是否显示弹出层
-      open: false,
-      // 类型数据字典
-      statusOptions: [],
-      // 业务类型（0其它 1新增 2修改 3删除）选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
-      businessTypeOptions: [],
-      // 日期范围
-      dateRange: [],
-      // 表单参数
+const { proxy } = getCurrentInstance()
+// 遮罩层
+const loading = ref(true)
+// 选中数组
+const ids = ref([])
+// 非多个禁用
+const multiple = ref(true)
+// 显示搜索条件
+const showSearch = ref(true)
+// 总条数
+const total = ref(0)
+// 表格数据
+const list = ref([])
+// 是否显示弹出层
+const open = ref(false)
+// 类型数据字典
+const statusOptions = ref([])
+// 业务类型（0其它 1新增 2修改 3删除）选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
+const businessTypeOptions = ref([])
+// 日期范围
+const dateRange = ref([])
+
+const state = reactive({
  form: {},
-      // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 20,
@ -174,64 +171,85 @@ export default {
    businessType: undefined,
    status: undefined,
  },
-    }
-  },
-  created() {
-    this.getList()
-    var dictParams = [
+})
+const { form, queryParams } = toRefs(state)
+var dictParams = [
  { dictType: 'sys_oper_type', columnName: 'businessTypeOptions' },
  { dictType: 'sys_common_status', columnName: 'statusOptions' },
-    ]
-    this.getDicts(dictParams).then((response) => {
+]
+proxy.getDicts(dictParams).then((response) => {
  response.data.forEach((element) => {
-        this[element.columnName] = element.list
+    proxy[element.columnName] = element.list
  })
-    })
-  },
-  methods: {
-    /** 查询登录日志 */
-    getList() {
-      this.loading = true
-      list(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
-        this.loading = false
+})
+/** 查询登录日志 */
+function getList() {
+  loading.value = true
+  listOperLog(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
+    loading.value = false
    if (response.code == 200) {
-          this.list = response.data.result
-          this.total = response.data.totalNum
+      list.value = response.data.result
+      total.value = response.data.totalNum
    } else {
-          this.total = 0
-          this.list = []
+      total.value = 0
+      list.value = []
    }
  })
-    },
-    // 操作日志状态字典翻译
-    statusFormat(row, column) {
-      return this.selectDictLabel(this.statusOptions, row.status)
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1
-      this.getList()
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = []
-      this.resetForm('queryForm')
-      this.handleQuery()
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.operId)
-      this.multiple = !selection.length
-    },
-    /** 详细按钮操作 */
-    handleView(row) {
-      this.open = true
-      this.form = row
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const operIds = row.operId || this.ids
-      this.$confirm('是否确认删除日志编号为"' + operIds + '"的数据项?', '警告', {
+}
+// 操作日志状态字典翻译
+function statusFormat(row, column) {
+  return proxy.selectDictLabel(statusOptions.value, row.status)
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = []
+  proxy.resetForm('queryForm')
+  handleQuery()
+}
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.operId)
+  multiple.value = !selection.length
+}
+const formRef = ref()
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    operId: undefined,
+    title: undefined,
+    businessType: undefined,
+    method: undefined,
+    requestMethod: undefined,
+    operatorType: undefined,
+    deptName: undefined,
+    operUrl: undefined,
+    operIp: undefined,
+    operLocation: undefined,
+    operParam: undefined,
+    jsonResult: undefined,
+    status: 0,
+    errorMsg: undefined,
+    operTime: undefined,
+    elapsed: 0,
+  }
+  proxy.resetForm('formRef')
+}
+/** 详细按钮操作 */
+function handleView(row) {
+  reset()
+  open.value = true
+  form.value = row
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const operIds = row.operId || ids.value
+  proxy
+    .$confirm('是否确认删除日志编号为"' + operIds + '"的数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
@ -240,13 +258,14 @@ export default {
      return delOperlog(operIds)
    })
    .then(() => {
-          this.getList()
-          this.$modal.msgSuccess('删除成功')
+      getList()
+      proxy.$modal.msgSuccess('删除成功')
    })
-    },
-    /** 清空按钮操作 */
-    handleClean() {
-      this.$confirm('是否确认清空所有操作日志数据项?', '警告', {
+}
+/** 清空按钮操作 */
+function handleClean() {
+  proxy
+    .$confirm('是否确认清空所有操作日志数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
@ -255,29 +274,29 @@ export default {
      return cleanOperlog()
    })
    .then(() => {
-          this.getList()
-          this.$modal.msgSuccess('清空成功')
+      getList()
+      proxy.$modal.msgSuccess('清空成功')
    })
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams
-      this.$confirm('是否确认导出所有操作日志?', '警告', {
+}
+/** 导出按钮操作 */
+function handleExport() {
+  proxy
+    .$confirm('是否确认导出所有操作日志?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
-      }).then(() => {
-        exportOperlog(queryParams).then((response) => {
+    })
+    .then(() => {
+      exportOperlog(queryParams.value).then((response) => {
        const { code, data } = response
        if (code == 200) {
-            this.$modal.msgSuccess('导出成功')
-            this.download(data.path)
+          proxy.$modal.msgSuccess('导出成功')
+          proxy.download(data.path)
        } else {
-            this.$modal.msgError('导出失败')
+          proxy.$modal.msgError('导出失败')
        }
      })
    })
-    },
-  },
 }
+handleQuery()
 </script>