yjhtgl-web/src/views/dataFilling/fillingIssued.vue

<template>
  <div class="app-container p-2">
    <el-row :gutter="20" class="mb8" style="margin-top: 5px">
      <el-col :span="1.5">
        <el-upload class="upload-demo" :http-request="handleFileUpload" :file-list="fileList" accept=".xlsx, .xls">
          <template #trigger>
            <el-button type="primary">选择Excel文件</el-button>
          </template>
        </el-upload>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="handleNewTemplate">空白模板</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="handleNewTemplate">重新加载</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="handleSaveTemporarily(1)">暂存</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="handleSave(formRef, 2)"> 发布 </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" @click="handleReturn()"> 返回 </el-button>
      </el-col>
    </el-row>
    <el-form ref="formRef" :model="form" :rules="rules">
      <el-row :gutter="20">
        <el-col :lg="30" :xs="24" style="margin-top: -10px">
          <el-row :span="24" :gutter="10">
            <!-- 联系人姓名 -->
            <el-col :span="8">
              <el-form-item label="联系人姓名：" prop="creator_name" label-width="auto">
                <el-input v-model="form.creator_name" placeholder="请输入联系人姓名" style="width: 300px"></el-input>
              </el-form-item>
            </el-col>
            <!-- 联系电话 -->
            <el-col :span="8">
              <el-form-item label="联&nbsp系&nbsp电&nbsp话：" prop="creator_phone" label-width="auto">
                <el-input v-model="form.creator_phone" placeholder="请输入联系电话" style="width: 300px"></el-input>
              </el-form-item>
            </el-col>
            <!-- 截止时间 -->
            <el-col :span="8">
              <el-form-item label="截&nbsp止&nbsp时&nbsp间&nbsp：" prop="end_time">
                <el-date-picker
                  v-model="form.end_time"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  time-format="HH:mm"
                  type="datetime"
                  placeholder="选择截止时间"
                  style="width: 300px"
                  @change="handleTimeChange"
                />
              </el-form-item>
            </el-col>
            <!-- 操作按钮 -->
            <el-col :span="8">
              <el-form-item label="表&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp名：" prop="table_name" label-width="auto">
                <el-input v-model="form.table_name" placeholder="请输入表名" style="width: 300px"></el-input>
              </el-form-item>
            </el-col>
            <!-- 选择填报人 -->
            <el-col :span="16">
              <el-form-item label="选择填报人：" prop="user_ids" label-width="auto" style="font-weight: bold">
                <div>
                  <el-tag
                    v-for="tag in selectedReporter"
                    :key="tag"
                    closable
                    :disable-transitions="false"
                    style="margin-right: 10px"
                    @close="handleClose(tag)"
                  >
                    {{ tag.label }}
                  </el-tag>
                </div>
                <el-button @click="showSelect">点击选择</el-button>
              </el-form-item>
            </el-col>
            <!--                    <el-col :span="8">-->
            <!--                      <el-button type="primary" @click="handleReport()"> 智能识别 </el-button>-->
            <!--                    </el-col>-->
          </el-row>
        </el-col>
      </el-row>
    </el-form>

    <div style="height: 350px">
      <hot-table v-if="showTable" ref="wrapper" :data="hotData" :settings="hotSettings" />
    </div>
  </div>
  <informantSelect
    v-model="isShowSelect"
    v-isShowSelect
    :tree-data="treeData"
    :default-check-data="form.user_ids"
    @confirm="handleContactSelectData"
  />
</template>

<script setup lang="ts">
import * as XLSX from 'xlsx';
import { fillingAdd, fillingList } from '@/api/dataFilling/fillingManage';
import { HotTable } from '@handsontable/vue3';
import 'handsontable/languages';
import 'handsontable/dist/handsontable.full.css';
import { registerAllModules } from 'handsontable/registry';
import informantSelect from './informantSelect.vue';
import { getPhoneList } from '@/api/informationissue/informationissue';
import { deepClone } from '@/utils';
import { validatePhone } from '@/utils/validate';
registerAllModules();

