xinhuaqujiaoyujuPCOA/src/views/system/maillist/maillist.vue

<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>