daimp-front/sub-government-affairs-service/src/views/landManage/component/plantPlan/index.vue

<!-- eslint-disable no-const-assign -->
<template>
  <CustCard>
    <el-form ref="searchRef" :model="searchCondition">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="地块名:" prop="landName">
            <el-input v-model="searchCondition.landName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="种植产物" prop="crop">
            <el-input v-model="searchCondition.crop" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产权人" prop="owner">
            <el-input v-model="searchCondition.owner" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="getList()">查询</el-button>
          <el-button type="" @click="handleResetSearch">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="options_btns">
      <el-button v-for="(item, i) in btns" :key="'btns_' + i" type="primary" :loading="item.loading" @click="item.method">
        {{ item.label }}
      </el-button>
    </div>
    <el-table :data="list" @selection-change="selectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index"> </el-table-column>
      <el-table-column label="地块名" prop="landName" width="240" show-overflow-tooltip />
      <el-table-column label="地址" prop="address" show-overflow-tooltip />
      <el-table-column label="产权人" prop="owner" show-overflow-tooltip />
      <el-table-column label="农用地分类" prop="landClassificationType" width="120" show-overflow-tooltip>
        <template #default="{ row }">
          <el-tag type="primary" :hit="true" size="small" effect="plain">{{ landClassificationType[row.landClassificationType] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="面积" prop="area" show-overflow-tooltip />
      <el-table-column label="坐标" prop="coordinate" show-overflow-tooltip />
      <el-table-column label="土壤类型" prop="soilType" show-overflow-tooltip />
      <el-table-column label="种植产物" prop="crop" show-overflow-tooltip />
      <el-table-column label="种子供应商" prop="seedSupplier" show-overflow-tooltip />
      <el-table-column label="年度计划" prop="planName" show-overflow-tooltip />
      <el-table-column label="种植日期" prop="planDate" show-overflow-tooltip />
      <el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip>
        <template #default="{ row }">
          <el-button type="primary" @click="doEdit(row)">编辑</el-button>
          <el-button type="danger" @click="doDel(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagina :page-data="pageData" @page-change="pageChange" />
    <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="landId">
              <CustomSelect
                v-model:value="infoData.landId"
                :set="{
                  url: 'land-resource/landManage/page',
                  props: {
                    value: 'id',
                    label: 'landName',
                  },
                }"
                placeholder="请选择地块"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="面积" prop="gridName">
              <el-input v-model="infoData.gridName" placeholder="请输入面积" style="width: 240px"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="种植产物" prop="crop">
              <el-input v-model="infoData.crop" placeholder="请输入种植产物" style="width: 240px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="种植日期" prop="planDate">
              <el-date-picker
                v-model="infoData.planDate"
                type="date"
                placeholder="请选择种植日期"
                :disabled-date="disabledDate"
                format="YYYY/MM/DD"
                value-format="YYYY/MM/DD"
                :size="size"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="种子供应商" prop="seedSupplier">
              <el-input v-model="infoData.seedSupplier" placeholder="请输入种子供应商" style="width: 240px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年度计划" prop="planId">
              <!-- <el-select v-model="infoData.plan" placeholder="请选择年度计划" style="width: 240px" :clearable="true">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select> -->
              <CustomSelect
                v-model:value="infoData.planId"
                :set="{
                  url: 'land-resource/annualManage/page',
                  props: {
                    value: 'id',
                    label: 'planName',
                  },
                }"
                placeholder="请选择种植计划"
              />
            </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>
    <div>
      <el-text class="mx-1" size="large">种植阶段详情</el-text>
      <div style="margin-top: 16px">
        <el-form ref="stageRef" :model="stageInfo">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-button type="primary" @click="addSub">新增</el-button>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属阶段" prop="gridName">
                <el-select v-model="stageInfo.stage" placeholder="请选择所属阶段" style="width: 240px" :clearable="true">
                  <el-option v-for="item in stageOptions" :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="getStageList()">查询</el-button>
              <el-button type="" @click="handleResetStage">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="sublist">
          <el-table-column type="selection" width="55" />
          <el-table-column type="index"> </el-table-column>
          <el-table-column label="所属阶段" prop="landName" width="240" show-overflow-tooltip />
          <el-table-column label="作业计划" prop="address" show-overflow-tooltip />
          <el-table-column label="作业时间" prop="owner" show-overflow-tooltip />
          <el-table-column label="结束时间" prop="owner" show-overflow-tooltip />
          <el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip>
            <el-button type="primary" @click="doSubEdit()">编辑</el-button>
            <el-button type="danger" @click="doSubDel()">删除</el-button>
          </el-table-column>
        </el-table>
        <Pagina :page-data="subPageData" />
      </div>
    </div>
  </CustCard>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import Pagina from '@/components/pagina.vue';
import CustCard from '@/components/CustCard.vue';
import { getPlanList, savePlan, exportPlan, editAlan } from '@/apis/land.js';
import { useApp } from '@/hooks';
import CustomSelect from '@/components/CustomSelect.vue';
import { isEmpty, imageToBase64, getAssetsFile, downloadFile } from '@/utils';
onMounted(() => {
  getList();
});

