123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573 |
- <template>
- <div class="app-container">
- <!-- 搜索工作栏 -->
- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
- <el-form-item label="设施名称" prop="fpdName">
- <el-input v-model="queryParams.fpdName" placeholder="请输入设施名称" clearable @keyup.enter.native="handleQuery" />
- </el-form-item>
- <el-form-item label="设施编号" prop="fpdCode">
- <el-input v-model="queryParams.fpdCode" placeholder="请输入设施编号" clearable @keyup.enter.native="handleQuery" />
- </el-form-item>
- <el-form-item label="所在位置" prop="fpdLocal">
- <el-input v-model="queryParams.fpdLocal" placeholder="请输入所在位置" clearable @keyup.enter.native="handleQuery" />
- </el-form-item>
- <el-form-item label="所属单位" prop="orgId">
- <el-input v-model="queryParams.orgId" placeholder="请输入所属单位" clearable @keyup.enter.native="handleQuery" />
- <!-- <el-select v-model="queryParams.orgId" placeholder="请选择设施类别" clearable @change="orgOptionsChangeParams">
- <el-option v-for="dict in this.orgOptions" :key="dict.value" :label="dict.orgName" :value="dict.id" />
- </el-select> -->
- </el-form-item>
- <el-form-item label="所属建筑" prop="buildingId">
- <el-input v-model="queryParams.buildingId" placeholder="请输入所属建筑" clearable @keyup.enter.native="handleQuery" />
- <!-- <el-select v-model="queryParams.buildingId" placeholder="请选择设施类别" clearable>
- <el-option v-for="dict in this.BuildingInfoOptionsParams" :key="dict.value" :label="dict.buildingName"
- :value="dict.id" />
- </el-select> -->
- </el-form-item>
- <el-form-item label="设施类别" prop="fpdType">
- <el-select v-model="queryParams.fpdType" placeholder="请选择设施类别" clearable size="small">
- <el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_FIRE_DECIVE_TYPE)" :key="dict.value"
- :label="dict.label" :value="dict.value" />
- </el-select>
- </el-form-item>
- <!-- <el-form-item label="设施二维码" prop="fpdQcode">
- <el-input v-model="queryParams.fpdQcode" placeholder="请输入设施二维码" clearable @keyup.enter.native="handleQuery" />
- </el-form-item>
- <el-form-item label="创建时间" prop="createTime">
- <el-date-picker clearable v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
- type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
- :default-time="['00:00:00', '23:59:59']" />
- </el-form-item> -->
- <!-- <el-form-item label="状态" prop="status">
- <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
- <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)" :key="dict.value" :label="dict.label"
- :value="dict.value" />
- </el-select>
- </el-form-item> -->
- <el-form-item>
- <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
- <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
- </el-form-item>
- </el-form>
- <!-- 操作工具栏 -->
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
- v-hasPermi="['backend:fpd:create']">新增</el-button>
- </el-col>
- <!-- <el-col :span="1.5">
- <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
- :loading="exportLoading" v-hasPermi="['backend:fpd:export']">导出</el-button>
- </el-col> -->
- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
- </el-row>
- <!-- 列表 -->
- <el-table v-loading="loading" :data="list">
- <el-table-column label="ID" align="center" prop="id" />
- <el-table-column label="设施名称" align="center" prop="fpdName" />
- <el-table-column label="设施编号" align="center" prop="fpdCode" />
- <el-table-column label="所在位置" align="center" prop="fpdLocal" />
- <el-table-column label="所属单位" align="center">
- <template v-slot="scope"> {{ scope.row.orgDO.orgName}}</template>
- </el-table-column>
- <el-table-column label="所属建筑" align="center" prop="buildingId" />
- <el-table-column label="设施类别" align="center" prop="fpdType">
- <template v-slot="scope">
- <dict-tag :type="DICT_TYPE.DICT_FIRE_DECIVE_TYPE" :value="scope.row.fpdType" />
- </template>
- </el-table-column>
- <el-table-column label="设施二维码" align="center">
- <template v-slot="scope"><img v-if="scope.row.fpdQcode" :src="scope.row.fpdQcode" style="width:40px;height:40px"
- @click="bigFpdCode(scope.row.fpdQcode)"></template>
- </el-table-column>
- <!-- <el-table-column label="创建时间" align="center" prop="createTime" width="180">
- <template v-slot="scope">
- <span>{{ parseTime(scope.row.createTime) }}</span>
- </template>
- </el-table-column> -->
- <!-- <el-table-column label="状态" align="center" prop="status">
- <template v-slot="scope">
- <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
- </template>
- </el-table-column> -->
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="170">
- <template v-slot="scope">
- <el-button size="mini" type="text" icon="el-icon-view" @click="handleSee(scope.row)">查看</el-button>
- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
- v-hasPermi="['backend:fpd:update']">修改</el-button>
- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
- v-hasPermi="['backend:fpd:delete']">删除</el-button>
- </template>
- </el-table-column>
- </el-table>
- <!-- 分页组件 -->
- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
- @pagination="getList" />
- <!-- 对话框(添加 / 修改) -->
- <el-dialog :title="title" :visible.sync="open" width="600px" v-dialogDrag append-to-body>
- <el-form ref="form" :model="form" :rules="rules" label-width="100px">
- <el-form-item label="设施名称" prop="fpdName">
- <el-input v-model="form.fpdName" placeholder="请输入设施名称" />
- </el-form-item>
- <el-form-item label="设施编号" prop="fpdCode">
- <el-input v-model="form.fpdCode" placeholder="请输入设施编号" disabled />
- </el-form-item>
- <el-form-item label="所在位置" prop="fpdLocal">
- <el-input v-model="form.fpdLocal" placeholder="请输入所在位置" />
- </el-form-item>
- <el-form-item label="所属单位" prop="orgIds">
- <el-input v-model="form.orgIds" @focus="handleChoice" placeholder="请选择所属单位" clearable />
- <!-- <el-input v-model="form.orgId" placeholder="请输入所属单位" /> -->
- <!-- <el-select v-model="form.orgId" placeholder="请选择所属单位" @change="orgOptionsChange" style="width: 100%">
- <el-option v-for="dict in this.orgOptions" :key="dict.value" :label="dict.orgName" :value="dict.id" />
- </el-select> -->
- </el-form-item>
- <el-form-item label="所属建筑" prop="buildingId">
- <el-input v-model="form.buildingId" placeholder="请输入所属建筑" />
- <!-- <el-select v-model="form.buildingId" placeholder="请选择所属建筑" style="width: 100%">
- <el-option v-for="dict in this.BuildingInfoOptions" :key="dict.value" :label="dict.buildingName"
- :value="dict.id" />
- </el-select> -->
- </el-form-item>
- <el-form-item label="设施类别" prop="fpdType">
- <el-select v-model="form.fpdType" placeholder="请选择设施类别" style="width: 100%">
- <el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_FIRE_DECIVE_TYPE)" :key="dict.value"
- :label="dict.label" :value="dict.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="设施二维码" prop="fpdQcode">
- <!-- <el-input v-model="form.fpdQcode" placeholder="请输入设施二维码" /> -->
- <img v-if="form.fpdQcode" :src="form.fpdQcode" style="width:40px;height:40px">
- </el-form-item>
- <!-- <el-form-item label="状态" prop="status">
- <el-radio-group v-model="form.status" style="width: 100%">
- <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)" :key="dict.value"
- :label="parseInt(dict.value)">{{ dict.label }}</el-radio>
- </el-radio-group>
- </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>
- <el-dialog title="消防设施查看" :visible.sync="openSeedialog" width="60vw" class="detail detail-style">
- <el-form ref="form" :model="form" label-width="auto" label-position="left">
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="设施名称:" prop="fpdName">
- <div>{{ form.fpdName }}</div>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="设施编号:" prop="fpdCode">
- <div>{{ form.fpdCode }}</div>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="所在位置:" prop="fpdLocal">
- <div>{{ form.fpdLocal }}</div>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="所属单位:" prop="orgId">
- <div>{{ orgOptionsTran(form.orgId) }}</div>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="所属建筑:" prop="buildingId">
- <div>{{ form.buildingId }}</div>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="设施类别:" prop="fpdType">
- <dict-tag :type="DICT_TYPE.DICT_FIRE_DECIVE_TYPE" :value="form.fpdType" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="设施二维码:">
- <img v-if="form.fpdQcode" :src="form.fpdQcode" style="width:40px;height:40px"
- @click="bigFpdCode(form.fpdQcode)">
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <span slot="footer" class="dialog-footer">
- <el-button @click="openSeedialog = false">关 闭</el-button>
- </span>
- </el-dialog>
- <!-- 分配分管单位 -->
- <el-dialog title="分配分管单位" :visible.sync="openOrg" width="85vw" append-to-body v-if="openOrg">
- <choiceSelectCopy ref="choiceSelect" :userId="form.id" :type="'tackinfo'"></choiceSelectCopy>
- <div slot="footer" class="dialog-footer">
- <el-button type="primary" @click="submitOrg">确 定</el-button>
- <el-button @click="cancelOrg">取 消</el-button>
- </div>
- </el-dialog>
- <el-dialog title="二维码查看" :visible.sync="fpdCodeShow" width="25vw" class="detail">
- <img v-if="fpdQcode" :src="fpdQcode" style="width: 100%;">
- <span slot="footer" class="dialog-footer">
- <el-button style="color: #1890ff;" @click="handleExportMsg">下载二维码</el-button>
- </span>
- </el-dialog>
- </div>
- </template>
- <script>
- import { createFpd, updateFpd, deleteFpd, getFpd, getFpdPage, exportFpdExcel, getFpdByOrgId } from "@/api/backend/fpd"
- import { DICT_TYPE, getDictDatas } from "@/utils/dict";
- import { addUserOrgSaveBatch, getOneUser2OrgList } from "@/api/system/org";
- import { getBuildingInfoByOrgIde } from "@/api/backend/buildingInfo"
- import choiceSelectCopy from "@/components/choiceSelectCopy";
- export default {
- name: "Fpd",
- components: {
- choiceSelectCopy,
- },
- data() {
- return {
- // 遮罩层
- loading: false,
- // 导出遮罩层
- exportLoading: false,
- // 显示搜索条件
- showSearch: true,
- // 总条数
- total: 0,
- // 消防设施列表
- list: [],
- // 弹出层标题
- title: "",
- openSeedialog: false,
- // 是否显示弹出层
- open: false,
- openOrg: false,
- // 查询参数
- queryParams: {
- pageNo: 1,
- pageSize: 10,
- fpdName: null,
- fpdCode: null,
- fpdLocal: null,
- orgId: null,
- buildingId: null,
- fpdType: null,
- fpdQcode: null,
- createTime: [],
- status: null,
- },
- // 表单参数
- form: {
- status: 0,
- orgId: '',
- orgIds: ''
- },
- // 表单校验
- rules: {
- status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
- },
- // 根据用户id获取对应的单位信息
- orgOptions: [],
- // 根据单位id获得建筑信息分页
- BuildingInfoOptions: [],
- // 搜索时根据单位id获得建筑信息分页
- BuildingInfoOptionsParams: [],
- orgOptionsTranList: {},
- fpdCodeShow: false,//二维码弹框
- fpdQcode: "",
- data:{}
- }
- },
- created() {
- this.getList()
- this.getTreeselect()
- },
- props: ["orgId"],
- watch: {
- orgId: { //深度监听,可监听到对象、数组的变化
- handler(newV, oldV) {
- console.log('this.orgId :>> ', this.orgId);
- // if (this.orgId == undefined) {
- // this.getList()
- // this.getTreeselect()
- // return
- // }
- // if (this.orgId !== null) {
- // this.queryParams.orgId = this.orgId
- // this.form.orgId = this.orgId
- // this.getListFpdByOrgId()
- // this.getTreeselect()
- // }
- this.getList()
- this.getTreeselect()
- },
- deep: true,
- }
- },
- methods: {
- handleChoice() {
- // 打开弹窗==========
- this.openOrg = true;
- },
- //二维码放大下载
- bigFpdCode(val) {
- this.fpdQcode = val
- this.fpdCodeShow = true
- },
- /** 导出按钮操作 */
- handleExportMsg() {
- this.$download.zip(this.fpdQcode, "消防二维码.zip");
- },
- /** 单位信息确认按钮 */
- submitOrg() {
- console.log('this.orgType :>> ', this.$refs["choiceSelect"].confirmMSg());
- this.data = this.$refs["choiceSelect"].confirmMSg()
- this.form.orgIds = this.data.orgName
- // 关闭弹窗
- this.openOrg = false;
- // this.orgshow = true
- },
- // 取消按钮(分管单位)
- cancelOrg() {
- this.openOrg = false;
- },
- /** 查询列表 */
- getList() {
- this.loading = true
- // 执行查询
- // getFpdPage(this.queryParams).then(response => {
- // this.list = response.data.list
- // this.total = response.data.total
- // this.loading = false
- // })
- // 根据单位id获得消防设施带分页
- // if (this.orgId !== null && this.orgId !== undefined) { //屏蔽后数据不转圈了
- // this.queryParams.orgId = this.orgId //屏蔽是暂时的,没有orgId
- getFpdByOrgId(this.queryParams).then(response => {
- this.loading = false
- this.list = response.data.records
- this.total = response.data.total
- })
- // }
- },
- /** 查询单位下拉树结构 */
- // 根据用户id获取对应的单位信息
- getTreeselect() {
- const id = this.$store.state.user.id
- var OrgqueryParams = {
- pageNo: 1,
- pageSize: 100,
- userId: id,
- }
- // getOneUser2OrgList(OrgqueryParams).then(response => {
- // // 处理 deptOptions 参数
- // this.orgOptions = [];
- // // this.orgOptions = response.data[0] ? response.data[0].orgDOList : [] //在报错所以屏蔽了
- // this.orgOptions = response.data ? response.data : []
- // console.log(response, 'responseresponseresponse');
- // this.orgOptions.map(i => {
- // this.orgOptionsTranList[i.id] = i.orgName
- // })
- // });
- },
- // 转换=======================================================================================
- // 获所有建筑信息
- orgOptionsTran(val) {
- return this.orgOptionsTranList[parseInt(val)]
- },
- // ================================================================================
- // 下拉框改变时
- orgOptionsChange(e) {
- this.form.buildingId = undefined
- this.getBuildingInfoByOrgIdList({ orBuildingInfoOptionsgId: e })
- },
- // 获取单位信息选择后的建筑信息
- getBuildingInfoByOrgIdList(Params) {
- getBuildingInfoByOrgIde(Params).then(response => {
- // 处理 deptOptions 参数
- this.BuildingInfoOptions = [];
- if (this.form.buildingId) {
- response.data.map(i => {
- if (i.id == this.form.buildingId) {
- this.form.buildingId = i.buildingName
- }
- })
- }
- this.BuildingInfoOptions = response.data
- });
- },
- // 搜索是下拉获取建筑信息
- orgOptionsChangeParams(e) {
- // this.queryParams.buildingId = undefined
- getBuildingInfoByOrgIde({ orgId: e }).then(response => {
- // 处理 deptOptions 参数
- this.BuildingInfoOptionsParams = [];
- this.BuildingInfoOptionsParams = response.data
- });
- },
- /** 查看按钮操作 */
- handleSee(row) {
- this.reset();
- const id = row.id;
- getFpd(id).then((response) => {
- this.form = response.data;
- this.openSeedialog = true;
- });
- },
- /** 取消按钮 */
- cancel() {
- this.open = false
- this.reset()
- },
- /** 表单重置 */
- reset() {
- this.form = {
- id: undefined,
- fpdName: undefined,
- fpdCode: undefined,
- fpdLocal: undefined,
- orgId: undefined,
- buildingId: undefined,
- fpdType: undefined,
- fpdQcode: undefined,
- status: 0,
- }
- this.resetForm("form")
- this.form.orgId = this.orgId
- },
- /** 搜索按钮操作 */
- handleQuery() {
- this.queryParams.pageNo = 1
- this.getList()
- },
- /** 重置按钮操作 */
- resetQuery() {
- this.resetForm("queryForm")
- this.handleQuery()
- },
- /** 新增按钮操作 */
- handleAdd() {
- this.reset()
- this.open = true
- this.title = "添加消防设施"
- },
- /** 修改按钮操作 */
- handleUpdate(row) {
- this.reset()
- const id = row.id
- console.log(row, 'fffffffffff');
- getFpd(id).then(response => {
- this.form = response.data
- this.form.orgIds = row.orgDO.orgName
- this.data.dwid=row.orgId
- this.open = true
- this.title = "修改消防设施"
- })
- // this.getBuildingInfoByOrgIdList({
- // orgId: this.form.orgId,
- // })
- },
- /** 提交按钮 */
- submitForm() {
- if (!this.form.orgIds) {
- return this.$modal.msgError("请选择所属单位")
- }
- this.form.orgId = this.data.dwid
- this.$refs["form"].validate((valid) => {
- if (!valid) {
- return
- }
- // 修改的提交
- if (this.form.id != null) {
- updateFpd(this.form).then((response) => {
- this.$modal.msgSuccess("修改成功")
- this.open = false
- this.getList()
- })
- return
- }
- // 添加的提交
- // this.form.orgId=this.data.dwid
- createFpd(this.form).then((response) => {
- this.$modal.msgSuccess("新增成功")
- this.open = false
- this.getList()
- })
- })
- },
- /** 删除按钮操作 */
- handleDelete(row) {
- const id = row.id
- this.$modal
- .confirm('是否确认删除编号为"' + id + '"的数据项?')
- .then(function () {
- return deleteFpd(id)
- })
- .then(() => {
- this.getList()
- this.$modal.msgSuccess("删除成功")
- })
- .catch(() => { })
- },
- /** 导出按钮操作 */
- handleExport() {
- // 处理查询参数
- let params = { ...this.queryParams }
- params.pageNo = undefined
- params.pageSize = undefined
- // 执行导出
- this.$modal
- .confirm("是否确认导出所有数据项?")
- .then(() => {
- this.exportLoading = true
- return exportFpdExcel(params)
- })
- .then((response) => {
- this.$download.excel(response, "消防设施.xls")
- this.exportLoading = false
- })
- .catch(() => { })
- },
- },
- }
- </script>
- <style lang="scss" scoped>
- @import "~@/assets/styles/dialog.scss";
- .detail {
- display: flex;
- justify-content: center;
- align-items: center;
- ::v-deep .el-dialog__footer {
- text-align: center;
- }
- ::v-deep .el-form-item__label,
- ::v-deep .el-form-item__content {
- font-size: 16px;
- color: #86909C;
- font-weight: 500;
- }
- ::v-deep .el-form-item__content {
- font-size: 14px;
- color: #444444 !important;
- }
- }
- </style>
|