09111730

src/views/system/CodeDataRuleTemplate/TenantAuditStepModal.vue

@@ -3,14 +3,20 @@
     v-bind="$attrs"
     :use-wrapper="true"
     :title="getTitle"
-    width="80%"
+    :width="670"
     @register="registerModal"
     @ok="handleSave"
   >
     <!-- 费用模版表单 -->
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm" @linkageForm="ChangeColumnView" />
     <!-- 费用字段表格 -->
-    <FeeField ref="feeField"></FeeField>
+    <columnView
+      ref="RefcolumnView"
+      title=""
+      :IsApi="false"
+      :schemas="ColumnViewschemas"
+      v-show="columnViewType"
+    ></columnView>
     <!--右下角按钮-->
     <template #footer>
       <a-button
@@ -48,7 +54,7 @@
   // 弹窗组件
   import { BasicModal, useModalInner } from '/@/components/Modal'
   import { BasicForm, useForm } from '/@/components/Form/index'
-  import FeeField from './feeField.vue'
+  import columnView from './columnView.vue'
   // 字段数据
   import { formSchema } from './columns'
   // 相关接口
@@ -66,6 +72,9 @@
   // 按钮loading
   const loading = ref(false)
   const rowId = ref('')
+  const ColumnViewschemas = ref<any>([])
+  const RefcolumnView = ref()
+  const columnViewType = ref(false)
   const { createMessage } = useMessage()
   const [registerForm, { resetFields, setFieldsValue, getFieldsValue, validate, updateSchema }] =
     useForm({
@@ -73,6 +82,19 @@
       schemas: formSchema,
       showActionButtonGroup: false,
     })
+  function ChangeColumnView(data) {
+    columnViewType.value = false
+    ColumnViewschemas.value.splice(0)
+    data.forEach((item) => {
+      ColumnViewschemas.value.push({
+        field: item.dbColumnName,
+        label: item.columnDescription,
+      })
+    })
+    console.log(ColumnViewschemas.value)
+
+    columnViewType.value = true
+  }
   const [registerModal, { setModalProps, closeModal, updateFormField }] = useModalInner(
     async (data) => {
       resetFields()
@@ -86,8 +108,8 @@
           setFieldsValue({
             ...res.data,
           })
-          feeField.value.SetData(res.data.details)
-          feeField.value.condition = res.data.condition
+          // feeField.value.SetData(res.data.details)
+          RefcolumnView.value.condition = JSON.parse(res.data.dataRules)
           detailId.value = res.data.id
         }
       } else {
@@ -96,21 +118,22 @@
           customerName: props.customerName,
           customerId: props.customerId,
         })
-        feeField.value.SetData([])
-        feeField.value.condition = ''
+        // feeField.value.SetData([])
+        // feeField.value.condition = ''
       }
+      RefcolumnView.value.init(null)
       setModalProps({ loading: false })
     },
   )
-  const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'))
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增数据权限' : '编辑数据权限'))
   // 费用表格
