@scenetechnology/cj_element_table 0.0.1

package/packages/components/exportTable.vue

@@ -0,0 +1,361 @@
+<template>
+    <el-dialog v-model="modelValue" title="列表设置" :width="800">
+        <div class="content">
+            <div style="flex: 3;">
+                <div class="classTitle">
+                    选择导出范围
+                </div>
+                <el-radio-group v-model="export_type" @change="change_tabledata">
+                    <el-radio :value="0">全部数据</el-radio>
+                    <el-radio :value="1">当前列表数据</el-radio>
+                    <el-radio :value="2">已选中数据</el-radio>
+                  </el-radio-group>
+                <div class="classTitle">
+                    选择列表显示字段
+                    <ElCheckbox style="margin-left:5px;font-weight: 400;font-size: 14px;color: #666666;" :indeterminate="indeterminate" v-model="checkAll" @click.prevent.native="handleCheckAll">全选</ElCheckbox>
+                </div>
+                <ElCheckboxGroup v-model="checkAllGroup" >
+                    <el-checkbox :disabled="item.require" @change="change_check(item, $event)" v-for="(item, index) in columnsList"  :key="index" :label="item.label">
+                        {{ item.label }} {{ item.checked }}
+                        <span v-if="item.require">（必选字段）</span>
+                    </el-checkbox>
+                </ElCheckboxGroup>
+            </div>
+            <div style="flex:2;">
+                <div style="display: flex;align-items: center;justify-content: space-between;">
+                    <span style="font-weight: 400;font-size: 15px;color: #333333;">已选择字段</span>
+                </div>
+                <tuo-drag v-if="modelValue"  @updatesortColumns="updatesortColumns" ref="tuoDrags" :checkAllGroupObj="checkAllGroupObj" :initialSortColumns="sortColumns"></tuo-drag>
+            </div>
+        </div>
+        <template #footer>
+            <ElButton @click="handleReset">取消</ElButton>
+            <ElButton type="primary" @click="handleSubmit('custom')" :loading="exportBtnLoading" style="margin-left: 8px">导出</ElButton>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, onMounted } from 'vue'
+import {
+  ElCheckbox,
+  ElCheckboxGroup,
+  ElPagination,
+  ElButton,
+  ElDropdown,
+  ElDropdownMenu,
+  ElDropdownItem,
+  ElInput,
+  ElDialog,
+  ElSelect,
+  ElOption
+} from 'element-plus'
+import * as exportExcel from './exportExcel.js'
+// import { getToken } from '@/libs/util'
+import tuoDrag from './tuo-drag.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  exportXlsxName:{
+    type:String
+  },
+  columnsList: {
+    type: Array,
+    default: () => []
+  },
+  tableData: {
+    type: Array,
+    default: () => []
+  },  
+  columnSetting: {
+    type: Object,
+    default: () => ({})
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: [String, Number],
+    default: '800px'
+  }
+})
+
+const emit = defineEmits(['update:modelValue',"updateTable"])
+
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+const exportBtnAllLoading = ref(false)
+const exportBtnLoading = ref(false)
+const sortColumns = ref([])
+const columnsOptionList = ref([])
+const modalLoading = ref(false)
+const indeterminate = ref(false)
+const checkRequireGroup=ref([])
+const checkAll = ref(false)
+const checkAllGroup = ref([])
+const tempCheckAllGroup=ref([])
+const checkAllGroupObj = ref({})
+const dropSortColumns = ref([])
+const freeze = ref('')
+const tuoDrags = ref(null)
+const table_data_arr=ref([])
+const export_type=ref(0)
+const export_tabledata=ref([])
+const initColumns = (val: any[]) => {
+    checkAllGroup.value = []
+    sortColumns.value = []
+    const tempColumnsOptionList = []
+    val.forEach((item, index) => {
+      tempCheckAllGroup.value.push(item.label)
+      if (item.require) {
+        // checkAllGroup.value.push(item.label)
+        checkRequireGroup.value.push(item.label)
+      }
+      tempColumnsOptionList.push({
+        label: '至第' + (index + 1) + '列',
+        value: index + 1
+      })
+    })
+    tempColumnsOptionList.push({
+      label: '不冻结',
+      value: '不冻结'
+    })
+    if (props.columnSetting.id) {
+      // console.log(props.columnSettingObj)
+      checkAllGroup.value = [...checkAllGroup.value, ...props.columnSetting.content.checkColumnData]
+      freeze.value = props.columnSetting.content.freeze
+    }
+    columnsOptionList.value = tempColumnsOptionList
+    sortColumns.value = [...checkAllGroup.value]
+
+    if (checkAllGroup.value.length === val.length) {
+      checkAll.value = true
+      checkAllGroup.value = tempCheckAllGroup.value
+      indeterminate.value = false
+    } else if (checkAllGroup.value.length > 1) {
+      checkAll.value = false
+      indeterminate.value = true
+    } else {
+      checkAll.value = false
+      indeterminate.value = false
+    }
+}
+
+watch(
+  () => props.columnsList,
+    (val) => {
+      initColumns(val)
+    }
+)
+
+watch(
+  () => props.columnSetting,
+  (newVal) => {
+    if (newVal !== undefined) {
+      initColumns(props.columnsList)
+    }
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  initColumns(props.columnsList)
+})
+const handleCheckAll = () => {
+  if(checkAllGroup.value.length!=tempCheckAllGroup.value.length){ //全选
+    tempCheckAllGroup.value.map(item=>{
+      let status=sortColumns.value.some(sort=>{
+        return item==sort
+      })
+      if(!status){
+        sortColumns.value.push(item)
+      }
+    })
+    sortColumns.value=sortColumns.value.concat([])
+    checkAllGroup.value=tempCheckAllGroup.value
+    checkAllGroup.value=checkAllGroup.value.concat([])
+    checkAll.value=true
+    indeterminate.value=false
+  }else{ //取消全选
+    checkAllGroup.value=checkRequireGroup.value
+    checkAllGroup.value=checkAllGroup.value.concat([])
+    let sort=[]
+    sortColumns.value.map(item=>{
+      checkRequireGroup.value.map(require=>{
+        if(require==item){
+          sort.push(item) 
+        }
+      })
+    })
+    sortColumns.value=sort
+    sortColumns.value= sortColumns.value.concat([])
+    if(checkRequireGroup.value.length==0){ 
+      indeterminate.value=false
+      checkAll.value=false
+    }else{
+      indeterminate.value=true
+      checkAll.value=false
+    }
+    
+  }
+}
+const change_check = (item: any,event) => {
+  if(event){
+    sortColumns.value.push(item.label)
+  }else{
+    sortColumns.value.map((col,index)=>{
+      if(col==item.label){
+        sortColumns.value.splice(index,1)
+      }
+    })
+  }
+  sortColumns.value=sortColumns.value.concat([])
+  console.log(sortColumns.value,event,2222)
+  if (checkAllGroup.value.length === tempCheckAllGroup.value.length) { //判断全选按钮状态
+    indeterminate.value = false
+    checkAll.value = true
+  } else if (checkAllGroup.value.length > 0) {
+    indeterminate.value = true
+    checkAll.value = false
+  } else {
+    indeterminate.value = false
+    checkAll.value = false
+  }
+}
+
+const handleReset = () => {
+  modelValue.value = false
+}
+const isNull = (val: string[]) => {
+   return val === null || val === void 0 || val === '' || (val).toString() === 'NaN'
+}
+
+const updatesortColumns = (val: string[],type) => {
+  if(type=="custom"){
+    table_data_arr.value=val
+  }else{
+    dropSortColumns.value = val
+  }
+}
+const handleSubmit = (type) => {
+      if(type=="custom"){
+        dropSortColumns.value=[]
+        props.columnsList.forEach((item, index) => {
+          sortColumns.value.forEach((item2, index2) => {
+            if(item.label==item2){
+              dropSortColumns.value.push(item)
+            }
+          })
+        })
+        export_tabledata.value=table_data_arr.value[export_type.value]
+      }else{
+        export_tabledata.value=props.tableData
+      }
+    console.log( dropSortColumns.value,export_tabledata.value,111)
+      let columns=[]
+      dropSortColumns.value.map(item => {
+          columns.push({
+              name: item.label??item,
+              _width: 30 // 注意：这里是封装后才能这样写，exceljs table columns 没有width
+          })
+      })
+      // 生成rows
+      let rows = []
+      export_tabledata.value.map(item => {
+          let arr = []
+          dropSortColumns.value.map(sub => {
+              arr.push(!isNull(item[sub.prop]) ? item[sub.prop] : '')
+          })
+          rows.push(arr)
+      })
+      console.log(columns,rows,222)
+      // 表头样式设置 - 生成_cellStyle
+      let _cellStyle = []
+      dropSortColumns.value.map((item, index) => {
+          _cellStyle.push({
+              coords: [index, 0], // 代表表格第一行第一列 [横坐标，纵坐标]
+              style: {
+                  border: {
+                      top: { style: 'thin' },
+                      left: { style: 'thin' },
+                      bottom: { style: 'thin' },
+                      right: { style: 'thin' }
+                  },
+                  alignment: { vertical: 'middle', horizontal: 'center' }
+              },
+          })
+      })
+      exportExcel.$export([
+          {
+              name: 'MyTestTable',
+              ref: 'A1',
+              headerRow: true,
+              totalsRow: false,
+              style: {
+                  theme: 'TableStyleLight1',
+              },
+              columns: columns,
+              rows: rows,
+              _tableBorder: true,
+              _cellStyle: [..._cellStyle],
+              _mergeCells: []
+          }
+      ], {
+          sheetName: 'My Sheet',
+          fileName: props.exportXlsxName,
+      })
+  }
+  defineExpose({ handleSubmit,updatesortColumns })
+</script>
+
+<style scoped>
+.dialog-content {
+  padding: 20px;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+/* :deep(.el-checkbox-group) {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+} */
+.classTitle::before{
+    content: "*";
+    display: inline-block;
+    margin-right: 4px;
+    line-height: 1;
+    font-family: SimSun;
+    font-size: 12px;
+    color: #ed4014;
+}
+.classTitle{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+    font-family: PingFang SC;
+    font-weight: 400;
+    font-size: 15px;
+    color: #333;
+    }
+.content {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+}
+.headerTitle{
+    font-weight: 500;
+    font-size: 16px;
+    color: #1D2027;
+}
+</style>

package/packages/components/historyDialog.vue

@@ -0,0 +1,100 @@
+<template>
+  <ElDialog
+    v-model="dialogVisible"
+    :title="title"
+    :width="1000"
+    :close-on-click-modal="false"
+    @close="handleClose"
+  >
+    <TableComponent ref="tableRef" :maxHeight="400" :initial-query="query" :tableData="tableData" :columns="columns" :show-input-buttons="false" :show-output-buttons="false" :showTableSettingButtons="false" :show-view-setting-buttons="false" @search="handleSearch"/>
+  </ElDialog>
+</template>
+
+<script lang="ts" setup>
+// import { Dialog } from '@/components/Dialog'
+import TableComponent from './index.vue'
+import { ref, watch,onMounted} from 'vue'
+import { ElTable, ElTableColumn, ElPagination,ElDialog, ElScrollbar } from 'element-plus'
+import { useRoute } from 'vue-router'
+import { ImportRecord_index} from '@/api/All.ts'
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: String,
+    default: 'input' //ouput
+  },
+  title: {
+    type: String,
+    default: '导入记录'
+  },
+  width: {
+    type: String,
+    default: '500px'
+  }
+})
+const columns = [
+  { prop: 'create_time', label: '导入时间',required: true },
+  { prop: 'success', label: '导入成功数据条数',required: true },
+  { prop: 'error', label: '导入失败数据条数',required: true }
+]
+
+const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])
+
+const dialogVisible = ref(props.modelValue)
+const tableData = ref()
+const total = ref(0)
+let route_path = ''
+const route = useRoute()
+if(route&&route.name)
+{
+    route_path = route.name
+}
+
+const query = ref({
+  page: 1,
+  rows: 10,
+  tag: route_path
+})
+onMounted(() => {
+  handleSearch()
+})
+
+const handleSearch = (query) => {
+  if(props.type == 'input'){
+      ImportRecord_index(query).then((res) => {
+        tableData.value = res.data
+        total.value = res.data.total
+    })
+  }
+}
+watch(() => props.modelValue, (val) => {
+  dialogVisible.value = val
+})
+watch(() => dialogVisible.value, (val) => {
+  emit('update:modelValue', val)
+})
+const handleClose = () => {
+  dialogVisible.value = false
+}
+</script>
+
+<style scoped>
+.dialog-content {
+  padding: 20px;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>