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 #growthCycle-form="{ row, column, value, type }">
        <el-input-number v-model="growthCycleVal[0]" :disabled="type == 'view' ? true : false" :min="1" :max="30" style="width: 130px">
          <template #suffix>
            <span>周</span>
          </template>
        </el-input-number>
        &nbsp; - &nbsp;
        <el-input-number v-model="growthCycleVal[1]" :min="1" :disabled="type == 'view' ? true : false" :max="30" style="width: 130px">
          <template #suffix>
            <span>周</span>
          </template>
        </el-input-number>
      </template>

      <template #plantingMonths-form="{ row, column, value, type }">
        <el-select
          v-model="plantingMonths"
          placeholder="请选择月份"
          :disabled="type == 'view' ? true : false"
          style="width: 200px"
          :clearable="true"
          :multiple="true"
        >
          <el-option v-for="item in monthsOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </template>

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

    <el-dialog v-model="examVisible" title="审核计划" width="500" center>
      <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>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { useApp } from '@/hooks';
import { CRUD_OPTIONS } from '@/config';
import { isEmpty, downloadFile } from '@/utils';
import { getAnnualList, saveAnnual, editAnnual, examineAnnual, delAnnual, exportAnnua } from '@/apis/land.js';

const app = useApp();
const crudRef = ref(null);

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({ id: '' });

const examVisible = ref(false);
let growthCycleVal = reactive([0, 0]);
let plantingMonths = ref([]);

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, addDisplay: false, editDisplay: false },
      {
        label: '计划名称',
        prop: 'planName',
        width: '200px',
        showOverflowTooltip: true,
        search: true,
        rules: {
          required: true,
          message: '请选择',
          trigger: 'blur',
        },
      },
      {
        label: '种植面积',
        prop: 'plantingArea',
        rules: {
          required: true,
          message: '请输入',
          trigger: 'blur',
        },
      },
      {
        label: '种植月份',
        prop: 'plantingMonths',
        width: '120px',
        rules: {
          required: true,
          message: '请选择',
          trigger: 'blur',
          validator: (rule, value, callback) => {
            if (!plantingMonths.value.length) {
              callback(new Error('请输入'));
            } else {
              callback();
            }
          },
        },
      },
      {
        label: '生长周期',
        prop: 'growthCycle',
        width: '120px',
        viewDisabled: true,
        rules: {
          required: true,
          message: '请输入',
          trigger: 'blur',
          validator: (rule, value, callback) => {
            if (growthCycleVal[0] < 1 || growthCycleVal[1] < 1) {
              callback(new Error('请输入'));
            } else {
              callback();
            }
          },
        },
      },
      {
        label: '备注',
        prop: 'note',
        width: '180px',
        showOverflowTooltip: true,
        rules: {
          required: true,
          message: '请输入',
          trigger: 'blur',
        },
      },
      { label: '计划进度', prop: 'planProgress', addDisplay: false, editDisplay: false },
      { label: '状态', prop: 'planStatus', addDisplay: false, editDisplay: false },
    ],
    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 = () => {
  afterSub();
  crudRef.value.rowAdd();
};

// 新增
const rowSave = (row, done, loading) => {
  row.growthCycle = growthCycleVal[0] + '周' + ',' + growthCycleVal[1] + '周';
  row.plantingMonths = plantingMonths.value.length ? plantingMonths.value.toString() : '';
  saveAnnual(row)
    .then((res) => {
      if (res.code === 200) {
        app.$message.success('添加成功！');
        done();
        loadData();
      }
    })
    .catch((err) => {
      app.$message.error(err.msg);
    })
    .finally(() => {});
};
const beforeMsg = (row) => {
  growthCycleVal = row.growthCycle.split(',').map((m) => {
    return Number(m.replace(/[^0-9]/gi, ''));
  });
  plantingMonths.value = row.plantingMonths.split(',');
};

const afterSub = () => {
  growthCycleVal = [0, 0];
  plantingMonths.value = [];
};

// 编辑
const rowEdit = (row) => {
  console.info('编辑');
  beforeMsg(row);
  crudRef.value.rowEdit(row);
};

const rowUpdate = (row, index, done, loading) => {
  console.info('更新');
  editAnnual(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.id = row.id || '';
};

const doDetail = (row) => {
  beforeMsg(row);
  crudRef.value.rowView(row);
};

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;
};
</script>