diantou/src_product/iam/audit/dataMarket/data-market.vue

<template>
  <div :class="[$style.wrapHeight, $style.dataclass]">
    <div :class="$style.rowHeight">
      <div :class="$style.leftcard">
        <div :class="$style.leftcardspace">
          <audit-class-tree
            ref="auditMaintainCatalogTree"
            show-line
            top-node-text="数据分类维护"
            :is-select-dep="true"
            :draggable="false"
            :auto-expand-parent="showAllTreeNode"
            :cate="true"
            :tree-data="treeData.financeCategoryTree"
            @treeSelect="treeSelect1"
            @onChangeSearch="onChangeSearch1"
            >领域分类
          </audit-class-tree>
        </div>
        <div :class="$style.leftcardspace">
          <div :class="$style.leftcardspacetree">
            <audit-class-tree
              ref="auditMaintainCatalogTree"
              show-line
              top-node-text="数据分类维护"
              :is-select-dep="true"
              :draggable="false"
              :cate="true"
              :tree-data="treeData.spaceCategoryTree"
              @treeSelect="treeSelect"
              @onChangeSearch="onChangeSearch"
              >我的空间
            </audit-class-tree>
          </div>

          <div :class="$style.leftcardspaceedit">
            <a-button type="primary" @click="showisShowSpace">分类管理</a-button>
            <a-button type="primary" @click="uploadClick">文件上传</a-button>
          </div>
        </div>
      </div>
      <div :class="$style.rightcard">
        <a-card style="min-height: 100% ;">
          <template v-if="clickType === 'space'">
            <SdDataTableEx
              :key="key"
              ref="dataTableSpace"
              :projectlist="true"
              data-url="api/xcoa-mobile/v1/file-upload/list"
              :editnode="editnode"
              form-id="iamUploadFile"
              page-id="audit/maintain/iamUploadFile"
              :columns="columns"
              :actions="actions"
              :disable-export-table="true"
              :filter-expressions="expressions"
              @searchbtnClick="searchbtnClick"
            >
              <template slot="categoryName" slot-scope="text, record">
                <a
                  v-if="record.editAndDeleteAuth !== 0"
                  @click="
                    () => {
                      $refs.dataTable.showDetailModal(record.id, 'audit/maintain/iamDataCategory')
                    }
                  "
                  >{{ text }}</a
                >
                <span v-else>{{ text }}</span>
              </template>

              <!-- 详情表单 -->
            </SdDataTableEx>
          </template>
          <template v-if="clickType === 'finance'">
            <div :class="$style.tableHeader">
              <!-- <a-form-model layout="inline">
                <a-form-model-item label="组织名称:">
                  <a-input v-model="searchFinaceForm.name"></a-input>
                </a-form-model-item>

                <a-form-model-item label="日期:">
                  <a-range-picker @change="onChangeFinace" />
                </a-form-model-item>
                <a-form-model-item> </a-form-model-item>
              </a-form-model>
              <a-button type="primary" @click="searchFinace">搜索</a-button> -->
              <a-button :disabled="!isExport" type="primary" @click="exportData">数据导出</a-button>
              <!-- <a-button>自助建模</a-button> -->
            </div>
            <!-- <a-table
              :class="$style.dataTable"
              :scroll="{ x: '100%' }"
              :columns="fileViewColumns"
              :pagination="{
                position: 'bottom',
              }"
              :data-source="fileViewData"
            ></a-table> -->
            <sd-table
              :columns="fileViewColumns"
              :data-source="fileViewData"
              :scroll="{ x: '100%' }"
              :pagination="{
                position: 'bottom',
              }"
            ></sd-table>
          </template>
          <template v-if="clickType === 'caiwu'">
            <a-form-model layout="inline">
              <a-form-model-item label="公司选择:">
                <a-cascader
                  allow-clear
                  change-on-select
                  :options="groupList"
                  :field-names="{ label: 'name', value: 'code', children: 'children' }"
                  placeholder="请选择分类"
                  @change="handleChange1"
                />
              </a-form-model-item>
              <a-form-model-item label="报表类型:">
                <a-cascader
                  v-model="cascaderReportType"
                  allow-clear
                  change-on-select
                  :options="reportTypeList"
                  :field-names="{ label: 'name', value: 'code', children: 'children' }"
                  placeholder="请选择报表类型"
                  @change="handleChangeReportType"
                />
                <!-- <a-select
                  v-model="expressions1[0].stringValue"
                  allow-clear
                  :class="$style.caiwuWidth"
                  placeholder="请输入模型名称"
                >
                  <a-select-option v-for="item in reportTypeList" :key="item" :value="item">{{
                    item
                  }}</a-select-option>
                </a-select> -->
              </a-form-model-item>
              <a-form-model-item label="日期:">
                <!-- <a-month-picker v-model="expressions1[1].stringValue" :format="'YYYYMM'" /> -->
                <a-month-picker
                  v-if="isPickerType"
                  v-model="value"
                  placeholder="请选择日期"
                  @change="onChangeMonth"
                />
                <a-date-picker
                  v-else
                  v-model="value"
                  mode="year"
                  :open="open"
                  format="YYYY"
                  placeholder="请选择日期"
                  @openChange="openChange"
                  @panelChange="panelChange"
                  @change="onChangeYear"
                />
              </a-form-model-item>
              <a-form-model-item>
                <a-button type="primary" @click="search">搜索</a-button>
              </a-form-model-item>
            </a-form-model>
            <SdDataTableEx
              :key="key"
              ref="dataTable"
              :projectlist="true"
              data-url="api/xcoa-mobile/v1/document-record/page"
              :editnode="editnode"
              :columns="columns1"
              :actions="actions"
              :disable-export-table="true"
              :filter-expressions="expressions1"
              form-id="iamUploadFile"
              page-id="audit/maintain/iamUploadFile"
              @searchbtnClick="searchbtnClick"
            >
            </SdDataTableEx>
          </template>
        </a-card>
        <a-modal v-model="isShowSpace" title="分类管理" width="40%" @ok="handleOk">
          <a-form-model :model="spaceForm" v-bind="formItemLayout">
            <a-form-model-item label="分类名称">
              <a-input v-model="spaceForm.name" allow-clear />
            </a-form-model-item>
            <a-form-model-item label="分类选择">
              <a-cascader
                v-model="spaceForm.ids"
                change-on-select
                :options="treeData.spaceCategoryTree"
                :field-names="{ label: 'name', value: 'id', children: 'children' }"
                placeholder="请选择分类"
              />
            </a-form-model-item>
            <a-form-model-item label="分类排序">
              <a-input-number v-model="spaceForm.sort" allow-clear />
            </a-form-model-item>
            <a-form-model-item label="分类备注">
              <a-textarea v-model="spaceForm.description" allow-clear />
            </a-form-model-item>
          </a-form-model>
        </a-modal>
        <a-modal v-model="isShowFile" title="文件上传" width="40%" @ok="handleUpload">
          <a-form-model
            ref="ruleForm"
            :model="fileForm"
            v-bind="formItemLayout"
            :rules="fileFormRules"
          >
            <a-form-model-item label="文件名称" prop="classifyName">
              <a-input v-model="fileForm.classifyName" allow-clear />
            </a-form-model-item>
            <a-form-model-item label="分类选择" prop="classifyId">
              <a-cascader
                v-model="fileForm.classifyId"
                allow-clear
                change-on-select
                :options="treeData.spaceCategoryTree"
                :field-names="{ label: 'name', value: 'id', children: 'children' }"
                placeholder="请选择分类"
              />
            </a-form-model-item>
            <a-form-model-item label="文件上传">
              <a-button v-if="fileName === ''" @click="isShowFileUpload = !isShowFileUpload"
                >点击选择文件</a-button
              >
              <a-tag v-else color="blue" closable @close="clearInfo">
                {{ fileName }}
              </a-tag>
            </a-form-model-item>
            <a-form-model-item label="文件备注">
              <a-textarea v-model="fileForm.description" allow-clear />
            </a-form-model-item>
          </a-form-model>
        </a-modal>
        <a-modal
          v-model="isShowFileUpload"
          title="文件上传"
          width="60%"
          @ok="handleUploadOk"
          @cancel="unUpload"
        >
          <a-form-model
            ref="fileFormRef"
            :model="fileForm"
            v-bind="formItemLayout"
            :rules="fileRules"
          >
            <a-form-model-item label="文件上传">
              <a-upload-dragger
                name="file"
                :multiple="false"
                :remove="handleRemove"
                :before-upload="beforeUpload"
                :file-list="defaultFileList"
                accept=".xls,.xlsx"
              >
                <p class="ant-upload-drag-icon">
                  <a-icon type="inbox" />
                </p>
                <p class="ant-upload-text">
                  点击或拖拽上传文件<br />
                  支持 xls/xlsl/csv 文件格式文件，默认选择第一个sheet
                </p>
              </a-upload-dragger>
            </a-form-model-item>
            <a-form-model-item label="物理表名" prop="physicalTableName">
              <a-input v-model="fileForm.physicalTableName" allow-clear />
            </a-form-model-item>
            <a-form-model-item label="备注表名">
              <a-input v-model="fileForm.noteTableName" allow-clear />
            </a-form-model-item>
            <a-form-model-item label="字段配置">
              <a-table
                :key="indexKey"
                :columns="fileColumns"
                :data-source="fileData"
                bordered
                :pagination="false"
                :row-key="
                  (record, index) => {
                    return index
                  }
                "
              >
                <a-input
                  slot="comment"
                  slot-scope="record, text, index"
                  :value="record"
                  @change="(e) => handleChange(e.target.value, 'comment', index)"
                />
                <a-input
                  slot="columnName"
                  slot-scope="record, text, index"
                  :value="record"
                  @change="(e) => handleChange(e.target.value, 'columnName', index)"
                />
                <a-select
                  slot="columnType"
                  slot-scope="record, text, index"
                  :default-value="record"
                  @change="(e) => handleChange(e, 'columnType', index)"
                >
                  <a-select-option value="INT"> 整数</a-select-option>
                  <a-select-option value="BIGINT"> 长整数</a-select-option>
                  <a-select-option value="DECIMAL"> 小数</a-select-option>
                  <a-select-option value="STRING"> 字符串</a-select-option>
                  <a-select-option value="TEXT"> 长字符串</a-select-option>
                  <a-select-option value="TIMESTAMP"> 日期</a-select-option>
                </a-select>
                <a-input
                  slot="dataLength"
                  slot-scope="record, text, index"
                  :value="record"
                  @change="(e) => handleChange(e.target.value, 'dataLength', index)"
                />
                <a-input
                  v-if="text.columnType === 'DECIMAL'"
                  slot="pointNum"
                  slot-scope="record, text, index"
                  :value="record"
                  @change="(e) => handleChange(e.target.value, 'pointNum', index)"
                />
              </a-table>
            </a-form-model-item>
          </a-form-model>
        </a-modal>
        <a-modal v-model="isShowFileView" title="文件查看" width="60%" @ok="isShowFileView = false">
          <a-table :columns="fileViewColumns" :data-source="fileViewData"></a-table>
        </a-modal>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/common/services/axios-instance'
