wangpeng
/
integrated_traffic_vue
forked from integrated_whb/integrated_whb_vue
1
0
Fork 0
Code Pull Requests Activity
integrated_traffic_vue/src/views/security_investment/plan/index.vue

263 lines
7.9 KiB
Vue
Raw Blame History

<template>
<div>
<el-card>
<el-form
:model="searchForm"
label-width="90px"
@submit.prevent="fnResetPagination"
>
<el-row>
<el-col :span="5">
<el-form-item label="计划名称" prop="KEYWORDS">
<el-input v-model="searchForm.KEYWORDS" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="计划年份" prop="PLAN_YEAR">
<el-select v-model="searchForm.PLAN_YEAR">
<el-option
v-for="item in yearList"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="计划周期" prop="PLAN_PERIOD">
<el-select v-model="searchForm.PLAN_PERIOD">
<el-option
v-for="item in planPeriodList"
:key="item.ID"
:value="item.ID"
:label="item.NAME"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="状态" prop="STATUS">
<el-select v-model="searchForm.STATUS">
<el-option
v-for="item in statusList"
:key="item.ID"
:value="item.ID"
:label="item.NAME"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label-width="10px">
<el-button type="primary" native-type="submit">搜索</el-button>
<el-button native-type="reset" @click="fnResetPagination">
重置
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<layout-card>
<layout-table
ref="tableRef"
v-model:pagination="pagination"
row-key="SAFETYINVESTMENTPLAN_ID"
:data="list"
@get-data="fnGetData"
>
<el-table-column reserve-selection type="selection" width="55" />
<el-table-column label="序号" width="60">
<template #default="{ $index }">
{{ serialNumber(pagination, $index) }}
</template>
</el-table-column>
<el-table-column prop="PLAN_NAME" label="计划名称" />
<el-table-column prop="PLAN_YEAR" label="计划年份" />
<el-table-column prop="PLAN_PERIOD" label="计划周期" />
<el-table-column prop="INFO_COUNT" label="涉及费用项数" />
<el-table-column prop="TOTAL_AMOUNT" label="总金额" />
<el-table-column prop="CREATOR" label="编制人" />
<el-table-column label="审核人">
<template #default="{ row }">
<span v-if="row.STATUS !== 0">{{ row.OPERATOR }}</span>
</template>
</el-table-column>
<el-table-column label="状态">
<template #default="{ row }">
{{ translationStatus(row.STATUS, statusList) }}
</template>
</el-table-column>
<el-table-column label="操作" width="150">
<template #default="{ row }">
<el-button
type="primary"
text
link
@click="fnView(row.SAFETYINVESTMENTPLAN_ID)"
>
查看
</el-button>
<el-button
v-if="buttonJurisdiction.del && row.STATUS < 1"
type="primary"
text
link
@click="fnDelete(row.SAFETYINVESTMENTPLAN_ID)"
>
删除
</el-button>
<el-button
v-if="buttonJurisdiction.edit && row.STATUS < 1"
type="primary"
text
link
@click="fnAddOrEdit(row.SAFETYINVESTMENTPLAN_ID, 'edit')"
>
编辑
</el-button>
</template>
</el-table-column>
<template #button>
<el-button
v-if="buttonJurisdiction.add"
type="primary"
@click="fnAddOrEdit('', 'add')"
>
新增
</el-button>
<el-button
v-if="buttonJurisdiction.del"
type="danger"
@click="fnBatchDelete"
>
批量删除
</el-button>
</template>
</layout-table>
</layout-card>
<view-info
v-model:visible="data.viewDialog.visible"
:info="data.viewDialog.info"
/>
<add
v-model:visible="data.addDialog.visible"
v-model:form="data.addDialog.form"
:type="data.addDialog.type"
:year-list="yearList"
:plan-period-list="planPeriodList"
@get-data="fnResetPagination"
/>
</div>
</template>
<script setup>
import { serialNumber, translationStatus } from "@/assets/js/utils";
import useListData from "@/assets/js/useListData.js";
import { debounce } from "throttle-debounce";
import { ElMessage, ElMessageBox } from "element-plus";
import {
getPlanList,
getPlanView,
setPlanBatchDelete,
setPlanDelete,
} from "@/request/security_investment.js";
import useButtonJurisdiction from "@/assets/js/useButtonJurisdiction.js";
import ViewInfo from "./components/view.vue";
import add from "./components/add.vue";
import { nextTick, reactive } from "vue";
const yearList = (() => {
const year = new Date().getFullYear();
const arr = [];
for (let i = 2021; i <= year + 1; i++) {
arr.push(i);
}
return arr;
})();
const planPeriodList = [
{ NAME: "季度计划1", ID: "季度计划1" },
{ NAME: "季度计划2", ID: "季度计划2" },
{ NAME: "季度计划3", ID: "季度计划3" },
{ NAME: "季度计划4", ID: "季度计划4" },
];
const statusList = [
{ NAME: "待审核", ID: 0 },
{ NAME: "已归档", ID: 1 },
{ NAME: "已打回", ID: -1 },
];
const { list, pagination, searchForm, fnGetData, fnResetPagination, tableRef } =
useListData(getPlanList);
const data = reactive({
viewDialog: {
visible: false,
info: {},
},
addDialog: {
visible: false,
type: "",
form: {
PLAN_NAME: "",
PLAN_YEAR: "",
PLAN_PERIOD: "",
TOTAL_AMOUNT: 0,
infos: [],
},
},
});
const buttonJurisdiction = await useButtonJurisdiction("safetyinvestmentplan");
const fnDelete = debounce(
1000,
async (SAFETYINVESTMENTPLAN_ID) => {
await ElMessageBox.confirm(`确定要删除吗？`, {
type: "warning",
});
await setPlanDelete({ SAFETYINVESTMENTPLAN_ID });
ElMessage.success(`删除成功`);
fnResetPagination();
},
{ atBegin: true }
);
const fnBatchDelete = debounce(
1000,
async () => {
const selectionData = tableRef.value.getSelectionRows();
if (selectionData.length === 0) {
ElMessage.warning("请选中要删除的项");
return;
}
await ElMessageBox.confirm("确定要删除选中的数据吗？", { type: "warning" });
const DATA_IDS = selectionData
.map((item) => item.SAFETYINVESTMENTPLAN_ID)
.join(",");
await setPlanBatchDelete({ DATA_IDS });
ElMessage.success("删除成功");
fnResetPagination();
},
{ atBegin: true }
);
const fnView = async (SAFETYINVESTMENTPLAN_ID) => {
const resData = await getPlanView({ SAFETYINVESTMENTPLAN_ID });
data.viewDialog.info = resData.pd;
data.viewDialog.info.infos = resData.infoList;
data.viewDialog.visible = true;
};
const fnAddOrEdit = async (SAFETYINVESTMENTPLAN_ID, type) => {
data.addDialog.visible = true;
await nextTick();
data.addDialog.type = type;
if (type === "edit") {
const resData = await getPlanView({ SAFETYINVESTMENTPLAN_ID });
data.addDialog.form = resData.pd;
data.addDialog.form.infos = resData.infoList;
} else {
data.addDialog.form.infos = [
{ TYPE: "", DESCR: "", AMOUNT: 0, id: Math.random() },
];
}
};
</script>
<style scoped></style>
View Git Blame Copy Permalink