123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188 |
- <template>
- <div>
- <div v-show="!writeFormState.show && !formDetailState.show" class="app-container">
- <div>
- <transition name="fade">
- <div v-show="showSearch">
- <el-form ref="queryFormRef" :model="queryParams">
- <el-row :gutter="20">
- <el-col :span="6">
- <el-form-item label="表格名称:" prop="table_name" label-width="auto">
- <el-input v-model="queryParams.table_name" placeholder="请输入巡查人"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="6">
- <!-- <el-form-item label="任务状态:" prop="submission_status">-->
- <!-- <el-radio-group v-model="queryParams.submission_status">-->
- <!-- <el-radio value="0" size="large">待填报</el-radio>-->
- <!-- <el-radio value="1" size="large">已上报</el-radio>-->
- <!-- </el-radio-group>-->
- <!-- </el-form-item>-->
- <el-form-item label="任务状态:" prop="submission_status">
- <el-select
- v-model="queryParams.submission_status"
- clearable
- placeholder="请选择"
- style="width: 240px"
- >
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="6">
- <el-button type="primary" @click="handleQuery">查询</el-button>
- <el-button @click="resetQuery">重置</el-button>
- </el-col>
- </el-row>
- </el-form>
- </div>
- </transition>
- <!-- 表格组件 -->
- <el-table ref="multipleTable" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
- <el-table-column label="序号" align="center" width="80">
- <template #default="scope">
- {{ (queryParams.page - 1) * queryParams.pageSize + scope.$index + 1 }}
- </template>
- </el-table-column>
- <el-table-column label="表格名称" align="center" prop="table_name" />
- <el-table-column label="开始日期" align="center" prop="start_time" />
- <el-table-column label="截止填报时间" align="center" prop="end_time" />
- <el-table-column label="任务状态" align="center" prop="submission_status">
- <template #default="scope">
- <div>
- <span v-if="Number(scope.row.submission_status) === 0">待填报</span>
- <span v-else>已上报</span>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
- <template #default="scope">
- <el-text v-if="Number(scope.row.submission_status) === 0" class="common-btn-text-primary" @click="handleWrite(scope.row)">填表</el-text>
- <el-text class="common-btn-text-primary" @click="handleView(scope.row)">详情</el-text>
- </template>
- </el-table-column>
- </el-table>
- <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.pageSize" :total="total" @pagination="tableData" />
- </div>
- </div>
- <WriteForm v-if="writeFormState.show" :event-id="writeFormState.eventId" @close="handleCancel" />
- <FormDetail v-if="formDetailState.show" :event-id="formDetailState.eventId" @close="handleCancel" />
- </div>
- </template>
- <script setup lang="ts">
- import { onMounted, reactive, ref } from 'vue';
- import { fillList } from '@/api/dataFilling/datafilling';
- import WriteForm from './writeForm.vue';
- import FormDetail from './formDetail.vue';
- import { ComponentInternalInstance, getCurrentInstance } from 'vue';
- import { parseTime } from '@/utils/ruoyi';
- import { deepClone } from '@/utils';
- const loading = ref(true);
- const showSearch = ref(true);
- const multiple = ref(true);
- const ids = ref<Array<number | string>>([]);
- const single = ref(true);
- const total = ref(0);
- const tableData = ref([]);
- const { proxy } = getCurrentInstance() as ComponentInternalInstance;
- const options = [
- {
- value: '0',
- label: '待填报',
- },
- {
- value: '1',
- label: '已上报',
- }]
- const initFormData = reactive({
- report_id: '',
- table_name: '',
- start_time: '',
- end_time: '',
- submission_status: []
- });
- const data = reactive({
- form: { ...initFormData },
- queryParams: {
- page: 1,
- pageSize: 10,
- table_name: '',
- submission_status: ''
- }
- });
- const { queryParams, form } = toRefs(data);
- let writeFormState = reactive({
- show: false,
- eventId: ''
- });
- let formDetailState = reactive({
- show: false,
- eventId: ''
- });
- const handleCancel = () => {
- writeFormState.show = false;
- formDetailState.show = false;
- };
- const handleWrite = (row) => {
- if (row) {
- writeFormState.eventId = row.report_id;
- writeFormState.show = true;
- }
- };
- const handleView = (row) => {
- if (row) {
- formDetailState.eventId = row.report_id;
- formDetailState.show = true;
- }
- };
- const fetchFillList = () => {
- loading.value = true;
- const params = deepClone(queryParams.value);
- params.submission_status = !queryParams.value.submission_status ? [] : [queryParams.value.submission_status]
- fillList(params)
- .then((res) => {
- for(let i = 0; i < res.data.length; i++) {
- res.data[i].end_time = parseTime(res.data[i].end_time);
- res.data[i].start_time = parseTime(res.data[i].start_time);
- }
- tableData.value = res.data;
- total.value = res.total;
- })
- .finally(() => {
- loading.value = false;
- });
- };
- onMounted(() => {
- fetchFillList();
- });
- const handleQuery = () => {
- queryParams.value.page = 1; // 重置页码
- fetchFillList(queryParams.value);
- };
- const resetQuery = () => {
- queryParams.value = { page: 1, pageSize: 10, table_name: '', submission_status: [] };
- handleQuery();
- };
- const handleSelectionChange = (selection) => {
- ids.value = selection.map((item) => item.id);
- };
- </script>
|