|
@@ -0,0 +1,280 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="search">
|
|
|
+ <el-input placeholder="请输入联系人查询" style="width: 200px" v-model="userName"></el-input>
|
|
|
+ <el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
|
|
|
+ <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="operation">
|
|
|
+ <el-button type="primary" plain @click="handleAdd">新增</el-button>
|
|
|
+ <el-button type="danger" plain @click="delBatch">批量删除</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="table">
|
|
|
+ <el-table :data="tableData" strip @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="id" label="序号" width="70" align="center" sortable></el-table-column>
|
|
|
+ <el-table-column prop="address" label="地址"></el-table-column>
|
|
|
+ <el-table-column prop="doorNo" label="门牌号"></el-table-column>
|
|
|
+ <el-table-column prop="userName" label="联系人"></el-table-column>
|
|
|
+ <el-table-column prop="phone" label="联系电话"></el-table-column>
|
|
|
+ <el-table-column prop="userId" label="关联用户ID" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="user" label="关联用户"></el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="180">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
|
|
|
+ <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="pageNum"
|
|
|
+ :page-sizes="[5, 10, 20]"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <el-dialog title="信息" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
|
|
|
+ <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
|
|
|
+ <el-form-item label="地址" prop="address">
|
|
|
+ <el-input v-model="form.address" placeholder="地址"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="门牌号" prop="doorNo">
|
|
|
+ <el-input v-model="form.doorNo" placeholder="门牌号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系人" prop="userName">
|
|
|
+ <el-input v-model="form.userName" placeholder="联系人"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系电话" prop="phone">
|
|
|
+ <el-input v-model="form.phone" placeholder="联系电话"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="关联用户" prop="userId">
|
|
|
+ <el-select style="width: 100%" v-model="form.userId">
|
|
|
+ <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="fromVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="save">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "Address",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [], // 所有的数据
|
|
|
+ userList: [],
|
|
|
+ pageNum: 1, // 当前的页码
|
|
|
+ pageSize: 10, // 每页显示的个数
|
|
|
+ total: 0,
|
|
|
+ userName: null,
|
|
|
+ fromVisible: false,
|
|
|
+ form: {},
|
|
|
+ user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
|
|
|
+ rules: {
|
|
|
+ address: [
|
|
|
+ {required: true, message: '请输入地址', trigger: 'blur'},
|
|
|
+ ],
|
|
|
+ doorNo: [
|
|
|
+ {required: true, message: '请输入门牌号', trigger: 'blur'},
|
|
|
+ ],
|
|
|
+ userName: [
|
|
|
+ {required: true, message: '请输入联系人', trigger: 'blur'},
|
|
|
+ ],
|
|
|
+ phone: [
|
|
|
+ {required: true, message: '请输入电话', trigger: 'blur'},
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ ids: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.load(1)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleAdd() { // 新增数据
|
|
|
+ this.form = {} // 新增数据的时候清空数据
|
|
|
+ this.fromVisible = true // 打开弹窗
|
|
|
+ },
|
|
|
+ handleEdit(row) { // 编辑数据
|
|
|
+ this.form = JSON.parse(JSON.stringify(row)) // 给form对象赋值 注意要深拷贝数据
|
|
|
+ this.$request.get('/user/selectAll').then(res => {
|
|
|
+ this.userList = res.data || []
|
|
|
+
|
|
|
+ this.fromVisible = true // 打开弹窗
|
|
|
+ })
|
|
|
+ },
|
|
|
+ save() { // 保存按钮触发的逻辑 它会触发新增或者更新
|
|
|
+ this.$refs.formRef.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.$request({
|
|
|
+ url: this.form.id ? '/address/update' : '/address/add',
|
|
|
+ method: this.form.id ? 'PUT' : 'POST',
|
|
|
+ data: this.form
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code === '200') { // 表示成功保存
|
|
|
+ this.$message.success('保存成功')
|
|
|
+ this.load(1)
|
|
|
+ this.fromVisible = false
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg) // 弹出错误的信息
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ del(id) { // 单个删除
|
|
|
+ this.$confirm('您确定删除吗?', '确认删除', {type: "warning"}).then(response => {
|
|
|
+ this.$request.delete('/address/delete/' + id).then(res => {
|
|
|
+ if (res.code === '200') { // 表示操作成功
|
|
|
+ this.$message.success('操作成功')
|
|
|
+ this.load(1)
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg) // 弹出错误的信息
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSelectionChange(rows) { // 当前选中的所有的行数据
|
|
|
+ this.ids = rows.map(v => v.id) // [1,2]
|
|
|
+ },
|
|
|
+ delBatch() { // 批量删除
|
|
|
+ if (!this.ids.length) {
|
|
|
+ this.$message.warning('请选择数据')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$confirm('您确定批量删除这些数据吗?', '确认删除', {type: "warning"}).then(response => {
|
|
|
+ this.$request.delete('/address/delete/batch', {data: this.ids}).then(res => {
|
|
|
+ if (res.code === '200') { // 表示操作成功
|
|
|
+ this.$message.success('操作成功')
|
|
|
+ this.load(1)
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg) // 弹出错误的信息
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ })
|
|
|
+ },
|
|
|
+ load(pageNum) { // 分页查询
|
|
|
+ if (pageNum) this.pageNum = pageNum
|
|
|
+ this.$request.get('/address/selectPage', {
|
|
|
+ params: {
|
|
|
+ pageNum: this.pageNum,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ userName: this.userName,
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ this.tableData = res.data?.list
|
|
|
+ this.total = res.data?.total
|
|
|
+ })
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.userName = null
|
|
|
+ this.load(1)
|
|
|
+ },
|
|
|
+ handleCurrentChange(pageNum) {
|
|
|
+ this.load(pageNum)
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style><?xml version="1.0" encoding="UTF-8"?>
|
|
|
+<!DOCTYPE mapper
|
|
|
+ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
|
|
+ "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
|
|
|
+<mapper namespace="com.example.mapper.AddressMapper">
|
|
|
+
|
|
|
+<sql id="Base_Column_List">
|
|
|
+ id,address,door_no,user_name,phone,user_id
|
|
|
+</sql>
|
|
|
+
|
|
|
+<select id="selectAll" resultType="com.example.entity.Address">
|
|
|
+ select
|
|
|
+ <include refid="Base_Column_List" />
|
|
|
+ from address
|
|
|
+ <where>
|
|
|
+ <if test="id != null"> and id = #{id}</if>
|
|
|
+ <if test="address != null"> and address like concat('%', #{address}, '%')</if>
|
|
|
+ <if test="doorNo != null"> and door_no like concat('%', #{doorNo}, '%')</if>
|
|
|
+ <if test="userName != null"> and user_name like concat('%', #{userName}, '%')</if>
|
|
|
+ <if test="phone != null"> and phone like concat('%', #{phone}, '%')</if>
|
|
|
+ <if test="userId != null"> and user_id = #{userId}</if>
|
|
|
+ </where>
|
|
|
+ order by id desc
|
|
|
+</select>
|
|
|
+
|
|
|
+<select id="selectById" resultType="com.example.entity.Address">
|
|
|
+ select
|
|
|
+ <include refid="Base_Column_List" />
|
|
|
+ from address
|
|
|
+ where id = #{id}
|
|
|
+</select>
|
|
|
+
|
|
|
+<delete id="deleteById">
|
|
|
+ delete from address
|
|
|
+ where id = #{id}
|
|
|
+</delete>
|
|
|
+
|
|
|
+<insert id="insert" parameterType="com.example.entity.Address" useGeneratedKeys="true" keyProperty="id">
|
|
|
+ insert into address
|
|
|
+ <trim prefix="(" suffix=")" suffixOverrides=",">
|
|
|
+ <if test="id != null">id,</if>
|
|
|
+ <if test="address != null">address,</if>
|
|
|
+ <if test="doorNo != null">door_no,</if>
|
|
|
+ <if test="userName != null">user_name,</if>
|
|
|
+ <if test="phone != null">phone,</if>
|
|
|
+ <if test="userId != null">user_id,</if>
|
|
|
+ </trim>
|
|
|
+ <trim prefix="values (" suffix=")" suffixOverrides=",">
|
|
|
+ <if test="id != null">#{id},</if>
|
|
|
+ <if test="address != null">#{address},</if>
|
|
|
+ <if test="doorNo != null">#{doorNo},</if>
|
|
|
+ <if test="userName != null">#{userName},</if>
|
|
|
+ <if test="phone != null">#{phone},</if>
|
|
|
+ <if test="userId != null">#{userId},</if>
|
|
|
+ </trim>
|
|
|
+</insert>
|
|
|
+
|
|
|
+<update id="updateById" parameterType="com.example.entity.Address">
|
|
|
+ update address
|
|
|
+ <set>
|
|
|
+ <if test="address != null">
|
|
|
+ address = #{address},
|
|
|
+ </if>
|
|
|
+ <if test="doorNo != null">
|
|
|
+ door_no = #{doorNo},
|
|
|
+ </if>
|
|
|
+ <if test="userName != null">
|
|
|
+ user_name = #{userName},
|
|
|
+ </if>
|
|
|
+ <if test="phone != null">
|
|
|
+ phone = #{phone},
|
|
|
+ </if>
|
|
|
+ <if test="userId != null">
|
|
|
+ user_id = #{userId},
|
|
|
+ </if>
|
|
|
+ </set>
|
|
|
+ where id = #{id}
|
|
|
+</update>
|
|
|
+
|
|
|
+</mapper>
|