daimp-front/sub-government-affairs-service/src/views/annualPlan/component/annualPlans/index.vue

<template>
  <div class="custom-page">
    <avue-crud
      ref="crudRef"
      v-model="state.form"
      v-model:search="state.query"
      v-model:page="state.pageData"
      :table-loading="state.loading"
      :data="state.data"
      :option="state.options"
      @refresh-change="refreshChange"
      @search-reset="searchChange"
      @search-change="searchChange"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
    >
      <template #menu-left>
        <el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
        <el-button type="success" icon="download" @click="onExport">导出</el-button>
      </template>

      <template #planStatus="{ row }">
        <el-tag v-if="row.planStatus == '1'" type="warning" size="small">待提交</el-tag>
        <el-tag v-if="row.planStatus == '2'" type="primary" size="small">审核中</el-tag>
        <el-tag v-if="row.planStatus == '3'" type="success" size="small">通过</el-tag>
        <el-tag v-if="row.planStatus == '4'" type="danger" size="small">拒绝</el-tag>
      </template>

      <template #menu="scope">
        <custom-table-operate :actions="state.options.actions" :data="scope" />
      </template>
    </avue-crud>

    <el-dialog v-model="infoVisible" title="年度种植计划" width="1000" center>
      <el-form ref="infoRef" :model="infoData" :rules="infoRules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划名称:" prop="planName">
              <el-input v-model="infoData.planName" placeholder="请输入" style="width: 240px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="种植面积" prop="plantingArea">
              <el-input-number v-model="infoData.plantingArea" :min="1" :max="10000">
                <template #suffix>
                  <span>亩</span>
                </template>
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="适宜种植月份" prop="plantingMonths">
              <el-select v-model="infoData.plantingMonths" placeholder="请选择月份" style="width: 240px" :clearable="true" :multiple="true">
                <el-option v-for="item in monthsOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生长周期" prop="growthCycleVal">
              <el-input-number v-model="infoData.growthCycleVal[0]" :min="1" :max="30">
                <template #suffix>
                  <span>周</span>
                </template>
              </el-input-number>
              &nbsp; - &nbsp;
              <el-input-number v-model="infoData.growthCycleVal[1]" :min="1" :max="30">
                <template #suffix>
                  <span>周</span>
                </template>
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="note">
              <el-input v-model="infoData.note" type="textarea" placeholder="请输入备注" style="width: 240px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="infoCancel">取消</el-button>
          <el-button type="primary" @click="subMitInfo(infoRef)"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="examVisible" title="审核计划" width="500" center>
      <!-- <el-form ref="infoRef" :model="infoData" :rules="infoRules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="备注" prop="note">
              <el-input v-model="infoData.note" type="textarea" placeholder="请输入备注" style="width: 240px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form> -->
      <template #footer>
        <div class="dialog-footer">
          <el-button type="danger" @click="examCancel">审核拒绝</el-button>
          <el-button type="primary" @click="examPast"> 审核通过 </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="detailVisible" title="年度计划详情" width="800" center>
      <el-descriptions :title="currentRow.planName || ''">
        <el-descriptions-item label="计划编号">{{ currentRow.id || '--' }}</el-descriptions-item>
        <el-descriptions-item label="计划名称">{{ currentRow.planName || '--' }}</el-descriptions-item>
        <el-descriptions-item label="种植面积">{{ currentRow.plantingArea || '--' }}</el-descriptions-item>
        <el-descriptions-item label="种植月份">{{ currentRow.plantingMonths || '--' }}</el-descriptions-item>
        <el-descriptions-item label="生长周期">{{ currentRow.growthCycle || '--' }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ currentRow.note || '--' }}</el-descriptions-item>
        <el-descriptions-item label="计划进度">{{ currentRow.planProgress || '--' }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag v-if="currentRow.planStatus == '1'" type="warning" size="small">待提交</el-tag>
          <el-tag v-if="currentRow.planStatus == '2'" type="primary" size="small">审核中</el-tag>
          <el-tag v-if="currentRow.planStatus == '3'" type="success" size="small">通过</el-tag>
          <el-tag v-if="currentRow.planStatus == '4'" type="danger" size="small">拒绝</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="toBack"> 返回 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { useApp } from '@/hooks';
import { CRUD_OPTIONS } from '@/config';
import { isEmpty, downloadFile } from '@/utils';
import { useUserStore } from '@/store/modules/user';
import { compact } from 'lodash';
import { GetEntityList, AddEntity, UpdateEntity, DeleteEntity, ExportEntity } from '@/apis/grid';
import { getAnnualList, saveAnnual, editAnnual, examineAnnual, delAnnual, exportAnnua } from '@/apis/land.js';

const { VITE_APP_BASE_API } = import.meta.env;
const app = useApp();
const UserStore = useUserStore();
const crudRef = ref(null);

const infoVisible = ref(false);
const infoRef = ref();
const monthsOptions = reactive([
  { label: '1月份', value: '1月' },
  { label: '2月份', value: '2月' },
  { label: '3月份', value: '3月' },
  { label: '4月份', value: '4月' },
  { label: '5月份', value: '5月' },
  { label: '6月份', value: '6月' },
  { label: '7月份', value: '7月' },
  { label: '8月份', value: '8月' },
  { label: '9月份', value: '9月' },
  { label: '10月份', value: '10月' },
  { label: '11月份', value: '11月' },
  { label: '12月份', value: '12月' },
]);

let infoData = reactive({
  planName: '',
  plantingArea: 0,
  plantingMonths: [],
  growthCycle: '',
  note: '',
  growthCycleVal: [0, 0],
});

const infoRules = reactive({
  planName: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
  plantingArea: [{ required: true, message: '请输入种植面积', trigger: 'blur' }],
  plantingMonths: [{ required: true, message: '请选择种植月份', trigger: 'blur' }],
  growthCycleVal: [{ required: true, message: '请输入生长周期', trigger: 'blur' }],
  note: [{ required: true, message: '请输入备注', trigger: 'blur' }],
});

const examVisible = ref(false);
const detailVisible = ref(false);
let currentRow = reactive({});

const state = reactive({
  loading: false,
  query: {
    current: 1,
    size: 10,
  },
  form: {},
  selection: [],
  options: {
    ...CRUD_OPTIONS,
    addBtnText: '',
    addBtn: false,
    column: [
      { label: '计划编号', prop: 'id', width: '200px', showOverflowTooltip: true },
      { label: '计划名称', prop: 'planName', width: '200px', showOverflowTooltip: true, search: true },
      { label: '种植面积', prop: 'plantingArea' },
      { label: '种植月份', prop: 'plantingMonths', width: '120px' },
      { label: '生长周期', prop: 'growthCycle', width: '120px' },
      { label: '备注', prop: 'note', width: '180px', showOverflowTooltip: true },
      { label: '计划进度', prop: 'planProgress' },
      { label: '状态', prop: 'planStatus' },
    ],
    actions: [
      {
        name: '审核',
        icon: 'Stamp',
        event: ({ row }) => doExam(row),
      },
      {
        name: '编辑',
        icon: 'edit',
        event: ({ row }) => rowEdit(row),
      },
      {
        name: '详情',
        icon: 'List',
        event: ({ row }) => doDetail(row),
      },
      {
        type: 'danger',
        name: '删除',
        icon: 'delete',
        event: ({ row }) => rowDel(row),
      },
    ],
  },
  pageData: {
    total: 0,
    currentPage: 1,
    pageSize: 10,
  },
  data: [],
  currentRow: {},
});

// 加载
const loadData = () => {
  state.loading = true;
  getAnnualList(state.query)
    .then((res) => {
      if (res.code === 200) {
        const { current, size, total, records } = res.data;
        state.data = records;
        state.pageData = {
          currentPage: current || 1,
          pageSize: size || 10,
          total: total,
        };
      }
    })
    .catch((err) => {
      app.$message.error(err.msg);
      state.data = [];
    })
    .finally(() => {
      state.loading = false;
    });
};

loadData();

// 页数
const currentChange = (current) => {
  state.query.current = current;
  loadData();
};

// 条数
const sizeChange = (size) => {
  state.query.size = size;
  loadData();
};

// 搜索
const searchChange = (params, done) => {
  if (done) done();
  state.query = params;
  state.query.current = 1;
  loadData();
};

// 刷新
const refreshChange = () => {
  loadData();
  app.$message.success('刷新成功');
};

// 选择
const selectionChange = (rows) => {
  state.selection = rows;
};

const onAdd = () => {
  infoVisible.value = true;
};
// 新增
const rowSave = (row, done, loading) => {
  console.info('新增');
};

// 编辑
const rowEdit = (row) => {
  console.info('编辑');
  // crudRef.value.rowEdit(row);
  infoData = reactive({
    ...row,
    plantingMonths: row.plantingMonths.split(','),
    growthCycleVal: row.growthCycle.split(',').map((m) => {
      return Number(m.replace(/[^0-9]/gi, ''));
    }),
  });
  infoVisible.value = true;
};

const rowUpdate = (row, index, done, loading) => {
  console.info('更新');
  // UpdateEntity(row)
  //   .then((res) => {
  //     if (res.code === 200) {
  //       app.$message.success('更新成功！');
  //       done();
  //       loadData();
  //     }
  //   })
  //   .catch((err) => {
  //     app.$message.error(err.msg);
  //   })
  //   .finally(() => {
  //     loading();
  //   });
};

// 删除
const rowDel = (row, index, done) => {
  if (isEmpty(row)) return;
  app
    .$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      console.info('删除');
      // delAnnual({ id: row.id })
      //   .then((res) => {
      //     if (res.code === 200) {
      //       app.$message.success('删除成功！');
      //       done();
      //       loadData();
      //     }
      //   })
      //   .catch((err) => {
      //     app.$message.error(err.msg);
      //   });
    })
    .catch(() => {});
};