/* --------------- data --------------- */
// #region
const app = useApp();
const searchRef = ref();

const searchCondition = reactive({
  landName: '',
  owner: '',
  crop: '',
});

const pageData = reactive({
  page: 1,
  size: 10,
  total: 0,
});
const landClassificationType = reactive({
  0: '耕地',
  1: '果园',
  2: '茶园',
  3: '其他园地',
  4: '林地',
  5: '草地',
  6: '其他农用地',
  7: '农村宅基地',
});

let selectIds = ref('');
const infoVisible = ref(false);
const infoRef = ref();
const list = ref([]);
const state = reactive({
  loading: false,
  query: {
    current: 1,
    size: 10,
  },
  pageData: {
    total: 0,
    currentPage: 1,
    pageSize: 10,
  },
  data: [],
  currentRow: {},
});
const btns = reactive([
  {
    label: '新增种植规划',
    loading: false,
    method: function () {
      console.log('add');
      if (selectIds.value.length <= 0) {
        app.$message.error('请先选择地块');
        return;
      }
      infoVisible.value = true;
    },
  },
  {
    label: '导入',
    disabled: false,
    loading: false,
    method: function () {
      console.log('import');
    },
  },
  {
    label: '导出',
    disabled: true,
    loading: state.loading,
    method: function () {
      if (isEmpty(state.data)) {
        app.$message.error('当前暂时没有可供导出的数据！');
        return;
      }
      state.loading = true;
      const fileName = '种植计划明细表';
      exportPlan(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;
        });
    },
  },
]);

let infoData = reactive({
  landId: [], //土地主键id
  planId: '', //种植规划主键id
  crop: '', //种植产物
  seedSupplier: '', //供应商
  planDate: '', //种植时间
});

const infoRules = reactive({
  crop: [{ required: true, message: '请输入种植产物', trigger: 'blur' }],
  planId: [{ required: true, message: '请选择种植计划', trigger: 'blur' }],
  seedSupplier: [{ required: true, message: '请输入供应商', trigger: 'blur' }],
  planDate: [{ required: true, message: '请选择种植时间', trigger: 'blur' }],
});
const options = reactive([
  {
    value: '年度计划1',
    label: 'Option1',
  },
  {
    value: '年度计划2',
    label: 'Option2',
  },
]);

const subPageData = reactive({
  page: 1,
  size: 10,
  total: 0,
});
const sublist = ref([]);
const stageInfo = reactive({
  stage: '',
});
const stageRef = ref();
const stageOptions = reactive([
  {
    value: '阶段1',
    label: 'Option1',
  },
  {
    value: '阶段2',
    label: 'Option2',
  },
]);

// #endregion

/* --------------- methods --------------- */
// #region

async function getList() {
  const params = { current: pageData.page, size: pageData.size, ...searchCondition };
  let { code, data, msg } = await getPlanList(params);
  //console.log('res ---------', data);
  list.value = data.records || [];
  pageData.total = data.total;
  state.data = data.records;
  state.pageData = {
    currentPage: data.current || 1,
    pageSize: data.size || 10,
    total: data.total,
  };
}

function handleResetSearch() {
  searchRef.value && searchRef.value.resetFields();
  getList();
}

const selectionChange = (data) => {
  let datalist = data.map((m) => {
    return { landId: m.landId, landName: m.landName };
  });

  let selectIdlist = uniqueObjects(datalist, 'landId');
  let selectIdsVal = selectIdlist.map((n) => {
    return n.landId;
  });

  selectIds.value = selectIdsVal.toString();
  console.info('selectionChange', selectIds.value);
};

const pageChange = (data) => {
  console.info('pageChange', data);
  pageData.page = data;
  getList();
};

function uniqueObjects(arr, key) {
  return arr.reduce((acc, current) => {
    const duplicate = acc.find((element) => element[key] === current[key]);
    if (!duplicate) {
      acc.push(current);
    }
    return acc;
  }, []);
}

function doEdit(row) {
  infoVisible.value = true;
  infoData = reactive({
    ...row,
  });
  console.info('编辑', infoData);
}

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

const subMitInfo = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      let parmer = {
        ...infoData,
        landId: selectIds.value || '',
      };

      console.info('新增种植计划', parmer);

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

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

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

const addSub = () => {
  console.log('新增阶段');
};

async function getStageList() {
  // const params = { current: pageData.page, size: pageData.size };
  // let res = await getLandsList(params);
  // console.log('res ---------', res);
}

function handleResetStage() {
  stageRef.value && stageRef.value.resetFields();
  stageInfo.stage = '';
  console.info('重置所属阶段筛选条件');
  getStageList();
}

const doSubEdit = () => {
  console.log('编辑sub');
};

const doSubDel = () => {
  console.log('删除sub');
};

// #endregion
</script>

<style lang="scss" scoped>
.container {
  border-radius: 4px;
  background-color: #ffffff;
}
</style>