|
|
@@ -0,0 +1,349 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple">
|
|
|
+ <el-input
|
|
|
+ placeholder="输入部门名称"
|
|
|
+ v-model="filterText">
|
|
|
+ </el-input>
|
|
|
+ <el-tree
|
|
|
+ class="filter-tree"
|
|
|
+ :data="data"
|
|
|
+ :props="defaultProps"
|
|
|
+ default-expand-all
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ ref="tree">
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20">
|
|
|
+ <div class="grid-content bg-purple">
|
|
|
+ <el-form :inline="true" size="small" :model="formInline" class="demo-form-inline">
|
|
|
+ <el-form-item label="姓名">
|
|
|
+ <el-input size="small" v-model="formInline.user" placeholder="姓名"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="移动电话">
|
|
|
+ <el-input size="small" v-model="formInline.user" placeholder="移动电话"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-row :gutter="10" style="margin-bottom:8px;">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-user"
|
|
|
+ size="mini"
|
|
|
+ :disabled="single"
|
|
|
+ @click="dialogFormVisible = true"
|
|
|
+ >新增</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5" >
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ size="mini"
|
|
|
+ :disabled="multiple"
|
|
|
+ @click="handleDelete"
|
|
|
+ >删除</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-table
|
|
|
+ :data="tableData" border
|
|
|
+ style="width: 100%">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="60" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="姓名"
|
|
|
+ prop="id">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="部门"
|
|
|
+ prop="name">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="移动电话"
|
|
|
+ prop="category">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="办公电话"
|
|
|
+ prop="desc">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="150" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="handleUpdate1(scope.row)"
|
|
|
+ v-hasPermi="['system:info:edit']"
|
|
|
+ >修改</el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ v-hasPermi="['system:info:remove']"
|
|
|
+ >删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+ <el-dialog title="新增用户" :visible.sync="dialogFormVisible">
|
|
|
+ <el-form :model="form">
|
|
|
+ <el-form-item label="姓名" :label-width="formLabelWidth">
|
|
|
+ <el-input style="width: 200px;" v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="部门" :label-width="formLabelWidth">
|
|
|
+ <el-select v-model="form.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="局长" value="shanghai"></el-option>
|
|
|
+ <el-option label="副局长" value="beijing"></el-option>
|
|
|
+ <el-option label="办公室" value="beijing"></el-option>
|
|
|
+ <el-option label="审批一科" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="移动电话" :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="主要办公电话" :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="次要办公电话" :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+ import {listList, getList, addList, updateList, delList } from "@/api/system/addresslist/addresslist";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'maillist',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogFormVisible: false,
|
|
|
+ form: {
|
|
|
+ name: '',
|
|
|
+ region: '',
|
|
|
+ date1: '',
|
|
|
+ date2: '',
|
|
|
+ delivery: false,
|
|
|
+ type: [],
|
|
|
+ resource: '',
|
|
|
+ desc: ''
|
|
|
+ },
|
|
|
+ formLabelWidth: '100px',
|
|
|
+ filterText: '',
|
|
|
+ data: [{
|
|
|
+ id: 1,
|
|
|
+ label: '通讯录',
|
|
|
+ children: [{
|
|
|
+ id: 4,
|
|
|
+ label: '局长',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ label: '副局长',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ label: '办公室',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ label: '政务服务管理科',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 8,
|
|
|
+ label: '政策法规科',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 9,
|
|
|
+ label: '现场勘验科',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 10,
|
|
|
+ label: '审批一科',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }, ],
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'label'
|
|
|
+ },
|
|
|
+
|
|
|
+ formInline: {
|
|
|
+ user: '',
|
|
|
+ region: ''
|
|
|
+ },
|
|
|
+ tableData: [{
|
|
|
+ index:0,
|
|
|
+ id: '李大',
|
|
|
+ name: '办公室',
|
|
|
+ category: '12345678910',
|
|
|
+ desc: '0311-86125678',
|
|
|
+ address: [
|
|
|
+ '12号窗口：85537672（社会事务）',
|
|
|
+ '13号窗口：855537672（交通涉农）',
|
|
|
+ '14号窗口：85501239（市场服务）',
|
|
|
+ '15号窗口：85501239（市场服务）',
|
|
|
+ '16号窗口：85501239（安全环保）',
|
|
|
+ '制证窗口01:85537650',
|
|
|
+ '制证窗口02:85537650',
|
|
|
+ '制证窗口03:85537650',
|
|
|
+ '制证窗口04:85537650',
|
|
|
+ '综合出征：85501127',
|
|
|
+ '邮寄送达：85501127',
|
|
|
+ '档案查询：85501127'
|
|
|
+ ],
|
|
|
+ shop: '王小虎夫妻店',
|
|
|
+ shopId: '10333'
|
|
|
+ }, {
|
|
|
+ index:1,
|
|
|
+ id: '王二',
|
|
|
+ name: '政策法规科',
|
|
|
+ category: '12345678910',
|
|
|
+ desc: '0311-86125678',
|
|
|
+ address: [
|
|
|
+ '12号窗口：85537672（社会事务）',
|
|
|
+ '13号窗口：855537672（交通涉农）',
|
|
|
+ '14号窗口：85501239（市场服务）',
|
|
|
+ '15号窗口：85501239（市场服务）',
|
|
|
+ '16号窗口：85501239（安全环保）',
|
|
|
+ '制证窗口01:85537650',
|
|
|
+ '制证窗口02:85537650',
|
|
|
+ '制证窗口03:85537650',
|
|
|
+ '制证窗口04:85537650',
|
|
|
+ '综合出征：85501127',
|
|
|
+ '邮寄送达：85501127',
|
|
|
+ '档案查询：85501127'
|
|
|
+ ],
|
|
|
+ shop: '王小虎夫妻店',
|
|
|
+ shopId: '10333'
|
|
|
+ }, {
|
|
|
+ index:2,
|
|
|
+ id: '张三',
|
|
|
+ name: '现场勘验科',
|
|
|
+ category: '12345678910',
|
|
|
+ desc: '0311-86125678',
|
|
|
+ address: [
|
|
|
+ '12号窗口：85537672（社会事务）',
|
|
|
+ '13号窗口：855537672（交通涉农）',
|
|
|
+ '14号窗口：85501239（市场服务）',
|
|
|
+ '15号窗口：85501239（市场服务）',
|
|
|
+ '16号窗口：85501239（安全环保）',
|
|
|
+ '制证窗口01:85537650',
|
|
|
+ '制证窗口02:85537650',
|
|
|
+ '制证窗口03:85537650',
|
|
|
+ '制证窗口04:85537650',
|
|
|
+ '综合出征：85501127',
|
|
|
+ '邮寄送达：85501127',
|
|
|
+ '档案查询：85501127'
|
|
|
+ ],
|
|
|
+ shop: '王小虎夫妻店',
|
|
|
+ shopId: '10333'
|
|
|
+ }, {
|
|
|
+ index:3,
|
|
|
+ id: '李四',
|
|
|
+ name: '审批一科',
|
|
|
+ category: '12345678910',
|
|
|
+ desc: '0311-86125678',
|
|
|
+ address: [
|
|
|
+ '12号窗口：85537672（社会事务）',
|
|
|
+ '13号窗口：855537672（交通涉农）',
|
|
|
+ '14号窗口：85501239（市场服务）',
|
|
|
+ '15号窗口：85501239（市场服务）',
|
|
|
+ '16号窗口：85501239（安全环保）',
|
|
|
+ '制证窗口01:85537650',
|
|
|
+ '制证窗口02:85537650',
|
|
|
+ '制证窗口03:85537650',
|
|
|
+ '制证窗口04:85537650',
|
|
|
+ '综合出征：85501127',
|
|
|
+ '邮寄送达：85501127',
|
|
|
+ '档案查询：85501127'
|
|
|
+ ],
|
|
|
+ shop: '王小虎夫妻店',
|
|
|
+ shopId: '10333'
|
|
|
+ }],
|
|
|
+ inputVisible: false,
|
|
|
+ inputValue: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleClose(item,i,s) {
|
|
|
+ alert(i)
|
|
|
+ let u = s + 1;
|
|
|
+ this.tableData[i].address.splice(this.tableData[i].address.indexOf(s), 1);
|
|
|
+ },
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
+ },
|
|
|
+
|
|
|
+ showInput(i) {
|
|
|
+ this.inputVisible= true;
|
|
|
+ document.getElementsByClassName("input-new-tag")[i].style.display = "none";
|
|
|
+ this.$nextTick(_ => {
|
|
|
+ this.$refs.saveTagInput.$refs.input.focus();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ handleInputConfirm(i) {
|
|
|
+ let inputValue = this.inputValue;
|
|
|
+ if (inputValue) {
|
|
|
+ this.tableData[i].address.push(inputValue);
|
|
|
+ }
|
|
|
+ this.inputVisible = false;
|
|
|
+ this.inputValue = '';
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ filterText(val) {
|
|
|
+ this.$refs.tree.filter(val);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .demo-table-expand {
|
|
|
+ font-size: 0;
|
|
|
+ }
|
|
|
+ .demo-table-expand label {
|
|
|
+ width: 90px;
|
|
|
+ color: #99a9bf;
|
|
|
+ }
|
|
|
+ .demo-table-expand .el-form-item {
|
|
|
+ margin-right: 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .demo-table-expand .el-form-item span{
|
|
|
+ padding-left: 15px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .input-new-tag{
|
|
|
+ width: 200px;
|
|
|
+ margin-left: 15px;
|
|
|
+ }
|
|
|
+ .button-new-tag{
|
|
|
+ margin-left: 15px;
|
|
|
+ }
|
|
|
+</style>
|
安生