规划的接口,配置的接口

xuhongjie
严飞永 2 months ago
parent a9077cf271
commit 598e2f426d

@ -1,338 +1,210 @@
<template>
<div>
<!-- 模型管理 -->
<div class="headerbox">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
label-width="200">
<el-row>
<el-col :span="5">
<el-form-item label="关键要素" prop="postName" style="width: 100%;">
<el-input v-model="queryParams.postName" placeholder="请输入关键要素" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="具体指标" prop="postName" style="width: 100%;">
<el-input v-model="queryParams.postName" placeholder="请输入具体指标" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini"
@click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="headerbox"></div>
<div style="margin: .5rem;">
<el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true; resetForm()">新增要素</el-button>
</div>
<!-- 表格内容区 -->
<div class="tablebox">
<!-- 标签行 -->
<div class="tablehead">
<div class="headbtn">
<el-button type="primary" icon="el-icon-search">新增要素</el-button>
<div v-for="(category, categoryName) in tableData" :key="categoryName" class="tablebox">
<div v-for="(items, itemName) in category" :key="itemName" class="tablebox">
<div class="boxheader">
<div>{{ categoryName }}</div>
<div>{{ itemName }}</div>
<div> <el-button type="primary" icon="el-icon-edit" @click="handleUpdate(items[0])"></el-button></div>
<div> <el-button type="primary" icon="el-icon-edit" @click="showAddIndicatorDialog"></el-button></div>
</div>
<el-table :data="items" style="width: 100%">
<el-table-column prop="id" label="序号" width="180"></el-table-column>
<el-table-column prop="jtzb" label="具体指标" width="180"></el-table-column>
<el-table-column prop="xxyq" label="详细要求"></el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['system:post:edit']">编辑</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['system:post:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column label="序号" align="center" prop="postId" />
<el-table-column label="项目名称" align="center" prop="postName" />
<el-table-column label="现状分类" align="center" prop="postCode" />
<el-table-column label="项目法人单位" align="center" prop="postSort" />
<el-table-column label="项目建设起止时间" align="center" prop="postSort" />
<el-table-column label="总投资额(万元)" align="center" width="130" prop="postSort" />
<el-table-column label="总用地面积(平方米)" align="center" prop="postSort" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-view" @click="getInfo(scope.row)"
v-hasPermi="['system:post:detail']">详情</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['system:post:edit']">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['system:post:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" />
</div>
<!-- 添加或修改项目对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="项目名称" prop="postName">
<el-input v-model="form.postName" placeholder="请输入项目名称" />
</el-form-item>
<el-form-item label="项目编码" prop="postCode">
<el-input v-model="form.postCode" placeholder="请输入编码名称" />
<!-- 新增要素// -->
<el-dialog :title="form.id ? '编辑要素' : '新增要素'" :visible.sync="dialogVisible" width="30%">
<el-form :model="form" label-width="80px">
<el-form-item label="类型">
<el-select v-model="form.type" placeholder="请选择类型">
<el-option label="关键" value="关键要素"></el-option>
<el-option label="重要" value="重要要素"></el-option>
</el-select>
</el-form-item>
<el-form-item label="项目顺序" prop="postSort">
<el-input-number v-model="form.postSort" controls-position="right" :min="0" />
<el-form-item label="名称">
<el-input v-model="form.name" placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item label="项目状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{
dict.label
}}</el-radio>
</el-radio-group>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="handleAddElement"> </el-button>
</span>
</el-dialog>
<!-- 新增指标弹窗 -->
<el-dialog title="新增指标" :visible.sync="indicatorDialogVisible" width="30%">
<el-form :model="indicatorForm" label-width="80px">
<el-form-item label="指标名称">
<el-input v-model="indicatorForm.name" placeholder="请输入指标名称"></el-input>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
<el-form-item label="指标类型">
<el-select v-model="indicatorForm.type" placeholder="请选择类型">
<el-option label="关键指标" value="关键指标"></el-option>
<el-option label="重要指标" value="重要指标"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
<!-- 批量导入对话框 :headers="upload.headers" -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls"
:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<!-- <div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
</div> -->
<span>仅允许导入xlsxlsx格式文件</span>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm"> </el-button>
<el-button @click="upload.open = false"> </el-button>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="indicatorDialogVisible = false"> </el-button>
<el-button type="primary" @click="handleAddIndicator"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { listPost, getPost, delPost, addPost, updatePost } from "@/api/system/post";
import { getAllElements, addElement, editElemention } from '@/api/ManageApi/index';
export default {
name: "Post",
dicts: ['sys_normal_disable'],
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
postList: [],
//
title: "",
//
open: false,
//
queryParams: {
pageNum: 1,
pageSize: 10,
postCode: undefined,
postName: undefined,
status: undefined
},
//
form: {},
//
rules: {
postName: [
{ required: true, message: "项目名称不能为空", trigger: "blur" }
],
postCode: [
{ required: true, message: "项目编码不能为空", trigger: "blur" }
],
postSort: [
{ required: true, message: "项目顺序不能为空", trigger: "blur" }
]
tableData: {
关键要素: {
环保安全: [],
安全: []
},
重要要素: {
设备: [],
设备载重: []
}
},
//
upload: {
//
open: false,
//
title: "导入",
//
isUploading: false,
//
updateSupport: 0,
//
// headers: { Authorization: "Bearer " + getToken() },
//
// url: process.env.VUE_APP_BASE_API + "/tc/assetApp/importData"
// url: location.origin + "/api/tc/assetApp/importData"
dialogVisible: false, // /
indicatorDialogVisible: false, //
form: {
id: '',
type: '',
name: ''
},
};
indicatorForm: {
name: '',
type: ''
}
}
},
created() {
this.getList();
mounted() {
this.fetchData();
},
methods: {
//
handleImport() {
this.upload.open = true;
},
//
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
//
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
this.getList();
},
//
submitFileForm() {
this.$refs.upload.submit();
},
/** 查询项目列表 */
getList() {
this.loading = true;
listPost(this.queryParams).then(response => {
this.postList = response.rows;
this.total = response.total;
this.loading = false;
});
},
//
cancel() {
this.open = false;
this.reset();
},
//
reset() {
this.form = {
postId: undefined,
postCode: undefined,
postName: undefined,
postSort: 0,
status: "0",
remark: undefined
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.postId)
this.single = selection.length != 1
this.multiple = !selection.length
//
async fetchData() {
try {
const response = await getAllElements();
if (response.code === 200) {
this.tableData = response.data;
} else {
console.error('获取数据失败', response.msg);
}
} catch (error) {
console.error('请求错误', error);
}
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加项目";
//
showAddIndicatorDialog() {
this.indicatorForm = { name: '', type: '' }; //
this.indicatorDialogVisible = true; //
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const postId = row.postId || this.ids
getPost(postId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改项目";
//
handleAddIndicator() {
addElement(this.indicatorForm).then(response => {
if (response.code === 200) {
this.$message.success('新增指标成功');
this.indicatorDialogVisible = false; //
this.fetchData(); //
} else {
this.$message.error('新增指标失败:' + response.msg);
}
}).catch(error => {
this.$message.error('请求错误:' + error.message);
});
},
/** 详情按钮操作 */
getInfo(row) {
this.$store.commit("SET_CRUMBS", this.$route.meta.title + "详情");
const postIds = row.postId || this.ids;
this.$router.push({ path: `/manage-info/${postIds}` });
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.postId != undefined) {
updatePost(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
// /
handleAddElement() {
if (this.form.id) {
//
editElemention(this.form).then(response => {
if (response.code === 200) {
this.$message.success('编辑成功');
this.dialogVisible = false; //
this.fetchData(); //
} else {
addPost(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
this.$message.error('编辑失败:' + response.msg);
}
}
});
});
} else {
//
addElement(this.form).then(response => {
if (response.code === 200) {
this.$message.success('新增成功');
this.dialogVisible = false; //
this.fetchData(); //
} else {
this.$message.error('新增失败:' + response.msg);
}
});
}
},
//
handleUpdate(row) {
this.form = { ...row }; //
this.dialogVisible = true; //
},
/** 删除按钮操作 */
//
handleDelete(row) {
const postIds = row.postId || this.ids;
this.$modal.confirm('是否确认删除项目编号为"' + postIds + '"的数据项?' + '删除这条信息之后有可能找不回来了,请思考一下哟!').then(function () {
return delPost(postIds);
this.$confirm('确定删除该要素吗?', '提示', {
type: 'warning'
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => { });
//
this.$message.success('删除成功');
}).catch(() => {
this.$message.info('已取消删除');
});
},
/** 导出按钮操作 */
handleExport() {
this.download('system/post/export', {
...this.queryParams
}, `post_${new Date().getTime()}.xlsx`)
//
resetForm() {
this.form = {
id: '',
type: '',
name: ''
};
}
}
};
}
</script>
<style scoped>
.headerbox {
background-color: #fff;
border-radius: .5rem;
border-radius: 0.5rem;
padding: 1rem;
margin: .5rem;
margin: 0.5rem;
border: 1px solid #eee;
}
.tablebox {
background-color: #fff;
border-radius: .5rem;
border-radius: 0.5rem;
padding: 1rem;
margin: .5rem;
margin: 0.5rem;
border: 1px solid #eee;
}
.tablehead {
.boxheader {
display: flex;
justify-content: space-between;
align-items: center;
}
.headbtn {
display: flex;
}
.tablebtntwo {
margin-top: 1rem;
margin-bottom: 1rem;
}
</style>
Loading…
Cancel
Save