import { message } from 'ant-design-vue'
import auditClassTree from './audit-class-tree.vue'
import auditAdvancedQueryMixins from '../../components/audit-advanced-query-mixins'
import auditAdvancedGroupMixins from '../../components/audit-advanced-group-mixins'
import SdDataTableEx from '@/common/components/sd-data-table-ex.vue'
import dataService from './data-market'
import { generateTree, getTreeIds } from '@product/iam/audit/dataMarket/util'
import moment from 'moment'
import { getUserInfo } from '@/common/store-mixin'
import sdTable from '@/common/components/sd-table.vue'
import appConfig from '@custom/app-config'

export default {
  name: 'DataMarket',
  metaInfo: {
    title: '数据集市',
  },
  components: {
    SdDataTableEx,
    auditClassTree,
    sdTable,
  },
  mixins: [auditAdvancedQueryMixins, auditAdvancedGroupMixins],
  data() {
    return {
      // 点击类型
      clickType: '',
      editnode: true,
      key: 0,
      indexKey: 0,
      searchform: 'searchform',
      formData: {
        categoryName: '',
        categoryId: '',
      },
      auditOrgId: null,
      parentId: 0,
      parentCategoryId: '000000',
      level: 1,
      isEnd: null,
      columns: [
        {
          title: '序号',
          dataIndex: 'id',
        },
        {
          title: '文件名称',
          dataIndex: 'classifyName',
        },
        // physicalTableName
        {
          title: '物理表名',
          dataIndex: 'physicalTableName',
        },
        {
          title: '备注',
          dataIndex: 'description',
        },
        {
          title: '操作',
          dataIndex: 'opt',
          align: 'center',
          customRender: (text, record, index) => {
            return (
              <span>
                <a
                  vOn:click={() => {
                    this.exidInfo(record)
                  }}
                >
                  编辑
                </a>{' '}
                <a
                  vOn:click={() => {
                    this.handleView(record.id)
                    this.isShowFileView = !this.isShowFileView
                  }}
                >
                  查看
                </a>
              </span>
            )
          },
        },
      ],
      actions: [
        // {
        // 	label: '新建',
        // 	permission: null,
        // 	// id: 'new',
        // 	type: TableActionTypes.primary,
        // 	callback: this.create,
        // },
        // {
        // 	label: '数据授权',
        // 	id: 'auditWarrant',
        // 	permission: null,
        // 	callback: this.Matterssq,
        // },
        // {
        // 	label: '删除',
        // 	// id: 'delete',
        // 	permission: null,
        // 	callback: this.deleteRows,
        // },
      ],
      expressions: [
        {
          dataType: 'long',
          name: 'classifyId',
          op: 'eq',
          longValue: -1,
        },
      ],
      columns1: [
        {
          title: '序号',
          dataIndex: 'id',
          width: '80px',
        },
        {
          title: '报表类型',
          dataIndex: 'reportName',
          width: '200px',
        },
        {
          title: '公司名称',
          dataIndex: 'orgName',
          width: '400px',
        },
        {
          title: '日期',
          dataIndex: 'reportDate',
        },
        {
          title: '操作',
          dataIndex: 'opt',
          align: 'center',
          customRender: (text, record, index) => {
            return (
              <span>
                <a
                  vOn:click={() => {
                    this.caiwuView(record)
                  }}
                >
                  查看
                </a>
              </span>
            )
          },
        },
      ],
      // {
      //     title: '报表类型',
      //     dataIndex: 'reportName',
      //   },
      //   {
      //     title: '公司名称',
      //     dataIndex: 'orgName',
      //   },
      //   {
      //     title: '月份信息',
      //     dataIndex: 'reportDate',
      //   },
      isPickerType: true,
      expressions1: [
        {
          dataType: 'str',
          op: 'in',
          name: 'reportName',
          stringValue: '',
        },
        { dataType: 'str', op: 'eq', name: 'reportDate', stringValue: '' },
        {
          dataType: 'str',
          op: 'eq',
          name: 'orgCode',
          stringValue: '',
        },
      ],
      isroot: true,
      className: '',
      // 财务报表开始
      isShowFinance: false,
      financeForm: {
        // 分类名称
        name: '',
        // 分类id
        ids: [],
        // 排序
        sort: 0,
        // 备注
        description: '',
      },
      groupList: [],
      allGroupList: [],
      reportTypeList: [],

      // 我的空间操作开始
      isShowSpace: false,
      spaceForm: {
        // 分类名称
        name: '',
        // 分类id
        ids: [],
        // 排序
        sort: 0,
        // 备注
        description: '',
      },
      treeData: {
        // 财务报表分类树
        financeCategoryTree: [],
        // 空间分类树
        spaceCategoryTree: [],
      },
      // 文件上传操作开始
      isShowFile: false,
      isShowFileUpload: false,
      isShowFileView: false,
      fileForm: {
        // 文件名称
        classifyName: '',
        // 分类
        classifyId: [],
        // 文件
        filePath: '',
        // 物理表名
        physicalTableName: '',
        noteTableName: '',
        // 备注
        description: '',
      },
      fileFormRules: {
        classifyName: [{ required: true, message: '请输入文件名称', trigger: 'blur' }],
        classifyId: [{ required: true, message: '请选择分类', trigger: 'change' }],
        filePath: [{ required: true, message: '请选择文件', trigger: 'change' }],
        physicalTableName: [{ required: true, message: '请输入物理表名', trigger: 'blur' }],
        noteTableName: [{ required: true, message: '请输入备注表名', trigger: 'blur' }],
      },
      fileRules: {
        physicalTableName: [
          { required: true, message: '请输入物理表名', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9_]+$/, message: '只能输入字母、数字、下划线' },
          // 必须以dws_dsjsj_开头
          { pattern: /^dws_dsjsj_/, message: '必须以dws_dsjsj_开头', trigger: 'change' },
        ],
      },
      fileData: [],
      fileColumns: [
        {
          title: '原始字段',
          dataIndex: 'comment',
          scopedSlots: { customRender: 'comment' },
        },
        {
          title: '物理字段',
          dataIndex: 'columnName',
          scopedSlots: { customRender: 'columnName' },
        },
        {
          title: '数据类型',
          dataIndex: 'columnType',
          width: 150,
          scopedSlots: { customRender: 'columnType' },
        },
        {
          title: '字段长度',
          dataIndex: 'dataLength',
          scopedSlots: { customRender: 'dataLength' },
        },
        {
          title: '小数位',
          dataIndex: 'pointNum',
          scopedSlots: { customRender: 'pointNum' },
        },
      ],
      fileViewColumns: [],
      fileViewData: [],
      searchFinaceForm: {
        name: '',
        start: '',
        end: '',
      },
      // 我的空间操作结束
      fileName: '',
      defaultFileList: [],
      isExport: false,
      onEditId: null,
      cascaderReportType: null,
      open: false,
      value: '',
      financeCategoryTree: [],
      showAllTreeNode: false,
    }
  },
  computed: {
    formItemLayout() {
      return {
        layout: 'horizontal',
        labelCol: { span: 4 },
        wrapperCol: { span: 18 },
      }
    },
  },
  mounted() {
    this.spaceInit()
    const roles = this.$store.state.sd.common.userInfo.default.roles
    this.isExport = roles.map((val) => val.code).includes('G-1_DATE_ EXPORT')
  },
  methods: {
    unUpload() {
      this.fileName = ''
      for (const key in this.fileForm) {
        this.fileForm[key] = ''
        if (key === 'classifyId') {
          this.fileForm[key] = []
        }
      }
    },
    openChange(status) {
      if (status) {
        this.open = true
      } else {
        this.open = false
      }
    },
    panelChange(e) {
      this.value = e
      if (!e) {
        this.expressions1[1].stringValue = ''
        return
      }
      this.expressions1[1].stringValue = e.format('YYYY') || ''
      this.open = false
    },
    showisShowSpace() {
      if (this.spaceForm.id === 0) {
        return message.error('默认分类不可修改')
      }
      this.isShowSpace = !this.isShowSpace
    },
    clearInfo() {
      this.fileName = ''
      this.defaultFileList = []
      this.fileData = []
      for (const key in this.fileForm) {
        this.fileForm[key] = ''
        if (key === 'classifyId') {
          this.fileForm[key] = []
        }
      }
    },
    uploadClick() {
      this.isShowFile = !this.isShowFile
      for (const key in this.fileForm) {
        this.fileForm[key] = ''
        if (key === 'classifyId') {
          this.fileForm[key] = []
        }
      }
      this.fileName = ''
    },
    exidInfo(item) {
      this.onEditId = item.id
      this.isShowFile = !this.isShowFile
      this.fileName = item.noteTableName
      for (const key in this.fileForm) {
        this.fileForm[key] = item[key]
        if (key === 'classifyId') {
          this.fileForm[key] = getTreeIds(this.treeData.spaceCategoryTree, item[key])
        }
      }
    },
    spaceInit() {
      const params = {
        columns: '',
        maxResults: 9999,
        startPosition: 0,
        expressions: [],
        buttonExpressions: [],
      }
      dataService.iamDataCubeQueryList(params).then((res) => {
        res.data.data.forEach((item) => {
          item.name = item.dataCubeBean.categoryName
          item.children = item?.serverBeanList.map((v) => {
            v.name = v.tableNameCN
            v.props = {
              isroot: false,
            }
            return v
          })
          item.isLeaf = false
          if (item.dataCubeBean.classifyType === '1') {
            item.slots = {
              icon: 'folder-open',
            }
          } else {
            item.slots = {
              icon: 'file-done',
            }
          }
          item.props = {
            isroot: true,
          }
        })

        this.financeCategoryTree = JSON.parse(JSON.stringify(res.data.data))
        this.treeData.financeCategoryTree = generateTree(
          res.data.data,
          'id',
          'parentId',
          'children'
        )
      })
      dataService.findMySpaceCategoryTree().then((res) => {
        const parentNode = [
          {
            id: 0,
            name: '默认分类',
            children: generateTree(res.data, 'id', 'parentId', 'children'),
          },
        ]
        this.spaceCategoryTree = JSON.parse(JSON.stringify(res.data))
        this.treeData.spaceCategoryTree = parentNode
      })
    },
    onChangeSearch(value) {
      if (!value) {
        this.spaceInit()
        return
      }
      const list = this.spaceCategoryTree.filter((item) => {
        return item.name.includes(value)
      })
      this.treeData.spaceCategoryTree = generateTree(list, 'id', 'parentId', 'children')
    },
    onChangeSearch1(value) {
      if (!value) {
        this.showAllTreeNode = false
        this.spaceInit()
      }
      // let list = this.financeCategoryTree.filter((item) => {
      //   return (
      //     item.name.includes(value) ||
      //     item.serverBeanList.some((v) => v.tableNameCN.includes(value))
      //   )
      // })
      // // serverBeanList 里过滤没有数据的值
      // list = list.map((item) => {
      //   item.children = item.children.filter((v) => v.name.includes(value))
      //   return item
      // })

      // this.treeData.financeCategoryTree = generateTree(list, 'id', 'parentId', 'children')
      // 展开所有节点
    },
    treeSelect(selectedKeys, info) {
      this.clickType = 'space'
      if (!info.selected) {
        this.spaceForm = {
          name: '',
          ids: [],
          sort: 0,
          description: '',
        }
        return
      }
      const { dataRef } = info.node
      this.dataRef = dataRef
      this.expressions = [
        {
          dataType: 'long',
          name: 'classifyId',
          op: 'eq',
          longValue: dataRef.id,
        },
      ]
      this.spaceForm.name = dataRef.name
      this.spaceForm.id = dataRef.id
      this.spaceForm.parentId = dataRef.parentId
      this.spaceForm.ids = getTreeIds(this.treeData.spaceCategoryTree, dataRef.id)

      this.spaceForm.sort = dataRef.sort
      this.spaceForm.description = dataRef.description
    },
    handleChangeReportType(value) {
      if (value.length === 0) {
        this.expressions1[0].stringValue = ''
        this.cascaderReportType = null
      }
      if (value.length === 1) {
        // // 如果是月报则把月报下全部报表名用,分割
        if (value[0] === '月报') {
          this.expressions1[0].stringValue = this.reportTypeList[0].children
            .map((item) => `'${item.code}'`)
            .join(',')
        } else {
          this.expressions1[0].stringValue = this.reportTypeList[1].children
            .map((item) => `'${item.code}'`)
            .join(',')
        }
      }

      if (value.length === 2) {
        this.expressions1[0].stringValue = `'${value[1]}'`
        const flag = value[0] === '月报'
        if (this.isPickerType !== flag) {
          this.value = null
          this.expressions1[1].stringValue = ''
        }
        this.isPickerType = value[0] === '月报'
      }
    },
    treeSelect1(e, { node }) {
      this.clickType = 'finance'

      const { dataRef } = node
      this.dataRef = dataRef
      dataRef.classifyType = dataRef?.dataCubeBean ? +dataRef?.dataCubeBean?.classifyType : 1
      if (dataRef.classifyType === 2) {
        dataService.userGrouplist().then((res) => {
          this.groupList = generateTree(res.data, 'id', 'parentId', 'children')
        })
        dataService.financeClassifyList().then((res) => {
          this.reportTypeList = [
            {
              name: '月报',
              code: '月报',
              children: res.data.annualReport.map((item) => {
                return {
                  name: item,
                  code: item,
                }
              }),
            },
            {
              // 决算 finalAccount
              name: '决算',
              code: '决算',
              children: res.data.finalAccount.map((item) => {
                return {
                  name: item,
                  code: item,
                }
              }),
            },
          ]
        })
        this.clickType = 'caiwu'
      } else {
        if (!dataRef.props.isroot) {
          dataService.findDataList(dataRef.id).then((res) => {
            // todo 生成测试数据
            // for (let i = 0; i < 100; i++) {
            //   res.data.push({
            //     数据抽取时间戳: '2023-10-09 09:47:55',
            //     是否签订: '1',
            //     来源系统名称: '数字法治系统',
            //     来源系统组织机构名称: '戴德新',
            //     来源系统组织机构编码: '戴德新',
            //     法定代表人或委托人: '',
            //     流程状态: '',
            //     相对方名称: '石家庄瑞能电力器材有限公司',
            //     相对方编码: '',
            //     签字人身份: '1',
            //     签约代表名称: '戴德新',
            //     签订时间: '2020-01-08 10:18:54',
            //   })
            // }
            this.fileViewColumns = Object.keys(res.data[0]).map((item) => {
              // 检测item长度 每个字符设置16px宽度
              const width = item.length * 27
              return {
                title: item,
                dataIndex: item,
                width: width + 'px',
                ellipsis: true,
              }
            })
            this.fileViewData = res.data
          })
        } else {
          this.clickType = ''
        }
      }
    },
    searchFinace() {},
    // 时间过滤
    onChangeFinace(val) {
      if (val.length === 0) {
        this.searchFinaceForm.start = ''
        this.searchFinaceForm.end = ''
      } else {
        this.searchFinaceForm.start = moment(val[0]).format('YYYYMMDD')
        this.searchFinaceForm.end = moment(val[1]).format('YYYYMMDD')
      }
    },
    handleOk() {
      const parentId = this.spaceForm.ids[this.spaceForm.ids.length - 1] || 0
      if (parentId !== this.spaceForm.id) {
        this.spaceForm.parentId = parentId
      }
      if (this.spaceForm.parentId === undefined) {
        this.spaceForm.parentId = 0
      }
      // 如果id==0 说明是新增 则删除id
      if (this.spaceForm.id === 0) {
        delete this.spaceForm.id
      }
      this.spaceForm.creatorAccount = getUserInfo().account
      // console.log(this.spaceForm)
      dataService.saveMySpaceCategory(this.spaceForm).then((res) => {
        if (res.data) {
          message.success('保存成功')
          this.isShowSpace = false
          this.spaceInit()
          this.spaceForm = {
            // 分类名称
            name: '',
            // 分类id
            ids: [],
            // 排序
            sort: 0,
            // 备注
            description: '',
          }
        } else {
          message.error('保存失败')
        }
      })
    },
    // 文件上传
    handleRemove(file) {
      this.fileForm.filePath = null
      this.fileName = ''
      return true
    },
    beforeUpload(file) {
      this.fileName = file.name
      // 正在上传
      this.fileForm.filePath = file
      const formData = new FormData()
      formData.append('file', file)
      dataService.previewExcel(formData).then((res) => {
        // 随机生成表名
        this.fileForm.physicalTableName = 'dws_dsjsj_'
        this.fileForm.noteTableName = file.name.split('.')[0]
        this.fileData = res.data
      })
      return false
    },
    handleUploadOk() {
      this.$refs.fileFormRef.validate((valid) => {
        if (valid) {
          this.isShowFileUpload = false
        }
      })
    },
    handleChange(val, name, index) {
      if (name === 'dataLength') {
        if (this.fileData[index].columnType === 'INT') {
          if (val > 30) {
            message.error('最大长度为30')
            this.fileData[index].dataLength = 30
            return false
          }
        }
        if (this.fileData[index].columnType === 'STRING') {
          if (val > 1000) {
            message.error('字符串类型长度不能超过1000,请改为长字符串')
            this.fileData[index].dataLength = 1000
            return false
          }
        }
      }
      if (name === 'pointNum') {
        if (val > 10) {
          message.error('最大长度为20')
          this.fileData[index].pointNum = 20
          return false
        }
      }

      if (name === 'columnType') {
        if (val === 'INT') {
          this.fileData[index].dataLength = 30
        } else if (val === 'STRING') {
          this.fileData[index].dataLength = 1000
        } else if (val === 'TEXT') {
          this.fileData[index].dataLength = 3000
        } else if (val === 'DECIMAL') {
          this.fileData[index].dataLength = 30
        } else if (val === 'BIGINT') {
          this.fileData[index].dataLength = 30
        }
      }
      this.fileData.forEach((item) => {
        if (item.columnIndex === index) {
          item[name] = val
        }
      })
    },
    handleUpload() {
      // 正在上传
      const formData = {
        eventId: 'save',
        inputs: [
          {
            name: 'id',
            value: this.onEditId,
          },
          {
            name: 'classifyId',
            value: this.fileForm.classifyId[this.fileForm.classifyId.length - 1] || 0,
          },
          {
            name: 'classifyName',
            value: this.fileForm.classifyName,
          },
          {
            name: 'filePath',
            value: '',
          },
          {
            name: 'physicalTableName',
            value: this.fileForm.physicalTableName,
          },
          {
            name: 'noteTableName',
            value: this.fileForm.noteTableName,
          },
          {
            name: 'description',
            value: this.fileForm.description,
          },
        ],
        pageFlowId: '08ecc6f9-ed1d-4559-98ea-76a0e9661d6a',
        pagePath: 'audit/datacube/iamUploadFile',
      }
      this.loading = true

      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const formTable = new FormData()
          formTable.append('file', this.fileForm.filePath)
          formTable.append(
            'tableInfoJson',
            JSON.stringify({
              tableName: this.fileForm.physicalTableName,
              tableComment: this.fileForm.noteTableName,
              fileStructures: this.fileData,
            })
          )
          dataService.createTable(formTable).then((res) => {
            if (res.data) {
              message.success('创建成功')
              this.isShowFile = false
              dataService.saveMySpaceFile(formData).then((res) => {
                if (res.data) {
                  message.success('保存成功')
                  // this.spaceInit()
                  this.$refs.dataTableSpace.refresh()
                  this.onEditId = null
                  this.clearInfo()
                } else {
                  message.error('保存失败')
                }
              })
            } else {
              message.error('创建失败')
              this.clearInfo()
            }
          })
        } else {
          return false
        }
      })
    },
    // 查看文件内容
    handleView(id) {
      dataService.queryData(id).then((res) => {
        const data = res.data
        this.fileViewColumns = Object.keys(data[0]).map((item) => {
          return {
            title: item,
            dataIndex: item,
          }
        })
        this.fileViewData = data
      })
    },
    exportData(e) {
      dataService.exportData(this.dataRef.id).then((res) => {
        // 导出excel
        const data = res.data
        const fileName = this.dataRef.name
        const blob = new Blob([data])
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = fileName + '.xlsx'
        link.click()
        URL.revokeObjectURL(link.href)
        document.body.removeChild(link)
      })
    },
    handleChange1(e) {
      // 如果长度大于1
      if (e.length >= 1) {
        this.expressions1[2].stringValue = e[e.length - 1]
      } else {
        this.expressions1[2].stringValue = ''
      }
      // 报表
      // this.expressions1[0].stringValue = e[e.length - 1] || ''
    },
    onChangeYear(e) {
      // 年份信息
      if (!e) {
        this.expressions1[1].stringValue = ''
        return
      }
      this.expressions1[1].stringValue = e.format('YYYY') || ''
    },
    onChangeMonth(e) {
      // 月份信息
      if (!e) {
        this.expressions1[1].stringValue = ''
        return
      }

      this.expressions1[1].stringValue = e.format('YYYYMM') || ''
    },
    search() {
      this.expressions1 = [...this.expressions1]
    },
    caiwuView(e) {
      // window.open(`https://10.104.32.31:9999/prview.html?fileId=${e.esUuid}`)
      // 生产环境
      const token = this.$store.state.sd.login.tokens.access_token
      const baseUrl = appConfig.searchBaseUrl
      window.open(
        `${baseUrl}prview.html?fileId=${e.esUuid}&baseUrl=${baseUrl}esapi/wps/preview/url&token=${token}`
      )
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;

.wrap-height {
  position: relative;
  height: 100%;

  .row-height {
    display: flex;
    flex: auto;
    gap: 10px;
    height: 100%;

    .leftcard {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 20%;
      height: 100%;
      background: $body-background;
    }

    .leftcardspace {
      position: relative;
      height: calc(50% - 20px);
      overflow-x: hidden;
      overflow-y: auto;
      border: 1px dotted $border-color-base;

      .title {
        padding: 5px;
        text-align: center;
      }
    }

    .leftcardspacetree {
      height: calc(100% - 0px);
      overflow-x: hidden;
      overflow-y: auto;
    }

    .leftcardspaceedit {
      position: absolute;
      bottom: 0;
      display: flex;
      gap: 40px;
      align-items: center;
      justify-content: center;
      width: 100%;

      .ant-btn {
        width: 100px;
      }
    }

    .rightcard {
      flex: 1;
      width: calc(100% - 20%);
      height: 100%;
    }
  }
}

:deep(.sd-body .ant-card-body) {
  height: 100%;
  padding: 2px !important;
}

.ant-upload-text {
  font-size: 12px;
}

.dataclass {
  :global(.projectlist .ant-table-empty .ant-table-body) {
    overflow-x: hidden !important;
  }

  :global(span > .ant-btn:nth-child(2)) {
    color: #fff;
    background-color: #1890ff;
    border-color: #1890ff;
  }

  // :global(.ant-table-placeholder) {
  //   width: auto;
  // }
}

.dataTable {
  width: 100%;
  height: calc(100% - 150px);
}

.tableHeader {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.caiwu-width {
  width: 200px !important;
}
</style>