const props = defineProps<{
  id: string | number;
}>();
const fileList = ref([]);
const { proxy } = getCurrentInstance();
const emits = defineEmits(['close', 'confirm']);
const formRef = ref('');
const detailData = ref({
  title: '表单数据',
  start: '2024-10-15 17:02:22',
  end: '2024-10-15 18:00:00'
});
const hotData = ref([]);
const field_names = ref([]);
const selectedReporter = ref(null);
const isShowSelect = ref(false);
let treeData = ref([]);

// 初始化表格数据
onMounted(async () => {
  await fetchData();
  await fetchTreeData();
});

const showTable = ref(false);
const handleNewTemplate = () => {
  showTable.value = true;
  created();
};

const form = ref({
  table_name: '',
  end_time: '',
  status: '0',
  issued_status: '',
  period_type: '',
  creator_name: '',
  creator_phone: '',
  field_names: [],
  user_ids: []
});
const rules = {
  table_name: [{ required: true, message: '表名不能为空', trigger: 'blur' }],
  end_time: [{ required: true, message: '截止时间不能为空', trigger: 'blur' }],
  creator_name: [{ required: true, message: '联系人姓名不能为空', trigger: 'blur' }],
  creator_phone: [
    { required: true, message: '联系电话不能为空', trigger: 'blur' },
    { validator: validatePhone, message: '请输入正确格式的联系电话', trigger: 'blur' }
  ],
  user_ids: [{ required: true, message: '请选择填报人', trigger: 'blur' }]
};
const handleSaveTemporarily = async (statuCode) => {
  if (hotData.value && hotData.value[0] && hotData.value[0].length > 0) {
    const data2 = [];
    hotData.value[0].forEach((item) => {
      if (!!item) {
        data2.push(item);
      }
    });
    form.value.field_names = data2;
  }
  form.value.issued_status = statuCode;
  fillingAdd(form.value).then(() => {
    proxy.$modal.msgSuccess('暂存成功');
    emits('close');
  });
};

const handleSave = async (formEl, statuCode) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      const data2 = [];
      hotData.value[0].forEach((item) => {
        if (!!item) {
          data2.push(item);
        }
      });
      form.value.field_names = data2;
      form.value.issued_status = statuCode;
      fillingAdd(form.value).then((res) => {
        proxy.$modal.msgSuccess('发布成功');
        emits('close');
      });
    } else {
      nextTick(() => {
        let isError = document.getElementsByClassName('is-error');
        isError[0].scrollIntoView({
          // 滚动到指定节点
          // 值有start,center,end，nearest，当前显示在视图区域中间
          block: 'center',
          // 值有auto、instant,smooth，缓动动画（当前是慢速的）
          behavior: 'smooth'
        });
      });
      proxy.$modal.msgError('表单校验失败');
      return false;
    }
  });
};

const handleReturn = () => {
  emits('close');
};

