sgxt_web/src/views/backOfficeSystem/ExcavationResearch/PreliminaryExcavations/components/IntelligentParsing copy.vue

<template>
  <!-- 弹框 -->
  <el-dialog v-model="dialogVisible" title="智能解析数据" width="80vw">
    <div class="infoCnt">
      <div class="baseInfo">
        <div v-for="(item, index) in tableData" :key="index" >
          发掘文本{{ index + 1 }}:<span class="text-danger">{{ item.fjWb }}</span>
        </div>
      </div>
      <MyTable
        :tableData="pageData.dtoList"
        :tableColumn="pageData.tableColumn"
        :tableHeight="pageData.tableHeight"
        :key="pageData.keyCount"
        :tableConfiger="pageData.tableConfiger"
        :controlsWidth="pageData.controlsWidth"
        :row-class-name="({ row }) => (row.status ? '' : 'row-deleted')"
      >
        <!-- 管辖单位 -->
        <template #gxDwDm="{ row }">
          <el-select
            v-model="row.gxDwDm"
            placeholder="请选择管辖单位"
            style="width: 130px"
            @change="handleDeptChange('gxDwMc', $event, row)"
            :disabled="!row.status"
          >
            <el-option v-for="item in deptList" :key="item.value" :label="item.label" :value="item.value.toString()"/>
          </el-select>
        </template>
        <!-- 是否关注 -->
        <template #sfGz="{ row }">
          <el-radio-group v-model="row.sfGz">
            <el-radio v-for="(item, index) in D_BZ_SF" size="large" :key="index" :label="item.zdmc || item.label" :value="item.dm || item.value"></el-radio>
          </el-radio-group>
        </template>
        <!-- 管辖单位 -->
        <template #ryFjZp="{ row }"> 照片上传 </template>
        <template :key="idx" v-for="(item,idx) in pageData.tableColumn.filter((col) => !['gxDwDm', 'sfGz', 'ryFjZp'].includes(col.prop) )"  #[item.prop]="{ row }">
          <el-input style="width: 100px" v-model="row[item.prop]" :placeholder="'请输入' + item.label"  :disabled="!row.status"  />
        </template>
        <!-- 操作列 -->
        <template #controls="{ row, $index }">
          <el-link v-if="row.status" type="danger" @click="delDictItem($index)">删除</el-link>
          <el-link v-else type="primary" @click="recover($index)"> 恢复 </el-link>
        </template>
      </MyTable>
      <div class="stats">
        共 {{ pageData.dtoList.length }} 条数据， 其中
        {{ pageData.dtoList.filter((x) => !x.status).length }} 条已标记删除
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitData"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import MyTable from "@/components/aboutTable/MyTable.vue";
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { reactive, ref, defineEmits,onMounted, getCurrentInstance, defineExpose } from "vue";
import { selectUserDeptPage } from "@/api/user-manage";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const { D_BZ_SF } = proxy.$dict("D_BZ_SF"); //获取字典数据
const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(['upadate'])
const dialogVisible = ref(false);
const pageData = reactive({
  dtoList: [],
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "checkBox",
    loading: false
  },
  tableHeight: 330,
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  },
  controlsWidth: 80,
  tableColumn: [
    { label: "管辖单位", prop: "gxDwDm", showSolt: true, width: 200 },
    { label: "姓名", prop: "ryXm", showSolt: true, width: 130 },
    { label: "手机号码", prop: "rySjhm", showSolt: true, width: 130 },
    { label: "身份证号码", prop: "rySfzh", showSolt: true, width: 130 },
    { label: "户籍地址", prop: "ryHjdz", showSolt: true, width: 130 },
    { label: "护照号码", prop: "ryHzhm", showSolt: true, width: 130 },
    { label: "现住地址", prop: "ryXzdz", showSolt: true, width: 130 },
    { label: "银行卡号", prop: "ryYhkh", showSolt: true, width: 130 },
    { label: "是否关注", prop: "sfGz", showSolt: true, width: 130 },
    { label: "附件照片", prop: "ryFjZp", showSolt: true, width: 130 }
  ]
});
const deptList = ref([]); //部门列表
onMounted(() => {
  getdepartmentList();
});
// 获取部门列表
const getdepartmentList = () => {
  selectUserDeptPage().then((res) => {
    deptList.value = res?.records.map((item) => ({
      label: item.deptName,
      value: item.deptId
    }));
  });
};
const handleDeptChange = (nameField, selectedValue, row) => {
  // 找到选中的部门
  const selectedDept = deptList.value.find((item) => item.value.toString() === selectedValue);
  // 更新名称
  row[nameField] = selectedDept ? selectedDept.label : "";
};
const init = () => {
  dialogVisible.value = true;
  qcckGet({}, "/mosty-gsxt/tbGsxtRqfjRy/createCbfj").then((res) => {
    pageData.dtoList = res.map((item) => ({ ...item,  status: true }));
  }).catch(() => {
    pageData.tableConfiger.loading = false;
  });
};
// 删除方法
const delDictItem = (index) => {
  pageData.dtoList[index].status = false;
  ElMessage.success("已标记为删除");
};
// 恢复方法
const recover = (index) => {
  pageData.dtoList[index].status = true;
  ElMessage.success("已恢复");
};
// 提交
const submitData = () => {
  const validData = pageData.dtoList.filter((item) => item.status);
  qcckPost(validData, "/mosty-gsxt/tbGsxtRqfjRy/saveList").then((res) => {
    ElMessage.success("新增成功");
    dialogVisible.value = false;
    emit("upadate");
    close();
  })
};

defineExpose({ init });
</script>

<style lang="scss" scoped>
/* 为已删除的行添加特殊样式 */
.el-table .row-deleted {
  background-color: #fef0f0;
  color: #f56c6c;
}


.infoCnt{
  height: 63vh;
}
.baseInfo{
  font-size: 16px;
  max-height: 230px;
  overflow: hidden;
  overflow-y: auto;
  line-height: 24px;
  color: #000;
  font-weight: 600;
  letter-spacing: 1px;
  .text-danger {
    color: #333;
    font-weight: normal;
  }
}
</style>