123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617 |
- <template>
- <div class="app-container">
- <div ref="sousuH">
- <!-- 搜索工作栏 -->
- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
- <el-form-item label="区县" prop="county">
- <el-input v-model="queryParams.county" placeholder="请输入区县" clearable @keyup.enter.native="handleQuery" />
- </el-form-item>
- <el-form-item label="社区/单位名称" prop="microName">
- <el-input v-model="queryParams.microName" placeholder="请输入社区/单位名称" clearable
- @keyup.enter.native="handleQuery" />
- </el-form-item>
- <el-form-item label="建站日期" prop="builtOn">
- <el-date-picker clearable v-model="queryParams.builtOn" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
- placeholder="建站日期" />
- <!-- <el-input v-model="queryParams.builtOn" placeholder="请输入建站日期" clearable @keyup.enter.native="handleQuery" /> -->
- </el-form-item>
- <el-form-item label="负责人(站长)" prop="charger">
- <el-input v-model="queryParams.charger" placeholder="请输入负责人(站长)" clearable @keyup.enter.native="handleQuery" />
- </el-form-item>
- <el-form-item label="报警电话" prop="alarmTel">
- <el-input v-model="queryParams.alarmTel" placeholder="请输入报警电话" clearable @keyup.enter.native="handleQuery" />
- </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:micro-station: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:micro-station:export']">导出</el-button>
- </el-col> -->
- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
- </el-row>
- </div>
- <!-- 列表 -->
- <!-- <el-table v-loading="loading" :data="list" :height="list.length ? tableHeight : 'auto'"> -->
- <el-table v-loading="loading" :data="list">
- <el-table-column label="ID" align="center" prop="id" />
- <el-table-column label="区县" align="center" prop="county" />
- <el-table-column label="社区/单位名称" align="center" prop="microName" width="200">
- <template v-slot="scope">
- <span style="color: forestgreen" @click="showOpentabs(scope.row)">{{ scope.row.microName }}</span>
- </template>
- </el-table-column>
- <!-- <el-table-column label="社区/单位名称" align="center" prop="microName" width="120"/> -->
- <el-table-column label="详细地址" align="center" prop="addr" />
- <el-table-column label="建站日期" align="center" prop="builtOn" width="180">
- <template v-slot="scope">
- <span>{{ parseTime(scope.row.builtOn) }}</span>
- </template>
- </el-table-column>
- <el-table-column label="负责人(站长)" align="center" prop="charger" width="120" />
- <el-table-column label="报警电话" align="center" prop="alarmTel" />
- <el-table-column label="队员数" align="center" prop="members" />
- <el-table-column label="控制室值班人员" align="center" prop="dutyer" width="130" />
- <el-table-column label="水罐车" align="center" prop="waterTanker" />
- <el-table-column label="泡沫车" align="center" prop="foamCar" />
- <el-table-column label="消防摩托" align="center" prop="fireMoto" />
- <el-table-column label="其它" align="center" prop="others" />
- <!-- <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="200">
- <template v-slot="scope">
- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
- v-hasPermi="['backend:micro-station:update']">修改</el-button>
- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
- v-hasPermi="['backend:micro-station:delete']">删除</el-button>
- <el-button type="text" size="mini" @click="searchAllPeople(scope.row)">查看现有人员</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="60%" v-dialogDrag append-to-body class="details">
- <el-form ref="form" :model="form" :rules="rules" label-width="auto">
- <el-row :gutter="20">
- <el-col :span="11">
- <el-form-item label="区县" prop="county">
- <el-input v-model="form.county" placeholder="请输入区县" />
- </el-form-item></el-col>
- <el-col :span="11">
- <el-form-item label="社区/单位名称" prop="microName">
- <el-input v-model="form.microName" placeholder="请输入社区/单位名称" />
- </el-form-item></el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="11">
- <el-form-item label="详细地址" prop="addr">
- <el-input v-model="form.addr" placeholder="请输入详细地址" />
- </el-form-item></el-col>
- <el-col :span="11">
- <el-form-item label="建站日期" prop="builtOn">
- <el-date-picker clearable v-model="form.builtOn" type="date" value-format="timestamp" placeholder="建站日期"
- style="width: 100%;" />
- </el-form-item></el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="11">
- <el-form-item label="负责人(站长)" prop="charger">
- <el-input v-model="form.charger" placeholder="请输入负责人(站长)" />
- </el-form-item>
- </el-col>
- <!-- <el-col :span="5"> -->
- <!-- <el-button type="primary" size="small" @click="addNewPeople">新增人员</el-button> -->
- <!-- <el-button type="primary" size="small" @click="submitFormBut">提交新人员</el-button> -->
- <!-- </el-col> -->
- <el-col :span="11">
- <el-form-item label="报警电话" prop="alarmTel">
- <el-input v-model="form.alarmTel" placeholder="请输入报警电话" />
- </el-form-item></el-col>
- </el-row>
- <el-row v-for="(item, index) in formItems" :key="index" :gutter="20">
- <el-col :span="11">
- <el-form-item :label="item.label" :prop="item.prop">
- <el-input v-model="item.value" :placeholder="item.placeholder" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="11">
- <el-form-item label="队员数" prop="members">
- <el-input v-model="form.members" placeholder="请输入队员数" />
- </el-form-item></el-col>
- <el-col :span="11">
- <el-form-item label="控制室值班人员" prop="dutyer">
- <el-input v-model="form.dutyer" placeholder="请输入控制室值班人员" />
- </el-form-item></el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="11">
- <el-form-item label="水罐车" prop="waterTanker">
- <el-input v-model="form.waterTanker" placeholder="请输入水罐车" />
- </el-form-item></el-col>
- <el-col :span="11">
- <el-form-item label="泡沫车" prop="foamCar">
- <el-input v-model="form.foamCar" placeholder="请输入泡沫车" />
- </el-form-item></el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="11">
- <el-form-item label="消防摩托" prop="fireMoto">
- <el-input v-model="form.fireMoto" placeholder="请输入消防摩托" />
- </el-form-item></el-col>
- <el-col :span="11">
- <el-form-item label="其它" prop="others">
- <el-input v-model="form.others" placeholder="请输入其它" />
- </el-form-item></el-col>
- </el-row>
- <!-- <el-row>
- <el-col :span="12">
- <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-col>
- <el-col :span="12"></el-col>
- </el-row> -->
- </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 :visible.sync="opentabs" width="85vw" append-to-body v-if="opentabs" :title="`单位名称:${opentabsTitle}`">
- <microStationEvent :microId="microId"></microStationEvent>
- </el-dialog>
- <!-- 查看人员的模态框 -->
- <el-dialog title="现有人员" :visible.sync="lookFirePeople" width="50%">
- <el-table :data="firePeople" border style="width: 100%">
- <el-table-column prop="empName" label="姓名" width="120">
- </el-table-column>
- <el-table-column label="人员类型" width="120">
- <template scope="scope">
- <!-- <span>{{ scope.row.empType }}</span> -->
- <span>{{ countType || scope.row.empType }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="idcardno" label="身份证" width="120">
- </el-table-column>
- <el-table-column prop="mobile" label="电话号" width="300">
- </el-table-column>
- <el-table-column fixed="right" label="操作" width="100">
- <template slot-scope="scope">
- <el-button @click="editPeople(scope.row)" type="text" size="small">编辑</el-button>
- <el-button type="text" size="small" @click="delPeople(scope.row)">删除</el-button>
- </template>
- </el-table-column>
- </el-table>
- <span slot="footer" class="dialog-footer">
- <el-button @click="lookFirePeople = false">取 消</el-button>
- <el-button type="primary" @click="makeSureFire">确 定</el-button>
- </span>
- </el-dialog>
- <!-- 内层修改模态框 -->
- <el-dialog title="编辑人员" :visible.sync="insideModal" width="50%">
- <el-form ref="form" :model="insideForm" label-width="80px">
- <el-form-item label="姓名">
- <el-input v-model="insideForm.name" @blur="nameBlur"></el-input>
- <span v-if="nameRule" style="color: red;font-size: 12px;">名字不能为空</span>
- </el-form-item>
- <el-form-item label="人员类型">
- <!-- <el-input v-model="insideForm.type"></el-input> -->
- <el-select v-model="insideForm.type" placeholder="请选择">
- <el-option key="0" label="普通人员" value="0" />
- <el-option key="1" label="值班人员" value="1" />
- <el-option key="2" label="站长" value="2" />
- </el-select>
- </el-form-item>
- <el-form-item label="身份证">
- <el-input v-model="insideForm.idcard" @blur="idcardBlur"></el-input>
- <span v-if="idcardRule" style="color: red;font-size: 12px;">身份证号有误</span>
- </el-form-item>
- <el-form-item label="电话号">
- <el-input v-model="insideForm.phone" @blur="phoneBlur"></el-input>
- <span v-if="phoneRule" style="color: red;font-size: 12px;">电话号有误</span>
- </el-form-item>
- </el-form>
- <span slot="footer" class="dialog-footer">
- <el-button @click="insideModal = false">取 消</el-button>
- <el-button type="primary" @click="insideSure">确 定</el-button>
- </span>
- </el-dialog>
- </div>
- </template>
- <script>
- import { createMicroStation, updateMicroStation, deleteMicroStation, getMicroStation, getMicroStationPage, exportMicroStationExcel } from "@/api/backend/microStation"
- import { getTableHeight } from "@/utils/ruoyi.js";
- import { getAllPeople, delFirePeople, editFirePeople } from '@/api/miniFirestation/index'
- import microStationEvent from "@/views/backend/microStationEvent/index";
- export default {
- name: "MicroStation",
- components: {
- microStationEvent
- },
- data() {
- return {
- microId: '',
- opentabs: false,
- opentabsTitle: '',
- // 遮罩层
- loading: true,
- // 导出遮罩层
- exportLoading: false,
- // 显示搜索条件
- showSearch: true,
- // 总条数
- total: 0,
- // 微型消防站列表
- list: [],
- // 弹出层标题
- title: "",
- // 是否显示弹出层
- open: false,
- // 查询参数
- queryParams: {
- pageNo: 1,
- pageSize: 10,
- county: null,
- microName: null,
- builtOn: null,
- charger: null,
- alarmTel: null,
- status: null,
- },
- // 表单参数
- form: {
- status: 0
- },
- // 表单校验
- rules: {
- status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
- },
- tableHeight: "",
- formItems: [], // 存储表单项的数据
- lookFirePeople: false,
- firePeople: [],
- insideModal: false,
- insideForm: {
- name: "",
- type: "",
- idcard: "",
- phone: ""
- },
- insideUpdateId: '',
- nameRule: false,
- idcardRule: false,
- phoneRule: false,
- firestationid: "",
- }
- },
- props: ["orgId"],
- watch: {
- orgId: { //深度监听,可监听到对象、数组的变化
- handler(newV, oldV) {
- this.getList()
- },
- deep: true
- }
- },
- mounted() {
- //挂载window.onresize事件(动态设置table高度)
- window.addEventListener('resize', () => {
- this.$nextTick(() => {
- if (this.$refs['sousuH']) {
- this.tableHeight = getTableHeight(this.$refs['sousuH'].clientHeight + 200)
- }
- })
- })
- },
- created() {
- this.getList()
- this.$nextTick(() => {
- this.tableHeight = getTableHeight(this.$refs['sousuH'].clientHeight + 200)
- })
- },
- computed: {
- countType(num) {
- // return '456'
- if (num === '1') {
- return '值班人员'
- } else if (num === '2') {
- return '站长'
- } else {
- return '普通人员'
- }
- }
- },
- methods: {
- showOpentabs(micro) {
- this.microId = micro.id
- this.opentabs = true
- this.opentabsTitle = micro.microName
- },
- /** 查询列表 */
- getList() {
- this.loading = true
- // 执行查询
- this.queryParams.orgId = this.orgId
- getMicroStationPage(this.queryParams).then(response => {
- this.list = response.data.list
- this.total = response.data.total
- this.loading = false
- })
- },
- /** 取消按钮 */
- cancel() {
- this.open = false
- this.reset()
- },
- /** 表单重置 */
- reset() {
- this.form = {
- id: undefined,
- county: undefined,
- microName: undefined,
- addr: undefined,
- builtOn: undefined,
- charger: undefined,
- alarmTel: undefined,
- members: undefined,
- dutyer: undefined,
- waterTanker: undefined,
- foamCar: undefined,
- fireMoto: undefined,
- others: undefined,
- status: 0,
- }
- this.resetForm("form")
- },
- /** 搜索按钮操作 */
- handleQuery() {
- this.queryParams.pageNo = 1
- this.getList()
- },
- /** 重置按钮操作 */
- resetQuery() {
- this.resetForm("queryForm")
- this.handleQuery()
- },
- /** 新增按钮操作 */
- handleAdd() {
- this.reset()
- this.open = true
- this.title = "添加微型消防站"
- },
- /** 修改按钮操作 */
- handleUpdate(row) {
- this.formItems = []
- this.reset()
- const id = row.id
- getMicroStation(id).then(response => {
- this.form = response.data
- this.open = true
- this.title = "修改微型消防站"
- })
- },
- /** 提交按钮 */
- submitForm() {
- const antherForm = this.formItems.map((item) => item.value);
- this.$refs["form"].validate((valid) => {
- if (!valid) {
- return
- }
- // 修改的提交
- if (this.form.id != null) {
- updateMicroStation(this.form).then((response) => {
- this.$modal.msgSuccess("修改成功")
- this.open = false
- this.getList()
- })
- return
- }
- // 添加的提交
- createMicroStation(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 deleteMicroStation(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 exportMicroStationExcel(params)
- })
- .then((response) => {
- this.$download.excel(response, "微型消防站列表.xls")
- this.exportLoading = false
- })
- .catch(() => { })
- },
- addNewPeople() {
- // if (this.formItems.length < 24) {
- const newItem = [
- {
- label: `名字`,
- prop: `custom_${this.formItems.length + 1}`,
- value: '',
- placeholder: '请输入名字',
- },
- {
- label: '身份证号',
- prop: `custom_${this.formItems.length + 1}`,
- value: '',
- placeholder: '请输入身份证号',
- },
- {
- label: '电话',
- prop: `custom_${this.formItems.length + 1}`,
- value: '',
- placeholder: '请输入电话号码',
- },
- {
- label: '职务',
- prop: `custom_${this.formItems.length + 1}`,
- value: '',
- placeholder: '请输入职务',
- },
- ];
- this.formItems = this.formItems.concat(newItem);
- // } else {
- // // 达到最大数量,给出提示或执行其他操作
- // console.log('已达到最大数量');
- // console.log(this.formItems.length);
- // }
- },
- submitFormBut() {
- // 获取所有新增表单项的值
- const values = this.formItems.map((item) => item.value);
- console.log(values);
- // 执行其他操作,如提交表单
- },
- searchAllPeople(row) {
- this.firestationid = row.id
- getAllPeople({ pageNo: 1, pageSize: 10, microstationid: row.id }).then(res => {
- this.firePeople = res.data.list
- })
- this.lookFirePeople = true
- },
- makeSureFire() {
- this.lookFirePeople = false
- },
- delPeople(row) {
- delFirePeople(row.id).then(res => {
- if (res.data) {
- this.$message({
- message: '删除成功',
- type: 'success'
- });
- getAllPeople({ pageNo: 1, pageSize: 10, microstationid: this.firestationid }).then(res => {
- this.firePeople = res.data.list
- })
- }
- })
- // this.lookFirePeople = false
- },
- editPeople(row) {
- // console.log(row, 'inside');
- this.insideForm.name = row.empName
- this.insideForm.idcard = row.idcardno
- this.insideForm.phone = row.mobile
- this.insideForm.type = row.empType
- this.insideUpdateId = row.id
- this.insideModal = true
- },
- insideSure() {
- if (!(this.nameRule || this.phoneRule || this.idcardRule)) {
- // 当 nameRule、phoneRule 和 idcardRule 都为 false 时,执行这里的代码
- editFirePeople({ id: this.insideUpdateId, empName: this.insideForm.name, empType: this.insideForm.type, idcardno: this.insideForm.idcard, mobile: this.insideForm.phone }).then(res => {
- // console.log(res,'update');
- if (res.data) {
- this.$message({
- message: '修改成功',
- type: 'success'
- });
- this.insideModal = false
- this.lookFirePeople = false
- }
- })
- } else {
- this.$message({
- message: '请检查表单项',
- type: 'error'
- });
- }
- },
- nameBlur() {
- if (this.insideForm.name === '') {
- this.nameRule = true
- } else {
- this.nameRule = false
- }
- },
- idcardBlur() {
- const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dXx]$/;
- if (idCardRegex.test(this.insideForm.idcard)) {
- this.idcardRule = false
- } else {
- this.idcardRule = true
- }
- },
- phoneBlur() {
- console.log(211);
- const phoneRegex = /^1[3456789]\d{9}$/;
- if (phoneRegex.test(this.insideForm.phone)) {
- this.phoneRule = false
- } else {
- this.phoneRule = true
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .details {
- ::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>
|