558 lines
12 KiB
Vue
558 lines
12 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<transition name="fade">
|
||
<div :gutter="20" v-if="!showDetail">
|
||
<el-row :gutter="10">
|
||
<el-form
|
||
:model="queryParams"
|
||
ref="queryForm"
|
||
:inline="true"
|
||
v-show="showSearch"
|
||
label-width="68px"
|
||
>
|
||
|
||
<el-form-item label ="方案名称" prop="layerName">
|
||
<el-input
|
||
v-model="queryParams.planName"
|
||
placeholder="请输入方案"
|
||
clearable
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item>
|
||
<el-button type="primary" icon="Search" @click="handleQuery"
|
||
>搜索</el-button
|
||
>
|
||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-row>
|
||
|
||
<el-row :gutter="10">
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="primary"
|
||
plain
|
||
icon="Plus"
|
||
@click="handleAdd"
|
||
|
||
>新增</el-button
|
||
>
|
||
</el-col>
|
||
|
||
|
||
<right-toolbar
|
||
v-model:showSearch="showSearch"
|
||
@queryTable="getList"
|
||
></right-toolbar>
|
||
</el-row>
|
||
|
||
<el-table
|
||
v-loading="loading"
|
||
style="margin-top: 20px"
|
||
:data="dataList"
|
||
|
||
>
|
||
<el-table-column type="index" label="序号" width="55" align="center" />
|
||
<el-table-column label="公司名称" align="center" prop="companyName" />
|
||
<el-table-column label="方案名称" align="center" prop="planName" />
|
||
|
||
<el-table-column label="创建时间" align="center" prop="createTime" />
|
||
|
||
<el-table-column
|
||
label="操作"
|
||
align="center"
|
||
class-name="small-padding fixed-width"
|
||
>
|
||
<template #default="scope">
|
||
<el-button
|
||
link
|
||
type="primary"
|
||
icon="Edit"
|
||
@click="handleExit(scope.row)"
|
||
>修改</el-button
|
||
>
|
||
<el-button
|
||
link
|
||
type="warning"
|
||
icon="Download"
|
||
@click="handleOpen(scope.row)"
|
||
>导出</el-button
|
||
>
|
||
<el-button
|
||
link
|
||
type="danger"
|
||
icon="Delete"
|
||
@click="handleDelete(scope.row)"
|
||
|
||
>删除</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination
|
||
v-show="total > 0"
|
||
:total="total"
|
||
v-model:page="queryParams.pageNum"
|
||
v-model:limit="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
|
||
<!-- 添加或修改公告对话框 -->
|
||
<el-dialog :title="title" v-model="open" width="70%" append-to-body>
|
||
<el-form
|
||
:model="form"
|
||
:rules="rules"
|
||
ref="applyRef"
|
||
label-width="100px"
|
||
>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item label="公司名称" >
|
||
<el-input
|
||
v-model="form.companyName"
|
||
placeholder="公司名称"
|
||
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="方案名称" >
|
||
<el-input
|
||
v-model="form.planName"
|
||
placeholder="方案名称"
|
||
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="方案时间" >
|
||
<el-date-picker
|
||
v-model="form.planTime"
|
||
type="month"
|
||
style="width: 100%"
|
||
placeholder="方案时间"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="项目背景" >
|
||
<el-input
|
||
v-model="form.planbg"
|
||
style="width: 100%;"
|
||
:autosize="{ minRows: 3, maxRows: 8 }"
|
||
autosize
|
||
type="textarea"
|
||
placeholder="请输入"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="方案类型" >
|
||
<el-select
|
||
v-model="form.planType"
|
||
placeholder="选择类型"
|
||
style="width: 100%"
|
||
>
|
||
<el-option
|
||
v-for="item in equipment_type"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
</el-row>
|
||
<scsb ref="scsbRef" v-if="open" :citytype="citytype" :planType="form.planType" v-model="formValue"></scsb>
|
||
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button type="primary" @click="submit">确 定</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup name="porfiles">
|
||
import {
|
||
list,
|
||
postData,
|
||
putData,
|
||
deleteData
|
||
} from "@/api/renovation/scheme/index";
|
||
|
||
import {
|
||
treeRegionLevel,
|
||
|
||
} from "@/api/renovation/scheme/discharge";
|
||
|
||
const { proxy } = getCurrentInstance();
|
||
const { equipment_type } = proxy.useDict("equipment_type");
|
||
import scsb from './compant/SCSB'
|
||
const showDetail = ref(false);
|
||
const backCall = () => {
|
||
if (!document.startViewTransition) {
|
||
showDetail.value = false;
|
||
return;
|
||
}
|
||
document.startViewTransition(() => (showDetail.value = false));
|
||
getList();
|
||
// showDetail.value = false
|
||
};
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
const rules = ref([])
|
||
const data = reactive({
|
||
// 按钮loading
|
||
buttonLoading: false,
|
||
// 遮罩层
|
||
loading: false,
|
||
// 选中数组
|
||
ids: [],
|
||
// 非单个禁用
|
||
single: true,
|
||
// 非多个禁用
|
||
multiple: true,
|
||
// 显示搜索条件
|
||
showSearch: true,
|
||
tableDevice: [
|
||
{
|
||
name: "10",
|
||
waterDict: "Q=9m3/h；H=5m；P=0.25kW；220V",
|
||
waterNum: "2",
|
||
airDict: "150L/min；P=0.115kW；220V",
|
||
airNum: "1",
|
||
},
|
||
{
|
||
name: "20",
|
||
waterDict: "Q=9m3/h；H=5m；P=0.25kW；220V",
|
||
waterNum: "2",
|
||
airDict: "150L/min；P=0.115kW；220V",
|
||
airNum: "1",
|
||
},
|
||
],
|
||
tableDict: [
|
||
{
|
||
name: "10",
|
||
device: "水泵",
|
||
yxsj: "3",
|
||
taishu: "1",
|
||
zhuangjigl: "0.5",
|
||
rijdh: "0.75",
|
||
rzdh: "3.25",
|
||
rduzdkh: "0.325",
|
||
dshuidf: "0.124",
|
||
},
|
||
{
|
||
name: "10",
|
||
device: "风机",
|
||
yxsj: "22",
|
||
taishu: "33",
|
||
zhuangjigl: "0.15",
|
||
rijdh: "3.75",
|
||
rzdh: "3.25",
|
||
rduzdkh: "0.325",
|
||
dshuidf: "0.124",
|
||
},
|
||
{
|
||
name: "20",
|
||
device: "水泵",
|
||
yxsj: "6",
|
||
taishu: "1",
|
||
zhuangjigl: "0.5",
|
||
rijdh: "0.75",
|
||
rzdh: "4.25",
|
||
rduzdkh: "0.202",
|
||
dshuidf: "0.967",
|
||
},
|
||
{
|
||
name: "20",
|
||
device: "风机",
|
||
yxsj: "22",
|
||
taishu: "33",
|
||
zhuangjigl: "0.15",
|
||
rijdh: "3.75",
|
||
rzdh: "4.25",
|
||
rduzdkh: "0.202",
|
||
dshuidf: "0.622",
|
||
},
|
||
],
|
||
// 总条数
|
||
total: 0,
|
||
// 图层管理表格数据
|
||
dataList: [
|
||
|
||
],
|
||
citytype:[],
|
||
|
||
|
||
|
||
title: "",
|
||
// 是否显示弹出层
|
||
open: false,
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
createBy: undefined,
|
||
layersId: undefined,
|
||
},
|
||
// 表单参数
|
||
form: {},
|
||
// 表单校验
|
||
});
|
||
const scsbRef = ref()
|
||
const input = ref("");
|
||
const {
|
||
open,
|
||
tableDevice,
|
||
showSearch,
|
||
schemetype,
|
||
queryParams,
|
||
form,
|
||
ids,
|
||
title,
|
||
tonnageData,
|
||
dataList,
|
||
citytype,
|
||
total,
|
||
multiple,
|
||
single,
|
||
loading,
|
||
planList,
|
||
tableDict,
|
||
inletlist,
|
||
buttonLoading,
|
||
} = toRefs(data);
|
||
const planDialog = ref("");
|
||
const applyDialog = ref(false);
|
||
const layerName = ref();
|
||
|
||
|
||
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
|
||
if (rowIndex % 2 === 0) {
|
||
if (columnIndex === 0) {
|
||
return [1, 2];
|
||
} else if (columnIndex === 1) {
|
||
return [0, 0];
|
||
}
|
||
}
|
||
};
|
||
const filterMethod = (query, item) => {
|
||
return item.initial.toLowerCase().includes(query.toLowerCase());
|
||
};
|
||
const handleExcel = (item) => {
|
||
excel(item.planId);
|
||
proxy.download(
|
||
"/renovationPlan/export/excel",
|
||
{
|
||
planId: item.planId,
|
||
},
|
||
`${item.planName}.xlsx`,
|
||
{
|
||
baseURL: "/plan-api",
|
||
}
|
||
);
|
||
};
|
||
const handleWorld = (item) => {
|
||
excel(item.planId);
|
||
proxy.download(
|
||
"/renovationPlan/export/word",
|
||
{
|
||
planId: item.planId,
|
||
},
|
||
`${item.planName}.docx`,
|
||
{
|
||
baseURL: "/plan-api",
|
||
}
|
||
);
|
||
};
|
||
function cancel(){
|
||
open.value = false;
|
||
}
|
||
/** 表单重置 */
|
||
function reset() {
|
||
form.value = {
|
||
"planName": "",
|
||
"planType": "",
|
||
"planTime": '',
|
||
"companyName":''
|
||
};
|
||
|
||
proxy.resetForm("applyRef");
|
||
}
|
||
const formValue = ref({})
|
||
function handleExit(row){
|
||
reset();
|
||
|
||
|
||
open.value = true;
|
||
title.value = "编辑方案";
|
||
form.value ={
|
||
planId: row.planId,
|
||
planTime:new Date(parseInt(row.planTime.toString().substring(0,4)), parseInt(row.planTime.toString().substring(4)) - 1),//row.planTime.toString().substring(0,4)+'-'+row.planTime.toString().substring(4),
|
||
planType:row.planType,
|
||
planName:row.planName,
|
||
companyName:row.companyName
|
||
}
|
||
|
||
formValue.value= JSON.parse(JSON.stringify(row));
|
||
}
|
||
/** 新增按钮操作 */
|
||
function handleAdd() {
|
||
reset();
|
||
|
||
open.value = true;
|
||
formValue.value={planId:null}
|
||
title.value = "添加方案";
|
||
}
|
||
//详情
|
||
const arrSite = ref([]);
|
||
const planData = ref({});
|
||
async function handleOpen(row) {
|
||
proxy.download("/technicalPlan/export/word/"+row.planId, {
|
||
}, `${row.planName}.doc`,{ baseURL: "/plan-api",});
|
||
}
|
||
|
||
|
||
|
||
/** 删除按钮操作 */
|
||
function handleDelete(row) {
|
||
const planName = row.planName ;
|
||
proxy.$modal
|
||
.confirm('是否确认方案:' + planName )
|
||
.then(function () {
|
||
return deleteData(row.planId);
|
||
})
|
||
.then(() => {
|
||
getList();
|
||
proxy.$modal.msgSuccess("删除成功");
|
||
})
|
||
.catch(() => {});
|
||
}
|
||
function handleSelectionChange(selection) {
|
||
ids.value = selection.map((item) => item.id);
|
||
single.value = selection.length !== 1;
|
||
multiple.value = !selection.length;
|
||
}
|
||
/** 查询理列表 */
|
||
function getList() {
|
||
// loading.value = false;
|
||
loading.value = true;
|
||
list(queryParams.value).then((response) => {
|
||
|
||
dataList.value = response.rows;
|
||
total.value = response.total;
|
||
loading.value = false;
|
||
});
|
||
}
|
||
/** 搜索按钮操作 */
|
||
function handleQuery() {
|
||
queryParams.value.pageNum = 1;
|
||
getList();
|
||
}
|
||
/** 重置按钮操作 */
|
||
function resetQuery() {
|
||
proxy.resetForm("queryForm");
|
||
handleQuery();
|
||
}
|
||
//格式化时间函数
|
||
function formatDate(date) {
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let day = date.getDate();
|
||
|
||
return (
|
||
year +
|
||
(month < 10 ? "0" + month : month)
|
||
)
|
||
}
|
||
function submit() {
|
||
console.log(form.value)
|
||
let value = scsbRef.value.handleSubmit()
|
||
console.log(value)
|
||
form.value.planTime = formatDate(form.value.planTime)
|
||
|
||
value.equipmentParamId = value.equipmentParamId.toString();
|
||
|
||
let data = {
|
||
...value,
|
||
...form.value,
|
||
|
||
}
|
||
console.log(data)
|
||
if(form.value.planId){
|
||
putData(data).then(res=>{
|
||
proxy.$modal.msgSuccess(res.msg);
|
||
scsbRef.value.rest()
|
||
open.value = false;
|
||
|
||
getList()
|
||
|
||
})
|
||
|
||
}else{
|
||
postData(data).then(res=>{
|
||
proxy.$modal.msgSuccess(res.msg);
|
||
scsbRef.value.rest()
|
||
open.value = false;
|
||
getList()
|
||
})
|
||
|
||
}
|
||
}
|
||
async function getTreeData() {
|
||
let data = await treeRegionLevel();
|
||
|
||
citytype.value = data.data.map((item, index) => {
|
||
return {
|
||
value: item.label,
|
||
label: item.label,
|
||
children: item.children,
|
||
};
|
||
});
|
||
}
|
||
onMounted(() => {
|
||
getList();
|
||
getTreeData();
|
||
});
|
||
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.fade-enter-active {
|
||
transition: all 0.3s ease-out;
|
||
}
|
||
.fade-leave-active {
|
||
transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
|
||
}
|
||
.fade-enter-from,
|
||
.fade-leave-to {
|
||
transform: translateX(-120px);
|
||
opacity: 0;
|
||
}
|
||
|
||
.detail-enter-active,
|
||
.detail-leave-active {
|
||
transition: opacity 0.5s ease;
|
||
}
|
||
.detail-enter-from,
|
||
.detail-leave-to {
|
||
opacity: 0;
|
||
}
|
||
</style>
|