td_official/src/views/design/drawingreview/index.vue

<template>
  <div class="p-2 drawingreview">
    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['design:drawingreview:add']">新增</el-button>
          </el-col>
          <right-toolbar @queryTable="getList"></right-toolbar>
        </el-row>
      </template>
      <el-table v-loading="loading" :data="drawingreviewList">
        <el-table-column type="index" label="序号" width="100" align="center" />
        <el-table-column label="文件名称" align="center" prop="fileName" />
        <el-table-column label="流程状态" align="center">
          <template #default="scope">
            <dict-tag :options="wf_business_status" :value="scope.row.auditType" />
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-row :gutter="10" class="mb8"
              ><el-col :span="1.5" v-if="scope.row.auditType === 'draft' || scope.row.auditType === 'cancel' || scope.row.auditType === 'back'">
                <el-button size="small" type="primary" icon="Edit" @click="handleUpdate(scope.row)">审核</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button type="warning" size="small" icon="View" v-if="scope.row.auditType != 'draft'" @click="handleViewInfo(scope.row)"
                  >查看流程</el-button
                > </el-col
              ><el-col :span="1.5">
                <el-button type="warning" size="small" icon="View" v-if="scope.row.auditType != 'draft'" @click="handleViewHistory(scope.row)"
                  >查看历史</el-button
                >
              </el-col></el-row
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
      <el-form ref="drawingreviewFormRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="图纸文件" prop="auditType">
          <el-upload ref="uploadRef" class="upload-demo" :http-request="importExcel">
            <template #trigger>
              <el-button type="primary">上传excel</el-button>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="dialog.visible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog draggable title="查看历史" v-model="dialogHistory" width="800px" append-to-body>
      <div>
        <span>选择历史退回记录：</span>
        <el-select v-model="hisId" placeholder="请选择" style="width: 240px" @change="handleShowInfo">
          <el-option v-for="item in hisList" :key="item.id" :label="item.id" :value="item.id" />
        </el-select>
        <div style="margin-top: 20px">
          <span style="color: #0d9df5">查看excel文件</span>
          <div style="margin-top: 20px" class="table-content" id="table-content">
            <el-row class="mb20" style="display: flex; justify-content: center">
              <h2>设计验证表</h2>
            </el-row>
            <el-row class="mb10" style="display: flex; justify-content: space-between">
              <div class="head-text">
                <span>编号：</span>
                <span>{{ examineForm.num }}</span>
              </div>
              <div class="head-text"></div>
            </el-row>
            <table style="width: 100%" border="1" cellspacing="1">
              <thead>
                <tr>
                  <th colspan="2">工程名称</th>
                  <td class="th-bg" colspan="10">{{ examineForm.projectName }}</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th colspan="2">子项名称</th>
                  <td class="th-bg" colspan="6">{{ examineForm.subprojectName }}</td>
                  <th colspan="2">设计阶段</th>
                  <td class="th-bg" colspan="2">{{ examineForm.stage }}</td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <th colspan="2">专业</th>
                  <td class="th-bg" colspan="2">{{ examineForm.professional }}</td>
                  <th colspan="2">卷册</th>
                  <td class="th-bg" colspan="2">{{ examineForm.volume }}</td>
                  <th colspan="2">设计人</th>
                  <td class="th-bg" colspan="2">{{ examineForm.designer }}</td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <th colspan="2">验证内容</th>
                  <td class="th-bg" colspan="10">{{ examineForm.verificationContent }}</td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <th colspan="6">验证意见</th>
                  <th class="th-bg" colspan="6">执行意见</th>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td colspan="6">
                    <div style="height: 400px">{{ examineForm.verificationOpinion }}</div>
                  </td>
                  <td class="th-bg" colspan="6">
                    <div style="height: 400px">{{ examineForm.executionOpinion }}</div>
                  </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td colspan="6">
                    <div style="display: flex; align-items: center; justify-content: space-between">
                      <span> 校审： {{ examineForm.proofreading }} </span>
                      <span> {{ dateFormat(examineForm.proofreadingDate) }}</span>
                    </div>
                  </td>
                  <td rowspan="2" colspan="6">
                    <div>执行人： {{ examineForm.executor }}</div>
                    <div style="display: flex; align-items: center; justify-content: flex-end">
                      {{ dateFormat(examineForm.executorDate) }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="th-bg" colspan="6">
                    <div style="display: flex; align-items: center; justify-content: space-between">
                      <span>审核 ： {{ examineForm.audit }}</span>
                      <span> {{ dateFormat(examineForm.auditDate) }}</span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="Drawingreview">
import { computed, getCurrentInstance, toRefs } from 'vue';
import {
  listDrawingreview,
  addDrawingreview,
  updateDrawingreview,
  ObtainHistoricalDesignDrawingsForReview,
  drawingreview
} from '@/api/design/drawingreview';
import { useUserStoreHook } from '@/store/modules/user';
import { fromFile } from 'geotiff';
const { proxy } = getCurrentInstance();
const { wf_business_status } = toRefs(proxy?.useDict('wf_business_status'));

const userStore = useUserStoreHook();
const loading = ref(true);
const buttonLoading = ref(false);
const total = ref(0);
const drawingreviewList = ref([]);
const hisList = ref([]);
const hisId = ref('');
const fromData = new FormData();
const currentProject = computed(() => userStore.selectedProject);
const dialog = reactive({
  visible: false,
  title: ''
});
const dialogHistory = ref(false);
const initexamineForm = {
  id: undefined,
  projectId: currentProject.value?.id,
  auditType: undefined,
  remark: undefined
};
const drawingreviewFormRef = ref();
const data = reactive({
  form: { ...initexamineForm },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    projectId: currentProject.value?.id,
    auditType: undefined,
    params: {}
  },
  rules: {
    id: [{ required: true, message: '项目ID不能为空', trigger: 'blur' }]
  }
});
const { queryParams, form, rules } = toRefs(data);
const examineForm = ref({
  audit: '',
  auditDate: '',
  auditId: '',
  designer: '',
  executionOpinion: '',
  executor: '',
  executorDate: '',
  executorId: '',
  id: '1',
  num: '',
  professional: '',
  projectId: '',
  projectName: '',
  proofreading: '',
  proofreadingDate: '',
  proofreadingId: '',
  stage: '',
  subprojectId: '',
  subprojectName: '',
  verificationContent: '',
  verificationOpinion: '',
  volume: ''
});
// 时间 格式化 YYYY-MM-DD  改为 YYYY年MM月DD日
const dateFormat = (v) => {
  if (!v) return '-';
  let time = new Date(v);
  let y = time.getFullYear();
  let MM = time.getMonth() + 1;
  MM = MM < 10 ? '0' + MM : MM;
  let d = time.getDate();
  d = d < 10 ? '0' + d : d;
  return y + '年' + MM + '月' + d + '日';
};
/** 查询设计-图纸评审列表 */
const getList = async () => {
  loading.value = true;
  const res = await listDrawingreview(queryParams.value);
  drawingreviewList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};