-  const feeField = ref()
+  // const feeField = ref()
   async function handleSave(exit) {
     try {
       const values = await validate()
-      const feeList = feeField.value.validate()
-      values['details'] = feeList
-      values['condition'] = feeField.value.condition
+      // const feeList = feeField.value.validate()
+      // values['details'] = feeList
+      values['dataRules'] = JSON.stringify(RefcolumnView.value.queryData)
       loading.value = true
       setModalProps({ confirmLoading: true, loading: true })
       const res: API.DataResult = await ApiEdit(values)

src/views/system/CodeDataRuleTemplate/api.ts

@@ -2,10 +2,11 @@
 import { request } from '/@/utils/request'
 import { DataResult, PageRequest } from '/@/api/model/baseModel'
 enum Api {
-  list = '/feeApi/FeeCustTemplate/GetList',
-  edit = '/feeApi/FeeCustTemplate/Edit',
-  info = '/feeApi/FeeCustTemplate/Edit',
-  delete = '/feeApi/FeeCustTemplate/Delete',
+  list = '/mainApi/CodeDataRuleTemplate/GetDataRuleTemplateList',
+  edit = '/mainApi/CodeDataRuleTemplate/EditDataRuleTemplate',
+  info = '/mainApi/CodeDataRuleTemplate/GetDataRuleTemplateInfo',
+  delete = '/mainApi/CodeDataRuleTemplate/BatchDelDataRuleTemplate',
+  
   GetColumns = '/mainApi/Common/GetColumnsByClient',
   DeleteDetails = '/feeApi/FeeCustTemplate/DeleteDetails',
 }

src/views/system/CodeDataRuleTemplate/columnView.vue

@@ -0,0 +1,444 @@
+<template>
+  <div class="columnViewBox">
+    <a-spin :spinning="loading">
+      <div class="flex ant-form-small">
+        <a-switch
+          v-model:checked="queryData.logicalOperator"
+          class="mt10"
+          checked-value="1"
+          un-checked-value="0"
+          checked-children="或"
+          un-checked-children="且"
+        />
+        <div style="flex: 1">
+          <div
+            v-for="(item, index) in queryData.conditions"
+            class="ds-advanced-search-item flex"
+            :key="`f-${index}`"
+          >
+            <data
+              :style="{ left: index == 0 ? '-30px' : '-15px' }"
+              class="v-line"
+              style="top: 21px"
+            ></data>
+            <data
+              v-if="index != queryData.conditions.length - 1"
+              class="r-line r-height"
+              style="left: -15px; top: 21px"
+            ></data>
+            <a-switch
+              v-model:checked="item.logicalOperator"
+              checked-value="1"
+              class="mt2"
+              un-checked-value="0"
+              checked-children="或"
+              un-checked-children="且"
+            />
+            <div style="flex: 1; margin-left: 30px">
+              <div
+                v-for="(row, key) in item.conditions"
+                :key="`c-${key}`"
+                style="margin-bottom: 6px; position: relative"
+              >
+                <div v-if="key != item.conditions.length - 1" class="r-line"></div>
+                <div :style="{ left: key == 0 ? '-29px' : '-16px' }" class="v-line"></div>
+                <a-select
+                  v-model:value="row.field"
+                  style="width: 150px; margin-right: 6px"
+                  placeholder="查询字段"
+                  @change="changeHandle($event, row)"
+                >
+                  <a-select-option v-for="item in schemas" :key="item.field" :value="item.field">
+                    {{ item.label }}
+                  </a-select-option>
+                </a-select>
+                <a-select
+                  v-model:value="row.operator"
+                  style="width: 90px; margin-right: 6px"
+                  placeholder="筛选符"
+                >
+                  <a-select-option
+                    v-for="item in operatorOptions"
+                    :key="item.value"
+                    :value="item.value"
+                  >
+                    {{ item.label }}
+                  </a-select-option>
+                </a-select>
+                <a-date-picker
+                  v-if="row.component == 'RangePicker'"
+                  placeholder="请选择"
+                  style="width: 150px"
+                  v-model:value="row.value"
+                />
+                <a-input
+                  v-else
+                  v-model:value="row.value"
+                  placeholder="请输入"
+                  style="width: 150px"
+                ></a-input>
+                <span
+                  v-if="item.conditions.length != 1"
+                  @click="deleteItem(index, key)"
+                  class="iconfont icon-shanchu21"
+                ></span>
+              </div>
+              <div class="item-btns">
+                <a-button type="link" @click="addRow(index)">
+                  <span class="iconfont icon-new_document"></span>
+                  添加条件
+                </a-button>
+                <a-button
+                  v-if="queryData.conditions.length != 1"
+                  type="link"
+                  @click="deleteGroup(index)"
+                >
+                  <span class="iconfont icon-shanchuzu"></span>
+                  删除整组
+                </a-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-spin>
+    <a-button class="add-group" type="link" @click="addGroup">
+      <span class="iconfont icon-calendar"></span>
+      添加条件组
+    </a-button>
+  </div>
+</template>
+<script lang="ts" setup name="AdvancedSearch">
+  import {
+    defineComponent,
+    PropType,
+    ref,
+    watchEffect,
+    defineProps,
+    defineEmits,
+    defineExpose,
+    unref,
+    watch,
+    reactive,
+  } from 'vue'
+  // 引入表格权限信息（包含id和name）
+  import { permissionsInfo } from '/@/hooks/web/usePermission'
+  import {
+    GetUserQuerySet,
+    UpdateUserQuerySet,
+  } from '/@/views/operation/seaexport/api/BookingLedger.js'
+  import { Modal } from 'ant-design-vue'
+  import { get, omit } from 'lodash-es'
+  // 预留，后期补双语
+  import { useI18n } from '/@/hooks/web/useI18n'
+  const props = defineProps({
+    schemas: {
+      type: Array,
+      default: () => [],
+    },
+    title: {
+      type: String,
+      default: '高级查询',
+    },
+    IsApi: {
+      type: Boolean,
+      default: true,
+    },
+  })
+  watch(
+    () => props.schemas,
+    () => {
+      console.log(1111111111111111)
+      init(null)
+    },
+    { deep: true },
+  )
+  const emit = defineEmits(['toSearch'])
+  // 弹窗开关
+  const modalFlag = ref(false)
+  const queryData = reactive({
+    logicalOperator: '0',
+    conditions: [],
+  })
+  // 默认模版数据
+  const queryOldData = reactive({
+    logicalOperator: '0',
+    conditions: [
+      {
+        logicalOperator: '0',
+        conditions: [
+          {
+            field: null,
+            operator: null,
+            value: null,
+            component: '',
+          },
+          {
+            field: null,
+            operator: null,
+            value: null,
+            component: '',
+          },
+          {
+            field: null,
+            operator: null,
+            value: null,
+            component: '',
+          },
+          {
+            field: null,
+            operator: null,
+            value: null,
+            component: '',
+          },
+        ],
+      },
+      {
+        logicalOperator: '1',
+        conditions: [
+          {
+            field: null,
+            operator: null,
+            value: null,
+            component: '',
+          },
+          {
+            field: null,
+            operator: null,
+            value: null,
+            component: '',
+          },
+          {
+            field: null,
+            operator: null,
+            value: null,
+            component: '',
+          },
+          {
+            field: null,
+            operator: null,
+            value: null,
+            component: '',
+          },
+        ],
+      },
+    ],
+  })
+  // 筛选符options
+  const operatorOptions = [
+    {
+      value: 0,
+      label: '等于',
+    },
+    {
+      value: 10,
+      label: '不等于',
+    },
+    {
+      value: 2,
+      label: '大于',
+    },
+    {
+      value: 3,
+      label: '大于等于',
+    },
+    {
+      value: 4,
+      label: '小于',
+    },
+    {
+      value: 5,
+      label: '小于等于',
+    },
+    {
+      label: '包含',
+      value: 1,
+    },
+    {
+      label: '不包含',
+      value: 13,
+    },
+  ]
+  // 存储接口返回的查询条件
+  const sourceData = {
+    logicalOperator: '',
+    conditions: '',
+  }
+  const loading = ref(false)
+  // 初始化弹窗，请求高级查询数据
+  const init = (IsApiData) => {
+    modalFlag.value = true
+    if (props.IsApi) {
+      loading.value = true
+      const permissionId = permissionsInfo().permissionId
+      GetUserQuerySet({ permissionId })
+        .then((res) => {
+          loading.value = false
+          const { data } = res
+          const content = JSON.parse(data?.content || '{}')
+          const source = JSON.parse(JSON.stringify(queryOldData))
+          if (content && content?.conditions?.length) {
+            // sourceData.logicalOperator = JSON.stringify(JSON.parse(content.logicalOperator))
+            // sourceData.conditions = JSON.stringify(JSON.parse(content.conditions))
+            queryData.logicalOperator = content.logicalOperator
+            queryData.conditions = content.conditions
+            // queryData.logicalOperator = source.logicalOperator
+            // queryData.conditions = source.conditions
+          } else {
+            queryData.logicalOperator = source.logicalOperator
+            queryData.conditions = source.conditions
+          }
+        })
+        .catch(() => {
+          loading.value = false
+        })
+    } else {
+      let source = JSON.parse(JSON.stringify(queryOldData))
+      if (IsApiData) {
+        source = JSON.parse(IsApiData)
+      }
+      // const source = JSON.parse(JSON.stringify(queryOldData))
+      queryData.logicalOperator = source.logicalOperator
+      queryData.conditions = source.conditions
+    }
+  }
+  const reset = () => {
+    const source = JSON.parse(JSON.stringify(queryOldData))
+    queryData.logicalOperator = source.logicalOperator
+    queryData.conditions = source.conditions
+  }
+  // 查询并保存当前条件
+  const search = () => {
+    // 如果条件有变化则保存新查询条件，否则不调用接口
+    // if (JSON.stringify(sourceData) != JSON.stringify(queryData)) {
+
+    // }
+    modalFlag.value = false
+    emit('toSearch', queryData)
+    const propsData = {
+      permissionId: permissionsInfo().permissionId,
+      content: JSON.stringify(queryData),
+    }
+    if (props.IsApi) {
+      UpdateUserQuerySet(propsData).then((res) => {})
+    }
+  }
+
+  const changeHandle = (e, row) => {
+    row.value = null
+    props.schemas.forEach((item) => {
+      if (item.field == e) {
+        row.component = item.component
+      }
+    })
+  }
+  // 删除单组
+  const deleteItem = (index, key) => {
+    queryData.conditions[index].conditions.splice(key, 1)
+  }
+  // 添加行
+  const addRow = (index) => {
+    queryData.conditions[index].conditions.push({
+      field: null,
+      operator: null,
+      value: '',
+      component: '',
+    })
+  }
+  // 删除组
+  const deleteGroup = (index) => {
+    queryData.conditions.splice(index, 1)
+  }
+  // 添加组
+  const addGroup = () => {
+    queryData.conditions.push({
+      logicalOperator: 'and',
+      conditions: [
+        {
+          field: null,
+          operator: null,
+          value: null,
+          component: '',
+        },
+      ],
+    })
+  }
+  defineExpose({
+    init,
+    queryData,
+  })
+</script>
+
+<style lang="less" scoped>
+  .columnViewBox {
+    position: relative;
+  }
+  // .ds-advanced-search-modal {
+  .ant-form-small {
+    margin-top: 15px;
+    min-height: 400px;
+  }
+  .ds-advanced-search-item {
+    position: relative;
+    margin-left: 30px;
+    padding: 10px 15px;
+    border-left: 1px solid #257afa;
+    background: #f5f9fc;
+    margin-bottom: 20px;
+    border-radius: 2px;
+    .icon-shanchu21 {
+      margin-left: 6px;
+      color: #257afa;
+      cursor: pointer;
+    }
+    .item-btns {
+      text-align: right;
+      color: #257afa;
+      .iconfont {
+        cursor: pointer;
+      }
+      padding-right: 18px;
+    }
+  }
+  .ds-advanced-search-item:last-child {
+    margin-bottom: 0;
+  }
+  .add-group {
+    position: absolute;
+    bottom: 16px;
+    margin-left: 65px;
+  }
+  .ant-switch {
+    background: #257afa;
+    font-weight: 600;
+  }
+  .ant-switch-checked {
+    background: #17a6a3;
+    font-weight: 600;
+  }
+  .r-line {
+    width: 0.8px;
+    height: 35px;
+    background: #cccccc;
+    display: inline-block;
+    position: absolute;
+    left: -16px;
+    top: 13px;
+  }
+  .r-line:last-child {
+    height: 10px;
+  }
+  .r-height {
+    height: calc(100% + 20px);
+  }
+  .v-line {
+    width: 30px;
+    height: 0.8px;
+    background: #cccccc;
+    display: inline-block;
+    position: absolute;
+    left: -16px;
+    top: 13px;
+  }
+  // }
+</style>

src/views/system/CodeDataRuleTemplate/columns.tsx

@@ -1,15 +1,22 @@
 import { ref } from 'vue'
 import { BasicColumn, FormSchema } from '/@/components/Table'
+import { getTablesByClient } from '/@/views/baseinfo/formcopy/api'
+import { getColumns, getClientPermissionList } from '/@/api/system/role'
+import { Tag } from 'ant-design-vue'
 // 引入字典数据
 import { getDictOption } from '/@/utils/dictUtil'
+const columnViewData: any = []
+const res: API.DataResult = await getTablesByClient()
+if (res.succeeded) {
+  res.data.forEach((item) => {
+    columnViewData.push({
+      label: item.description,
+      value: item.description,
+    })
+  })
+}
 // 下拉框数据接口
 import { GetClientListByCode } from '/@/api/common'
-// 往来单位下拉框数据
-const companyDict = ref([])
-let businessType: any = [
-  { value: 1, label: '海运出口' },
-  { value: 2, label: '海运进口' },
-]
 export const columns: BasicColumn[] = [
   {
     title: '权限模板类型',
@@ -23,7 +30,7 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '资源标识',
-    dataIndex: 'permissionId',
+    dataIndex: 'permissionEntity',
     width: 200,
   },
   {
@@ -37,25 +44,40 @@ export const columns: BasicColumn[] = [
     // width: 200,
   },
   {
-    title: '可视/可操作???',
-    dataIndex: 'note',
-    // width: 200,
+    title: '可视/可操作',
+    dataIndex: 'ruleType',
+    customRender: ({ text }) => {
+      if (text === 'visible') {
+        return '可视'
+      } else if (text === 'operate') {
+        return '可操作'
+      }
+      return text
+    },
   },
   {
     title: '是否启用',
-    dataIndex: 'note',
-    // width: 200,
+    dataIndex: 'status',
+    width: 80,
+    customRender: ({ text }) => {
+      if (text === 0) {
+        return <Tag color="success">启用</Tag>
+      } else if (text === 1) {
+        return <Tag color="error">禁用</Tag>
+      }
+      return text
+    },
   },
   {
     title: '权限描述',
-    dataIndex: 'note',
-    width: 200,
-  },
-  {
-    title: '备注',
-    dataIndex: 'note',
+    dataIndex: 'description',
     width: 200,
   },
+  // {
+  //   title: '备注？？',
+  //   dataIndex: 'note',
+  //   width: 200,
+  // },
 ]
 
 export const searchFormSchema: FormSchema[] = [
@@ -75,100 +97,160 @@ export const formSchema: FormSchema[] = [
     show: false,
   },
   {
-    field: 'name',
-    label: '模板名称',
+    field: 'templateName',
+    label: '权限模板类型',
     component: 'Input',
-    required: true,
-    colProps: { span: 8 },
+    // required: true,
+    colProps: { span: 12 },
   },
   {
-    field: 'businessType',
-    label: '业务类型',
-    component: 'Select',
-    required: true,
-    colProps: { span: 8 },
-    componentProps: () => {
+    label: '权限模板范围名称',
+    field: 'ruleScopeName',
+    component: 'Input',
+    defaultValue: '',
+    show: false,
+  },
+  {
+    label: '权限模板范围',
+    field: 'ruleScope',
+    component: 'ApiSelect',
+    colProps: { span: 12 },
+    componentProps: ({ formModel }) => {
       return {
-        options: businessType,
+        api: () => {
+          return new Promise((resolve) => {
+            getDictOption('datarule_scope_type').then((res) => {
+              resolve(res)
+            })
+          })
+        },
+        labelField: 'label',
+        valueField: 'value',
+        resultField: 'data',
+        allowClear: true,
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        getPopupContainer: () => document.body,
+        onChange: async (e, obj) => {
+          if (e && obj) {
+            formModel.ruleScope = obj.value
+            formModel.ruleScopeName = obj.label
+          }
+          if (!e && !obj) {
+            formModel.ruleScope = ''
+            formModel.ruleScopeName = ''
+          }
+        },
       }
     },
   },
-  // {
-  //   field: 'customerType',
-  //   label: '客户类别',
-  //   defaultValue: '',
-  //   component: 'ApiSelect',
-  //   colProps: { span: 5 },
-  //   componentProps: ({ formModel }) => {
-  //     return {
-  //       api: () => {
-  //         return new Promise((resolve) => {
-  //           getDictOption('djy_cust_prop').then((res) => {
-  //             console.log(res, 111111111111111)
-
-  //             resolve(res)
-  //           })
-  //         })
-  //       },
-  //       labelField: 'label',
-  //       valueField: 'value',
-  //       resultField: 'data',
-  //       filterOption: (input: string, option: any) => {
-  //         return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-  //       },
-  //       onChange: (v: string, obj) => {
-  //         GetClientListByCode({ code: v }).then((res) => {
-  //           const { data } = res
-  //           data.forEach((item) => {
-  //             item['label'] = item.shortName
-  //             item['value'] = item.codeName
-  //           })
-  //           companyDict.value = data
-  //         })
-  //       },
-  //     }
-  //   },
-  // },
   {
-    field: 'customerId',
-    label: '结算对象',
-    defaultValue: '',
+    label: '权限实体',
+    field: 'permissionEntity',
     component: 'Input',
+    defaultValue: '',
     show: false,
-    colProps: { span: 8 },
   },
   {
-    field: 'customerName',
-    label: '结算对象',
-    component: 'Input',
-    defaultValue: '',
-    dynamicDisabled: true,
-    colProps: { span: 8 },
+    field: 'permissionId',
+    label: '资源标识',
+    component: 'ApiSelect',
+    colProps: { span: 12 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: getClientPermissionList,
+        labelField: 'permissionName',
+        valueField: 'id',
+        immediate: false,
+        resultField: 'data',
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        getPopupContainer: () => document.body,
+        onChange: async (e, obj) => {
+          if (e && obj) {
+            formModel.permissionId = obj.id
+            formModel.permissionEntity = obj.permissionEntity
+          }
+          if (!e && !obj) {
+            formModel.permissionId = ''
+            formModel.permissionEntity = ''
+          }
+        },
+      }
+    },
   },
-  // {
-  //   label: '',
-  //   field: 'customerId',
-  //   component: 'Input',
-  //   defaultValue: '',
-  //   show: false,
-  // },
-  // {
-  //   label: '',
-  //   field: 'customerType',
-  //   component: 'Input',
-  //   defaultValue: '',
-  //   show: false,
-  // },
   {
-    field: 'description',
-    label: '模板说明',
-    component: 'Input',
-    colProps: { span: 8 },
+    field: 'columnView',
+    label: '中文视图名',
+    component: 'Select',
+    required: true,
+    colProps: { span: 12 },
+    componentProps: ({ formActionType }) => {
+      return {
+        options: columnViewData,
+        getPopupContainer: () => document.body,
+        onChange: async (e: any) => {
+          let tableViewName = ''
+          columnViewData.forEach((item) => {
+            if (item.description == e) {
+              tableViewName = item.name
+            }
+          })
+          const res: any = await getColumns({ tableViewName })
+          if (res.succeeded) {
+            formActionType.linkageForm(res.data)
+          }
+        },
+      }
+    },
   },
   {
-    field: 'note',
-    label: '备注',
+    field: 'orderNo',
+    label: '排序号',
     component: 'Input',
-    colProps: { span: 16 },
+    colProps: { span: 12 },
   },
+  {
+    field: 'ruleType',
+    label: '可视/可操作',
+    component: 'Switch',
+    colProps: { span: 6 },
+    defaultValue: false,
+    componentProps: {
+      checkedChildren: '可视',
+      checkedValue: 'visible',
+      unCheckedChildren: '可操作',
+      unCheckedValue: 'operate',
+    },
+  },
+  {
+    field: 'status',
+    label: '是否启用',
+    component: 'Switch',
+    colProps: { span: 6 },
+    defaultValue: 0,
+    componentProps: {
+      checkedChildren: '禁用',
+      checkedValue: 1,
+      unCheckedChildren: '启用',
+      unCheckedValue: 0,
+    },
+  },
+  {
+    field: 'description',
+    label: '权限描述',
+    component: 'InputTextArea',
+    colProps: { span: 12 },
+    componentProps: {
+      rows: 2,
+    },
+  },
+  // {
+  //   field: 'description',
+  //   label: '备注',
+  //   component: 'Input',
+  //   colProps: { span: 12 },
+  // },
 ]

src/views/system/CodeDataRuleTemplate/feeField.vue

@@ -28,7 +28,7 @@
       <div style="position: relative">
         <input class="ds-tb-check" type="checkbox" v-model="allCheck" :indeterminate="someCheck" />
         <hot-table ref="hotTb" :data="list" :settings="settings">
-          <img v-show="!list.length" src="../../../../assets/images/nodata.png" alt="" />
+          <img v-show="!list.length" src="../../../assets/images/nodata.png" alt="" />
         </hot-table>
       </div>
     </a-spin>