// 导出
const onExport = () => {
  if (isEmpty(state.data)) {
    app.$message.error('当前暂时没有可供导出的数据！');
    return;
  }
  state.loading = true;
  const fileName = '年度计划明细表';
  exportAnnua(state.query)
    .then((res) => {
      if (res.status === 200) {
        downloadFile(res.data, `${fileName}.xlsx`, 'blob');
        app.$message.success('导出成功！');
      }
    })
    .catch((err) => {
      app.$message.error('导出失败！');
    })
    .finally(() => {
      state.loading = false;
    });
};

const doExam = (row) => {
  examVisible.value = true;
  infoData = reactive({
    ...row,
    plantingMonths: row.plantingMonths.split(','),
    growthCycleVal: row.growthCycle.split(',').map((m) => {
      return Number(m.replace(/[^0-9]/gi, ''));
    }),
  });
};

const doDetail = (row) => {
  detailVisible.value = true;
  currentRow = reactive({ ...row });
};
const subMitInfo = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      let parmer = {
        ...infoData,
        plantingMonths: infoData.plantingMonths.toString(),
        growthCycle: infoData.growthCycleVal[0] + '周' + ',' + infoData.growthCycleVal[1] + '周',
      };

      parmer.growthCycleVal && delete parmer.growthCycleVal;
      if (parmer.id) {
        editAnnual(parmer)
          .then((res) => {
            if (res.code === 200) {
              app.$message.success('编辑成功！');
              loadData();
              infoHide();
            }
          })
          .catch((err) => {
            app.$message.error(err.msg);
          })
          .finally(() => {});
      } else {
        saveAnnual(parmer)
          .then((res) => {
            if (res.code === 200) {
              app.$message.success('添加成功！');
              loadData();
              infoHide();
            }
          })
          .catch((err) => {
            app.$message.error(err.msg);
          })
          .finally(() => {});
      }
    } else {
      console.log('error submit!');
    }
  });
};

const infoCancel = () => {
  infoHide();
};

const infoHide = () => {
  infoRef.value && infoRef.value.resetFields();
  infoVisible.value = false;
};

const examCancel = () => {
  console.log('审核不通过');
  examVisible.value = true;
  toDoexam(infoData.id, '4', '审核不通过');
};

const examPast = (row) => {
  console.log('审核通过');
  toDoexam(infoData.id, '3', '审核通过');
};

const toDoexam = (id, status, tips) => {
  app
    .$confirm(`确定` + tips + `吗？`, '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      examineAnnual({ id: id, planStatus: status })
        .then((res) => {
          if (res.code === 200) {
            app.$message.success('审核提交成功！');
            loadData();
            examHide();
          }
        })
        .catch((err) => {
          app.$message.error(err.msg);
        })
        .finally(() => {});
    })
    .catch(() => {});
};

const examHide = () => {
  examVisible.value = false;
};

const toBack = () => {
  detailVisible.value = false;
};
</script>