/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = '添加设计-图纸评审';
};
/** 表单重置 */
const reset = () => {
  form.value = { ...initexamineForm };
  drawingreviewFormRef.value?.resetFields();
};
function handleUpdate(row) {
  proxy.$tab.closePage(proxy.$route);
  proxy.$router.push({
    path: `/design-management/drawingreview/indexEdit`,
    query: {
      id: row.id,
      type: 'update'
    }
  });
}
function handleViewInfo(row) {
  proxy.$tab.closePage(proxy.$route);
  proxy.$router.push({
    path: `/design-management/drawingreview/indexEdit`,
    query: {
      id: row.id,
      type: 'view'
    }
  });
}
const handleViewHistory = async (row) => {
  // 查看历史流程记录
  dialogHistory.value = true;
  let res = await ObtainHistoricalDesignDrawingsForReview(row.id);
  console.log(res);
  hisList.value = res;
  hisId.value = hisList.value[0].id;
  getDetails(hisId.value);
};
const handleShowInfo = (val) => {
  getDetails(val);
};
const getDetails = async (id) => {
  let res = await drawingreview(id);
  examineForm.value = res.data;
};
/** 提交按钮 */
const submitForm = () => {
  drawingreviewFormRef.value?.validate(async (valid) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id) {
        await updateDrawingreview(form.value).finally(() => (buttonLoading.value = false));
      } else {
        await addDrawingreview(form.value, fromData).finally(() => (buttonLoading.value = false));
      }
      proxy?.$modal.msgSuccess('操作成功');
      dialog.visible = false;
      await getList();
    }
  });
};
// 上传excel
function importExcel(options) {
  fromData.append('file', options.file);
}
onMounted(() => {
  getList();
});
</script>
<style lang="scss">
.drawingreview {
  .upload-demo {
    width: 100% !important;
  }
}

table {
  border-collapse: collapse; //合并为一个单一的边框
  border-color: rgba(199, 199, 199, 1); //边框颜色按实际自定义即可
}
thead {
  tr {
    th {
      background-color: rgba(247, 247, 247, 1); //设置表格标题背景色
      height: 35px; //设置单元格最小高度
      text-align: center;
      letter-spacing: 5px;
      padding: 15px;
    }
    td {
      text-align: left;
      height: 35px; //设置单元格最小高度
      padding: 15px;
    }
    .th-bg {
      background-color: rgba(247, 247, 247, 1);
    }
  }
}
tbody {
  tr {
    td {
      text-align: left;
      height: 40px; //设置单元格最小高度
      padding: 15px;
    }
    th {
      height: 35px; //设置单元格最小高度
      text-align: center;
      letter-spacing: 5px;
      padding: 15px;
    }
  }
}
.table-content {
  box-shadow: 0px 0px 10px #ddd;
  padding: 20px;
  position: relative;
}
</style>