const created = () => {
  let data = [];
  for (let i = 0; i < 10; i++) {
    let arr = [];
    for (let x = 0; x < 10; x++) {
      arr.push('');
    }
    data.push(arr);
  }
  showTable.value = false;
  nextTick(() => {
    hotData.value = data;
    showTable.value = true;
  });
};
const hotSettings = reactive({
  language: 'zh-CN',
  colHeaders: true,
  rowHeaders: true,
  autoColumnSize: true,
  width: '100%', // auto  or  100%
  height: '100%', // auto  or  100%
  licenseKey: 'non-commercial-and-evaluation', // 隐藏版权文字
  colWidths: 129, // 默认单元格宽度
  rowHeights: 28, // 默认单元格高度
  wordWrap: true, // 单元格文字是否换行展示
  contextMenu: {
    // 自定义右键菜单
    items: {
      'row_above': {
        name: '向上插一行'
      },
      'row_below': {
        name: '向下插一行'
      },
      'col_left': {
        name: '向左插一列'
      },
      'col_right': {
        name: '向右插一列'
      },
      'hsep1': '---------', // 分隔线
      'remove_row': {
        name: '删除当前行'
      },
      'remove_col': {
        name: '删除当前列'
      },
      'clear_column': {
        name: '清空当前列'
      },
      'hsep2': '---------', // 必须和上次的变量名不一样
      'undo': {
        name: '撤销'
      },
      'cut': {
        name: '剪切'
      },
      'copy': {
        name: '复制'
      },
      // 'alignment': {
      //   name: '对齐'
      // },
      // 'hsep3': '---------',
      // 'commentsAddEdit': {
      //   // 必须开启 comments: true
      //   name: '添加备注'
      // },
      // 'commentsRemove': {
      //   // 必须开启 comments: true
      //   name: '删除备注'
      // },
      // 'freeze_column': {
      //   // 必须开启 manualColumnFreeze: true
      //   name: '固定列'
      // },
      // 'unfreeze_column': {
      //   // 必须开启 manualColumnFreeze: true
      //   name: '取消固定列'
      // }
    }
  }
});
const handleFileUpload = ({ file }) => {
  const reader = new FileReader();
  reader.onload = (event) => {
    showTable.value = false;
    nextTick(() => {
      const data = new Uint8Array(event.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      const firstSheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[firstSheetName];
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
      hotData.value = jsonData.slice(1); // 假设第一行是标题行，我们跳过它
      showTable.value = true;
    });
  };
  reader.readAsArrayBuffer(file);
  fileList.value = [];
  return { success: true, file }; // 告诉 el-upload 上传成功（尽管实际上没有发送到服务器）
};

const showSelect = () => {
  isShowSelect.value = true;
};

const fetchTreeData = () => {
  return getPhoneList().then((response) => {
    treeData.value = response.data;
    if (form.value && form.value.user_ids) {
      let arr = [];
      form.value.user_ids.forEach((item) => {
        let res = findNodeById(treeData.value, item);
        if (!!res) {
          arr.push(res);
        }
      });
      selectedReporter.value = arr;
    }
  });
};

const handleContactSelectData = (data) => {
  selectedReporter.value = deepClone(data);
  const data1 = [];
  data.forEach((item) => {
    data1.push(item.id);
  });
  form.value.user_ids = data1;
};

const handleClose = (tag: string) => {
  selectedReporter.value.splice(selectedReporter.value.indexOf(tag), 1);
  form.value.user_ids.splice(form.value.user_ids.indexOf(tag.id), 1);
};

const fetchData = () => {
  return fillingList(props.id).then((res) => {
    form.value.creator_name = res.report_info.creator_name;
    form.value.creator_phone = res.report_info.creator_phone;
    form.value.end_time = res.report_info.end_time;
    form.value.table_name = res.report_info.table_name;
    form.value.user_ids = res.report_info.user_ids;
  });
};
function findNodeById(data, targetId) {
  for (const node of data) {
    if (node.id === targetId) {
      return { id: node.id, label: node.label }; // 找到匹配节点，直接返回
    }
    if (node.children && node.children.length > 0) {
      const found = findNodeById(node.children, targetId); // 递归搜索子节点
      if (found) return { id: found.id, label: found.label }; // 子节点中找到则返回
    }
  }
  return null; // 未找到返回 null
}
</script>

<style scoped>
.app-container {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.report-period {
  margin-top: 10px;
  font-size: 14px;
  color: #606266;
}
.editable-span {
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.editable-span[contenteditable='true'] {
  white-space: normal;
  outline: none; /* 移除编辑时的焦点边框 */
}
.editable-span[contenteditable='true']:empty::before {
  content: attr(data-placeholder); /* 可选：为空时显示占位符 */
  color: #999;
}
.editable-header {
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.editable-header[contenteditable='true'] {
  white-space: normal;
  outline: none; /* 移除编辑时的焦点边框 */
}
.editable-header[contenteditable='true']:empty::before {
  content: attr(data-placeholder); /* 可选：为空时显示占位符 */
  color: #999;
}
.upload-demo {
  display: inline-block;
  margin-bottom: 20px;
}
.flex {
  flex-wrap: wrap;
}
</style>