1. 新建表单模板

src/api/CURD.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+import { parseStrEmpty } from "@/utils/ruoyi";
+ 
+// 查询table列表
+export function listTableApi(url,query) {
+    return request({
+      url: url,
+      method: 'get',
+      params: query
+    })
+}
+
+// 查询table详细
+export function getTableDeatilsApi(url,userId) {
+    return request({
+      url: url + parseStrEmpty(userId),
+      method: 'get'
+    })
+  }
+  
+  // 新增table
+  export function addTableApi(url,data) {
+    return request({
+      url: url,
+      method: 'post',
+      data: data
+    })
+  }
+  
+  // 修改table
+  export function updateTableApi(url,data) {
+    return request({
+      url: url,
+      method: 'put',
+      data: data
+    })
+  }
+  
+  // 删除table
+  export function delTableApi(url,userId) {
+    return request({
+      url: url + userId,
+      method: 'delete'
+    })
+  }

src/main.js

@@ -38,6 +38,10 @@ import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
 
+// 自定义可复用组件
+import uploadBox from "@/myComponents/uploadBox"
+Vue.component('uploadBox', uploadBox)
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey

src/myComponents/uploadBox.vue

@@ -0,0 +1,89 @@
+<template>
+    <!-- 导入对话框 -->
+    <el-dialog :title="upload.title" :visible.sync="open" :width="upload.width" append-to-body>
+      <el-upload
+        ref="upload"
+        :limit="1"
+        accept=".xlsx, .xls"
+        :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport"
+        :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress"
+        :on-success="handleFileSuccess"
+        :auto-upload="false"
+        drag
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip text-center" slot="tip">
+          <div class="el-upload__tip" slot="tip">
+            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
+          </div>
+          <span>仅允许导入xls、xlsx格式文件。</span>
+          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
+        </div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button @click="upload.open = false">取 消</el-button>
+      </div>
+    </el-dialog>
+</template>
+<script>
+import { getToken } from "@/utils/auth";
+export default {
+    name: 'UploadBox',
+    data() {
+        return {
+            // 是否显示弹出层（用户导入）
+            open: false,
+            // 用户导入参数
+            upload: {
+                width: '400px',
+                // 弹出层标题（用户导入）
+                title: "导入",
+                // 是否禁用上传
+                isUploading: false,
+                // 是否更新已经存在的用户数据
+                updateSupport: 0,
+                // 设置上传的请求头部
+                headers: { Authorization: "Bearer " + getToken() },
+                // 下载模板地址
+                importTemplate: '',
+                // 上传的地址
+                url:  ""
+            },
+        }
+    },
+    methods: {
+        initData(data) {
+            this.upload = Object.assign(this.upload,{},data)
+            this.upload.importTemplate = data.importTemplate ? (process.env.VUE_APP_BASE_API + data.importTemplate) :  ''
+            this.upload.url = data.url ? (process.env.VUE_APP_BASE_API + data.url) :  ''
+            this.upload.headers = { Authorization: "Bearer " + getToken() }
+            this.open = true
+        },
+        /** 下载模板操作 */
+        importTemplate() {
+            this.download(this.upload.importTemplate, {
+            }, `导入模板_${new Date().getTime()}.xlsx`)
+        },
+        // 文件上传中处理
+        handleFileUploadProgress(event, file, fileList) {
+            this.upload.isUploading = true;
+        },
+        // 文件上传成功处理
+        handleFileSuccess(response, file, fileList) {
+            this.upload.open = false;
+            this.upload.isUploading = false;
+            this.$refs.upload.clearFiles();
+            this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
+            this.$emit('refresh')
+        },
+         // 提交上传文件
+        submitFileForm() {
+            this.$refs.upload.submit();
+        }
+    },
+}
+</script>

src/views/demoTemp/attractionInfo.vue

@@ -0,0 +1,324 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <!--用户数据-->
+      <el-col :span="24" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+          <el-form-item label="用户名称" prop="name">
+            <el-input
+              v-model="queryParams.name"
+              placeholder="请输入用户名称"
+              clearable
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="手机号码" prop="mobile">
+            <el-input
+              v-model="queryParams.mobile"
+              placeholder="请输入手机号码"
+              clearable
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select
+              v-model="queryParams.status"
+              placeholder="用户状态"
+              clearable
+              style="width: 240px"
+            >
+              <el-option
+                v-for="dict in dict.type.sys_normal_disable"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="创建时间">
+            <el-date-picker
+              v-model="dateRange"
+              style="width: 240px"
+              value-format="yyyy-MM-dd"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @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="configPermi.add"
+            >新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="danger"
+              plain
+              icon="el-icon-delete"
+              size="mini"
+              :disabled="multiple"
+              @click="handleDelete"
+              v-hasPermi="configPermi.delect"
+            >删除</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="info"
+              plain
+              icon="el-icon-upload2"
+              size="mini"
+              @click="handleImport"
+              v-hasPermi="configPermi.upload"
+            >导入</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="warning"
+              plain
+              icon="el-icon-download"
+              size="mini"
+              @click="handleExport"
+              v-hasPermi="configPermi.export"
+            >导出</el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="50" align="center" />
+          <el-table-column label="用户编号" align="center" key="id" prop="id" v-if="columns[0].visible" />
+          <el-table-column label="用户名称" align="center" key="name" prop="name" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="手机号码" align="center" key="mobile" prop="mobile" v-if="columns[4].visible" width="120" />
+          <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
+            <template slot-scope="scope">
+              <el-switch
+                v-model="scope.row.status"
+                active-value="0"
+                inactive-value="1"
+                @change="handleStatusChange(scope.row)"
+              ></el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            align="center"
+            width="160"
+            class-name="small-padding fixed-width"
+          >
+            <template slot-scope="scope" v-if="scope.row.id !== 1">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-document"
+                @click="handleDetails(scope.row)"
+                v-hasPermi="configPermi.details"
+              >详情</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="configPermi.edit"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="configPermi.delect"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </el-col>
+    </el-row>
+
+    <!--  导入  -->
+    <uploadBox ref="upload" @refresh="handleQuery" />
+    <!--  新增或修改  -->
+    <addAndEdit ref="addAndEdit" @refresh="getList" />
+    <!--  详情  -->
+    <detailsBox ref="detailsBox" @refresh="getList" />
+  </div>
+</template>
+
+<script>
+import { 
+  listTableApi, 
+  delTableApi, 
+  } from "@/api/CURD";
+import addAndEdit from "./dialog/addAndEdit.vue"
+import detailsBox from "./dialog/details.vue"
+export default {
+  name: "User",
+  dicts: ['sys_normal_disable', 'sys_user_sex'],
+  components: {addAndEdit,detailsBox},
+  data() {
+    return {
+      title: "",// 通用标题
+      configPermi: {
+        add: ['system:user:edit'], // 新增权限
+        details: ['system:user:details'], // 详情权限
+        delect: ['system:user:remove'], // 删除权限
+        edit: ['system:user:edit'], // 编辑权限
+        upload: ['system:user:upload'],// 导入权限
+        export: ['system:user:export'],// 导出权限
+      },
+      configUrl: {
+        list: '/merchant/merchantSysuser/pageList', // 列表地址
+        delect: '/merchant/merchantSysuser/', // 删除地址
+        upload: 'system/user/importTemplate',// 导入地址
+        download:'system/user/importTemplate', // 下载模板地址
+        export: '/system/user/importData',// 导出地址
+      },
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      tableList: null,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      dateRange: [],
+      // 控制列表是否显示
+      columns: [
+        { key: 0, label: `用户编号`, visible: true },
+        { key: 1, label: `用户名称`, visible: true },
+        { key: 2, label: `用户昵称`, visible: true },
+        { key: 3, label: `部门`, visible: true },
+        { key: 4, label: `手机号码`, visible: true },
+        { key: 5, label: `状态`, visible: true },
+        { key: 6, label: `创建时间`, visible: true }
+      ],
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询用户列表 */
+    getList() {
+      this.loading = true;
+      listTableApi(
+        this.configUrl.list,
+        this.addDateRange(
+          this.queryParams, 
+          this.dateRange)).then(response => {
+            this.tableList = response.data.rows;
+            this.total = response.data.total;
+            this.loading = false;
+        }
+      ).catch (error=>{
+        console.error('获取列表失败!!!!',error)
+        this.tableList = [];
+        this.total = 0;
+        this.loading = false
+      }) 
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      if(this.$refs.addAndEdit) {
+        this.$refs.addAndEdit.initData(this.title + '新增', "EDIT",{})
+      }
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      if(this.$refs.addAndEdit) {
+        this.$refs.addAndEdit.initData(this.title + '编辑', "EDITInit",{...row})
+      }
+    },
+    handleDetails(row){
+      if(this.$refs.detailsBox) {
+        this.$refs.detailsBox.initData(this.title + '详情',"DEATILSInit", row)
+      }
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then(function() {
+        return delTableApi(configUrl.delect,ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(this.configUrl.export, {
+        ...this.queryParams
+      }, `${this.title }_${new Date().getTime()}.xlsx`)
+    },
+    /** 导入按钮操作 */
+    handleImport() {
+      if(this.$refs.upload) {
+        this.$refs.upload.initData({
+          width: '400px',
+          // 弹出层标题（用户导入）
+          title: this.title + "导入",
+          // 下载模板地址
+          importTemplate: this.configUrl.download,
+          // 上传的地址
+          url: this.configUrl.upload
+        })
+      }
+    },
+  }
+};
+</script>

src/views/demoTemp/dialog/addAndEdit.vue

@@ -0,0 +1,261 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="open"
+    width="800px"
+    append-to-body
+    :close-on-click-modal="false"
+    @close="cancel"
+  >
+    <div class="form-dialog-box"
+    v-loading="loading"
+    element-loading-text="拼命加载数据中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)">
+      <el-form :model="form" ref="form" :rules="rules" label-width="120px">
+        
+      </el-form>
+    </div>
+    <span slot="footer" class="dialog-footer" v-if="formStatus==1">
+      <el-button @click="cancel">取消</el-button>
+      <el-button
+        type="primary"
+        @click="submitForm"
+        v-loading="loading"
+        element-loading-text="提交中..."
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      > 
+        {{ loading ? '提交中...' : '保存' }}
+      </el-button>
+    </span>
+    <!-- 添加或修改对话框 End -->
+  </el-dialog>
+</template>
+
+<script>
+import { 
+  getTableDeatilsApi,
+  updateTableApi,
+  addTableApi
+ } from '@/api/CURD'
+export default {
+  name: "addAndEdit",
+  dicts: [],
+  data() {
+    return {
+      title: "",
+      model: "", // EDIT: 编辑模式 ADD : 新增模式  EDITInit : 编辑模式（需要请求详情）
+      open: false,
+      loading: false,
+      formStatus: null, // 0/null : 加载中 1 : 获取详情成功 2  : 获取详情失败 
+      configUrl: {
+        add: '/merchant/merchantSysuser', // 新增地址
+        details: '/merchant/merchantSysuser/', // 详情地址
+        edit: '/merchant/merchantSysuser', // 编辑地址
+      },
+      form: {
+        id: undefined,
+      },
+      rules: {
+        xxx: [{ required: true, message: "请输入xxx", trigger: ["change","blur"] }]
+      }
+    };
+  },
+  methods: {
+    async initData(title , model,row){
+      this.title = title
+      this.open = true
+      this.loading = true
+      this.model = model
+      this.formStatus = 0
+      if(model=='ADD') { // 新增
+        this.$set(this,'form',row)
+        this.formStatus = 1
+      }else if(model=='EDIT') { // 新增
+        this.$set(this,'form',row)
+        this.formStatus = 1
+      }else if(model=='EDITInit') { // 新增
+        await this.getTableDeatilsFun(row)
+      }
+      this.loading = false
+      this.$nextTick(()=>{
+        if(this.$refs["form"]) {
+          this.$refs["form"].clearValidate();
+        }
+      })
+    },
+    /** 获取详情 */
+    async getTableDeatilsFun(row) {
+      const id = row.id
+      this.loading = true
+      try {
+        let res = await getTableDeatilsApi(this.configUrl.details,id)
+        if(res.code == 200) {
+          this.$set(this,'form',JSON.parse(JSON.stringify(res.data)))
+          this.formStatus = 1
+        }else {
+          this.$message.error('获取详情失败!!!');
+          this.formStatus = 2
+          this.loading = false
+          this.open = false;
+        }
+        this.loading = false
+      } catch (error) {
+        console.error('获取详情失败!!!!',error)
+        this.formStatus = 2
+        this.loading = false
+        this.open = false;
+      }
+    },
+    /**
+     * 保存
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.loading = true
+          if (this.model != 'ADD') {
+            updateTableApi(
+              this.configUrl.edit,this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.loading = false
+              this.open = false;
+              this.$emit('refresh')
+            }).catch(()=>{
+              this.$message.error("修改失败!!!");
+              this.loading = false
+            })
+          } else {
+            addTableApi(this.configUrl.edit,this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.loading = false
+              this.open = false;
+              this.$emit('refresh')
+            }).catch(()=>{
+              this.$message.error("新增失败!!!");
+              this.loading = false
+            })
+          }
+        }
+      });
+    },
+    /**
+     * 重置
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    reset() {
+      if(this.$refs["form"]) {
+        this.$refs["form"].clearValidate();
+      }
+    },
+    /**
+     * 关闭弹框
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    cancel() {
+      this.reset();
+      this.open = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-dialog-box {
+  padding: 0 30px;
+  padding: 0 30px;
+  min-height: 50vh;
+  max-height: 65vh;
+  overflow-y: auto;
+  .upload-btn {
+    width: 100px;
+    height: 100px;
+    background-color: #fbfdff;
+    border: dashed 1px #c0ccda;
+    border-radius: 5px;
+    i {
+      font-size: 30px;
+      margin-top: 20px;
+    }
+    &-text {
+      margin-top: -10px;
+    }
+  }
+  .avatar {
+    cursor: pointer;
+  }
+}
+.el-table{
+  .upload-btn {
+    width: 100px;
+    height: 100px;
+    background-color: #fbfdff;
+    border: dashed 1px #c0ccda;
+    border-radius: 5px;
+    i {
+      font-size: 30px;
+      margin-top: 20px;
+    }
+    &-text {
+      margin-top: -10px;
+    }
+  }
+  .avatar {
+    cursor: pointer;
+  }
+}
+
+.area-container {
+  min-height: 400px;
+}
+
+::v-deep .area-wrap-city.el-cascader {
+  line-height: normal;
+  .el-input {
+    cursor: pointer;
+    width: 100% !important;
+    height: 28px !important;
+    .el-input__inner {
+      display: none !important;
+    }
+    span.el-input__suffix {
+      position: inherit !important;
+      i.el-input__icon {
+        line-height: inherit;
+        margin-left: 5px;
+      }
+    }
+
+    .el-input__wrapper {
+      box-shadow: none;
+      input {
+        display: none;
+      }
+    }
+  }
+
+  .el-cascader__tags {
+    display: none;
+  }
+}
+
+.area-city-popper {
+  .el-cascader-panel {
+    .el-scrollbar.el-cascader-menu {
+      .el-cascader-menu__wrap.el-scrollbar__wrap {
+        height: 315px;
+      }
+    }
+  }
+}
+</style>
+<style>
+.custom-class-box {
+  z-index: 999999 !important;
+}
+</style>

src/views/demoTemp/dialog/details.vue

@@ -0,0 +1,196 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="open"
+    width="800px"
+    append-to-body
+    :close-on-click-modal="false"
+    @close="cancel"
+  >
+    <div class="form-dialog-box"
+    v-loading="loading"
+    element-loading-text="拼命加载数据中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)">
+      <el-form :model="form" ref="form" :rules="rules" label-width="120px">
+        
+      </el-form>
+    </div>
+    <span slot="footer" class="dialog-footer" v-if="formStatus==1">
+      <el-button @click="cancel">关闭</el-button>
+    </span>
+    <!-- 添加或修改对话框 End -->
+  </el-dialog>
+</template>
+
+<script>
+import { 
+  getTableDeatilsApi,
+  updateTableApi,
+  addTableApi
+ } from '@/api/CURD'
+export default {
+  name: "addAndEdit",
+  dicts: [],
+  data() {
+    return {
+      title: "我是谁",
+      model: "", // DEATILS: 详情模式   DEATILSInit : 详情模式（需要请求详情）
+      open: false,
+      loading: false,
+      formStatus: null, // 0/null : 加载中 1 : 获取详情成功 2  : 获取详情失败 
+      configUrl: {
+        details: '/merchant/merchantSysuser/', // 详情地址
+      },
+      form: {
+        id: undefined,
+      },
+      rules: {
+        xxx: [{ required: true, message: "请输入xxx", trigger: ["change","blur"] }]
+      }
+    };
+  },
+  methods: {
+    async initData(title , model,row){
+      this.title = title
+      this.open = true
+      this.loading = true
+      this.model = model
+      this.formStatus = 0
+      if(model=='DEATILS') { // 新增
+        this.$set(this,'form',row)
+        this.formStatus = 1
+      }else if(model=='DEATILSInit') { // 新增
+        await this.getTableDeatilsFun(row)
+      }
+      this.loading = false
+    },
+    /** 获取详情 */
+    async getTableDeatilsFun(row) {
+      const id = row.id
+      this.loading = true
+      try {
+        let res = await getTableDeatilsApi(this.configUrl.details,id)
+        if(res.code == 200) {
+          this.$set(this,'form',JSON.parse(JSON.stringify(res.data)))
+          this.formStatus = 1
+        }else {
+          this.$message.error('获取详情失败!!!');
+          this.formStatus = 2
+          this.loading = false
+          this.open = false;
+        }
+        this.loading = false
+      } catch (error) {
+        console.error('获取详情失败!!!!',error)
+        this.formStatus = 2
+        this.loading = false
+        this.open = false;
+      }
+    },
+    /**
+     * 关闭弹框
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    cancel() {
+      this.open = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-dialog-box {
+  padding: 0 30px;
+  padding: 0 30px;
+  min-height: 50vh;
+  max-height: 65vh;
+  overflow-y: auto;
+  .upload-btn {
+    width: 100px;
+    height: 100px;
+    background-color: #fbfdff;
+    border: dashed 1px #c0ccda;
+    border-radius: 5px;
+    i {
+      font-size: 30px;
+      margin-top: 20px;
+    }
+    &-text {
+      margin-top: -10px;
+    }
+  }
+  .avatar {
+    cursor: pointer;
+  }
+}
+.el-table{
+  .upload-btn {
+    width: 100px;
+    height: 100px;
+    background-color: #fbfdff;
+    border: dashed 1px #c0ccda;
+    border-radius: 5px;
+    i {
+      font-size: 30px;
+      margin-top: 20px;
+    }
+    &-text {
+      margin-top: -10px;
+    }
+  }
+  .avatar {
+    cursor: pointer;
+  }
+}
+
+.area-container {
+  min-height: 400px;
+}
+
+::v-deep .area-wrap-city.el-cascader {
+  line-height: normal;
+  .el-input {
+    cursor: pointer;
+    width: 100% !important;
+    height: 28px !important;
+    .el-input__inner {
+      display: none !important;
+    }
+    span.el-input__suffix {
+      position: inherit !important;
+      i.el-input__icon {
+        line-height: inherit;
+        margin-left: 5px;
+      }
+    }
+
+    .el-input__wrapper {
+      box-shadow: none;
+      input {
+        display: none;
+      }
+    }
+  }
+
+  .el-cascader__tags {
+    display: none;
+  }
+}
+
+.area-city-popper {
+  .el-cascader-panel {
+    .el-scrollbar.el-cascader-menu {
+      .el-cascader-menu__wrap.el-scrollbar__wrap {
+        height: 315px;
+      }
+    }
+  }
+}
+</style>
+<style>
+.custom-class-box {
+  z-index: 999999 !important;
+}
+</style>

src/views/tourism/scenicAreaManagement/contentManagement/attractionInfo.vue

@@ -1,273 +1,324 @@
 <template>
-    <div class="app-container">
-      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-        <el-form-item label="票务名称">
-          <el-input
-            v-model="queryParams.goodsName"
-            placeholder="请输入票务名称"
-            clearable
-            style="width: 240px;"
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" size="mini" @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="['ticketMr:ticketMr:add']"
-              >新增</el-button>
-        </el-col>
-        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-  
-      <el-table ref="tables" v-loading="loading" :data="dataList" border>
-        <el-table-column label="序号" align="center" type="index" width="60"></el-table-column>
-        <el-table-column label="票务名称" align="center" prop="goodsName" />
-        <el-table-column label="销售价" align="center">
-          <template slot-scope="scope">
-            <span>￥{{ scope.row.salePrice }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="是否限购" align="center">
-          <template slot-scope="scope">
-            <el-tag type="success" v-if="scope.row.goodsPerform.buyAstrict > -1">是</el-tag>
-            <el-tag type="danger" v-if="scope.row.goodsPerform.buyAstrict == -1">否</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="销售渠道" align="center">
-          <template slot-scope="scope">
-            <span>{{ 
-            (scope.row.goodsPerform.channelWx == 0 ? '小程序' : '') + 
-            ' ' + 
-            (scope.row.goodsPerform.channelWindow == 0 ? '窗口' : '') +
-            ' ' + 
-            (scope.row.goodsPerform.channelAutoSale == 0 ? '自助售/取票机' : '')}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="是否可退" align="center">
-          <template slot-scope="scope">
-            <el-tag type="success" v-if="scope.row.goodsPerform.backStatus == 0">可退</el-tag>
-            <el-tag type="danger" v-if="scope.row.goodsPerform.backStatus == 1">不可退</el-tag>
-          </template>
-        </el-table-column>
-        <!-- <el-table-column label="销售有效期" align="center">
-          <template slot-scope="scope">
-            <span>{{ 
-              scope.row.goodsPerform && scope.row.goodsPerform.saleBeginTime && scope.row.goodsPerform.saleEndTime ? 
-              scope.row.goodsPerform.saleBeginTime +'--'+ scope.row.goodsPerform.saleEndTime :
-              '-'
-            }}</span>
-          </template>
-        </el-table-column> -->
-        <el-table-column label="状态" align="center">
-          <template slot-scope="scope">
-            <el-switch
-              @change="ionlineApi(scope.row)"
-              v-model="scope.row.switchValue"
-              :active-value="0"
-              active-color="#13ce66"
-              inactive-color="#ff4949">
-            </el-switch>
-          </template>
-        </el-table-column>
-  
-        <el-table-column label="添加时间" align="center" prop="createTime" width="160" >
-          <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.createTime) }}</span>
-          </template>
-        </el-table-column>
-  
-        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
-          <template slot-scope="scope">
+  <div class="app-container">
+    <el-row :gutter="20">
+      <!--用户数据-->
+      <el-col :span="24" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+          <el-form-item label="用户名称" prop="name">
+            <el-input
+              v-model="queryParams.name"
+              placeholder="请输入用户名称"
+              clearable
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="手机号码" prop="mobile">
+            <el-input
+              v-model="queryParams.mobile"
+              placeholder="请输入手机号码"
+              clearable
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select
+              v-model="queryParams.status"
+              placeholder="用户状态"
+              clearable
+              style="width: 240px"
+            >
+              <el-option
+                v-for="dict in dict.type.sys_normal_disable"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="创建时间">
+            <el-date-picker
+              v-model="dateRange"
+              style="width: 240px"
+              value-format="yyyy-MM-dd"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @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"
-              type="text"
-              @click="openDetails(scope.row)"
-              v-hasPermi="['ticketMr:ticketMr:details']"
-            >详情</el-button>
+              @click="handleAdd"
+              v-hasPermi="configPermi.add"
+            >新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
             <el-button
+              type="danger"
+              plain
+              icon="el-icon-delete"
               size="mini"
-              type="text"
-              @click="handleUpdate(scope.row)"
-              v-if="scope.row.status != 0"
-              v-hasPermi="['ticketMr:ticketMr:edit']"
-            >修改</el-button>
+              :disabled="multiple"
+              @click="handleDelete"
+              v-hasPermi="configPermi.delect"
+            >删除</el-button>
+          </el-col>
+          <el-col :span="1.5">
             <el-button
+              type="info"
+              plain
+              icon="el-icon-upload2"
               size="mini"
-              type="text"
-              @click="handleDelete(scope.row,scope.index)"
-              v-hasPermi="['ticketMr:ticketMr:delete']"
-            >删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-  
-      <pagination
-        v-show="total>0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-      />
-  
-      <!-- 新增/编辑弹框 -->
-      <add-and-edit
-        ref="addAndEdit"
-        @getList="getList"
-      />
-  
-      <!-- 详情 -->
-      <details-dia ref="detailsDia"></details-dia>
-  
-    </div>
-  </template>
-  
-  <script>
-  
-  import { pageList, deleteById, updateStatus } from '@/api/tourism/scenicAreaManagement/attractionInfo'
-  import addAndEdit from "./dialog/addAndEdit";
-  import detailsDia from "./dialog/details.vue";
-  
-  export default {
-    name: "agreement",
-    dicts: ['agreement_type'],
-    components: { addAndEdit, detailsDia },
-    data() {
-      return {
-        // 遮罩层
-        loading: true,
-        // 选中数组
-        ids: [],
-        // 非单个禁用
-        single: true,
-        // 非多个禁用
-        multiple: true,
-        // 显示搜索条件
-        showSearch: true,
-        // 总条数
-        total: 0,
-        // 用户表格数据
-        dataList: null,
-        // 弹出层标题
-        title: "",
-  
-        // 是否显示弹出层
-        open: false,
-        // 日期范围
-        dateRange: [],
-        // 查询参数
-        queryParams: {
-          pageNum: 1,
-          pageSize: 10,
-          type: undefined,
-          goodsType: 2,
-          classifyId: 1
-        },
-        statusList: [
-          {id: 1, name: '未发布', value: 0},
-          {id: 2, name: '发布', value: 1},
-          {id: 3, name: '下架', value: 2},
-        ],
-        visibleStatus: false,
-        newObj: {},
-        visibleType: ''
-      };
-    },
-    created() {
-      this.getList();
-    },
-    methods: {
-      /** 查询列表 */
-      getList() {
-        this.loading = true;
-        pageList(this.addDateRange(this.queryParams, this.dateRange))
-        .then(response => {
-            this.dataList = response.data.rows;
-            this.dataList.forEach(item =>{
-              item.switchValue = item.status;
-            })
-            this.total = response.data.total;
-            this.loading = false;
-          }
-        );
-      },
-      // 取消按钮
-      cancel() {
-        this.open = false;
-      },
-      /** 搜索按钮操作 */
-      handleQuery() {
-        this.queryParams.pageNum = 1;
-        this.getList();
-      },
-      /** 重置按钮操作 */
-      resetQuery() {
-        this.dateRange = [];
-        this.$set(this.queryParams, 'goodsName', '');
-        this.queryParams.pageNum = 1;
-        this.handleQuery();
-      },
-      /** 新增按钮操作 */
-      handleAdd() {
-        this.$refs["addAndEdit"].openDialog("新增数据", null);
+              @click="handleImport"
+              v-hasPermi="configPermi.upload"
+            >导入</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="warning"
+              plain
+              icon="el-icon-download"
+              size="mini"
+              @click="handleExport"
+              v-hasPermi="configPermi.export"
+            >导出</el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="50" align="center" />
+          <el-table-column label="用户编号" align="center" key="id" prop="id" v-if="columns[0].visible" />
+          <el-table-column label="用户名称" align="center" key="name" prop="name" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="手机号码" align="center" key="mobile" prop="mobile" v-if="columns[4].visible" width="120" />
+          <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
+            <template slot-scope="scope">
+              <el-switch
+                v-model="scope.row.status"
+                active-value="0"
+                inactive-value="1"
+                @change="handleStatusChange(scope.row)"
+              ></el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            align="center"
+            width="160"
+            class-name="small-padding fixed-width"
+          >
+            <template slot-scope="scope" v-if="scope.row.id !== 1">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-document"
+                @click="handleDetails(scope.row)"
+                v-hasPermi="configPermi.details"
+              >详情</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="configPermi.edit"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="configPermi.delect"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </el-col>
+    </el-row>
+
+    <!--  导入  -->
+    <uploadBox ref="upload" @refresh="handleQuery" />
+    <!--  新增或修改  -->
+    <addAndEdit ref="addAndEdit" @refresh="getList" />
+    <!--  详情  -->
+    <detailsBox ref="detailsBox" @refresh="getList" />
+  </div>
+</template>
+
+<script>
+import { 
+  listTableApi, 
+  delTableApi, 
+  } from "@/api/CURD";
+import addAndEdit from "./dialog/addAndEdit.vue"
+import detailsBox from "./dialog/details.vue"
+export default {
+  name: "User",
+  dicts: ['sys_normal_disable', 'sys_user_sex'],
+  components: {addAndEdit,detailsBox},
+  data() {
+    return {
+      title: "",// 通用标题
+      configPermi: {
+        add: ['system:user:edit'], // 新增权限
+        details: ['system:user:details'], // 详情权限
+        delect: ['system:user:remove'], // 删除权限
+        edit: ['system:user:edit'], // 编辑权限
+        upload: ['system:user:upload'],// 导入权限
+        export: ['system:user:export'],// 导出权限
       },
-      /** 修改按钮操作 */
-      handleUpdate(row) {
-        this.$refs["addAndEdit"].openDialog("修改数据", row);
+      configUrl: {
+        list: '/merchant/merchantSysuser/pageList', // 列表地址
+        delect: '/merchant/merchantSysuser/', // 删除地址
+        upload: 'system/user/importTemplate',// 导入地址
+        download:'system/user/importTemplate', // 下载模板地址
+        export: '/system/user/importData',// 导出地址
       },
-      /** 详情按钮操作 */
-      openDetails(row) {
-        this.$refs["detailsDia"].openDialog("详情", row);
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      tableList: null,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
       },
-  
-      /** 发布或者取消发布按钮操作 */
-      ionlineApi(row) {
-        try {
-          updateStatus({ id: row.id, status: row.status == 0 ? 1 : 0 }).then((res) => {
-            if (res.code == 200) {
-              this.$message({
-                type: 'success',
-                message: '操作成功!'
-              });
-              this.getList();
-            }
-          });
-        }catch (e) {
-          this.getList();
+      dateRange: [],
+      // 控制列表是否显示
+      columns: [
+        { key: 0, label: `用户编号`, visible: true },
+        { key: 1, label: `用户名称`, visible: true },
+        { key: 2, label: `用户昵称`, visible: true },
+        { key: 3, label: `部门`, visible: true },
+        { key: 4, label: `手机号码`, visible: true },
+        { key: 5, label: `状态`, visible: true },
+        { key: 6, label: `创建时间`, visible: true }
+      ],
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询用户列表 */
+    getList() {
+      this.loading = true;
+      listTableApi(
+        this.configUrl.list,
+        this.addDateRange(
+          this.queryParams, 
+          this.dateRange)).then(response => {
+            this.tableList = response.data.rows;
+            this.total = response.data.total;
+            this.loading = false;
         }
-      },
-  
-      // 修改是否启用
-      changeStatus(row) {
-        console.log(row)
-      },
-  
-      /** 删除按钮操作 */
-      handleDelete(row) {
-        this.$modal.confirm('是否确认删除数据票务名称为"' + row.goodsName + '"的数据项？').then(function() {
-          return deleteById(row.id);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        }).catch(() => {});
-      },
-      /** 查看按钮操作 */
-      seeCenter(obj, type) {
-        this.visibleStatus = true
-        this.visibleType = type;
-        this.newObj = obj;
+      ).catch (error=>{
+        console.error('获取列表失败!!!!',error)
+        this.tableList = [];
+        this.total = 0;
+        this.loading = false
+      }) 
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      if(this.$refs.addAndEdit) {
+        this.$refs.addAndEdit.initData(this.title + '新增', "EDIT",{})
       }
-    }
-  };
-  </script>
-  
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      if(this.$refs.addAndEdit) {
+        this.$refs.addAndEdit.initData(this.title + '编辑', "EDITInit",{...row})
+      }
+    },
+    handleDetails(row){
+      if(this.$refs.detailsBox) {
+        this.$refs.detailsBox.initData(this.title + '详情',"DEATILSInit", row)
+      }
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then(function() {
+        return delTableApi(configUrl.delect,ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(this.configUrl.export, {
+        ...this.queryParams
+      }, `${this.title }_${new Date().getTime()}.xlsx`)
+    },
+    /** 导入按钮操作 */
+    handleImport() {
+      if(this.$refs.upload) {
+        this.$refs.upload.initData({
+          width: '400px',
+          // 弹出层标题（用户导入）
+          title: this.title + "导入",
+          // 下载模板地址
+          importTemplate: this.configUrl.download,
+          // 上传的地址
+          url: this.configUrl.upload
+        })
+      }
+    },
+  }
+};
+</script>

src/views/tourism/scenicAreaManagement/contentManagement/authRole.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="app-container">
+    <h4 class="form-header h4">基本信息</h4>
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-row>
+        <el-col :span="8" :offset="2">
+          <el-form-item label="用户昵称" prop="nickName">
+            <el-input v-model="form.nickName" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8" :offset="2">
+          <el-form-item label="登录账号" prop="userName">
+            <el-input  v-model="form.userName" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <h4 class="form-header h4">角色信息</h4>
+    <el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange" :data="roles.slice((pageNum-1)*pageSize,pageNum*pageSize)">
+      <el-table-column label="序号" type="index" align="center">
+        <template slot-scope="scope">
+          <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
+      <el-table-column label="角色编号" align="center" prop="roleId" />
+      <el-table-column label="角色名称" align="center" prop="roleName" />
+      <el-table-column label="权限字符" align="center" prop="roleKey" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
+
+    <el-form label-width="100px">
+      <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
+        <el-button type="primary" @click="submitForm()">提交</el-button>
+        <el-button @click="close()">返回</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getAuthRole, updateAuthRole } from "@/api/system/user";
+
+export default {
+  name: "AuthRole",
+  data() {
+    return {
+       // 遮罩层
+      loading: true,
+      // 分页信息
+      total: 0,
+      pageNum: 1,
+      pageSize: 10,
+      // 选中角色编号
+      roleIds:[],
+      // 角色信息
+      roles: [],
+      // 用户信息
+      form: {}
+    };
+  },
+  created() {
+    const userId = this.$route.params && this.$route.params.userId;
+    if (userId) {
+      this.loading = true;
+      getAuthRole(userId).then((response) => {
+        this.form = response.user;
+        this.roles = response.roles;
+        this.total = this.roles.length;
+        this.$nextTick(() => {
+          this.roles.forEach((row) => {
+            if (row.flag) {
+              this.$refs.table.toggleRowSelection(row);
+            }
+          });
+        });
+        this.loading = false;
+      });
+    }
+  },
+  methods: {
+    /** 单击选中行数据 */
+    clickRow(row) {
+      this.$refs.table.toggleRowSelection(row);
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.roleIds = selection.map((item) => item.roleId);
+    },
+    // 保存选中的数据编号
+    getRowKey(row) {
+      return row.roleId;
+    },
+    /** 提交按钮 */
+    submitForm() {
+      const userId = this.form.userId;
+      const roleIds = this.roleIds.join(",");
+      updateAuthRole({ userId: userId, roleIds: roleIds }).then((response) => {
+        this.$modal.msgSuccess("授权成功");
+        this.close();
+      });
+    },
+    /** 关闭按钮 */
+    close() {
+      const obj = { path: "/system/user" };
+      this.$tab.closeOpenPage(obj);
+    },
+  },
+};
+</script>

src/views/tourism/scenicAreaManagement/contentManagement/dialog/addAndEdit.vue

@@ -7,23 +7,26 @@
     :close-on-click-modal="false"
     @close="cancel"
   >
-    <div class="dialog">
-      <el-form v-if="open" :model="form" ref="form" :rules="rules" label-width="120px">
+    <div class="form-dialog-box"
+    v-loading="loading"
+    element-loading-text="拼命加载数据中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)">
+      <el-form :model="form" ref="form" :rules="rules" label-width="120px">
         
       </el-form>
     </div>
-    <span slot="footer" class="dialog-footer">
+    <span slot="footer" class="dialog-footer" v-if="formStatus==1">
       <el-button @click="cancel">取消</el-button>
       <el-button
         type="primary"
         @click="submitForm"
-        v-loading.fullscreen.lock="loading"
+        v-loading="loading"
         element-loading-text="提交中..."
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)"
-      >
-        <span v-if="loading">提交中...</span>
-        <span v-else>保存</span>
+      > 
+        {{ loading ? '提交中...' : '保存' }}
       </el-button>
     </span>
     <!-- 添加或修改对话框 End -->
@@ -31,23 +34,28 @@
 </template>
 
 <script>
-import { saveAndEdit, getSelectById } from '@/api/tourism/scenicAreaManagement/attractionInfo'
+import { 
+  getTableDeatilsApi,
+  updateTableApi,
+  addTableApi
+ } from '@/api/CURD'
 export default {
   name: "addAndEdit",
   dicts: [],
   data() {
     return {
       title: "",
-      model: "EDIT", // 弹出模式   
+      model: "", // EDIT: 编辑模式 ADD : 新增模式  EDITInit : 编辑模式（需要请求详情）
       open: false,
       loading: false,
+      formStatus: null, // 0/null : 加载中 1 : 获取详情成功 2  : 获取详情失败 
+      configUrl: {
+        add: '/merchant/merchantSysuser', // 新增地址
+        details: '/merchant/merchantSysuser/', // 详情地址
+        edit: '/merchant/merchantSysuser', // 编辑地址
+      },
       form: {
         id: undefined,
-        type: "",
-        content: "",
-        isAuth: '1',
-        backTime: '1',
-        goodsPerform: {}
       },
       rules: {
         xxx: [{ required: true, message: "请输入xxx", trigger: ["change","blur"] }]
@@ -55,42 +63,49 @@ export default {
     };
   },
   methods: {
-    /**
-     * 打开弹框
-     * @date 2023-11-22
-     * @param {any} obj
-     * @returns {any}
-     */
-    openDialog(title, obj) {
-      this.open = true;
-      this.reset();
-      this.activeName = '01';
-      if (obj){
-        this.title = "编辑票务管理";
-        this.getSelectByIdApi(obj)
-      }else{
-        this.title = "添加票务管理";
-        this.$nextTick(() => {
-          this.$refs["form"].clearValidate();
-        });
+    async initData(title , model,row){
+      this.title = title
+      this.open = true
+      this.loading = true
+      this.model = model
+      this.formStatus = 0
+      if(model=='ADD') { // 新增
+        this.$set(this,'form',row)
+        this.formStatus = 1
+      }else if(model=='EDIT') { // 新增
+        this.$set(this,'form',row)
+        this.formStatus = 1
+      }else if(model=='EDITInit') { // 新增
+        await this.getTableDeatilsFun(row)
       }
+      this.loading = false
+      this.$nextTick(()=>{
+        if(this.$refs["form"]) {
+          this.$refs["form"].clearValidate();
+        }
+      })
     },
     /** 获取详情 */
-    getSelectByIdApi(row) {
+    async getTableDeatilsFun(row) {
       const id = row.id
-      getSelectById(id).then(response => {
-        const obj = response.data;
-        this.$nextTick(() => {
-          this.form = {}
-        });
-      });
-    },
-    /** 价格输入事件 */
-    changePriceAmount(key) {
-      if(this.form[key] * 1 < 0){
-        this.$message.error("输入需大于或等于0!");
-        this.$set(this.form, key, '');
-        return false
+      this.loading = true
+      try {
+        let res = await getTableDeatilsApi(this.configUrl.details,id)
+        if(res.code == 200) {
+          this.$set(this,'form',JSON.parse(JSON.stringify(res.data)))
+          this.formStatus = 1
+        }else {
+          this.$message.error('获取详情失败!!!');
+          this.formStatus = 2
+          this.loading = false
+          this.open = false;
+        }
+        this.loading = false
+      } catch (error) {
+        console.error('获取详情失败!!!!',error)
+        this.formStatus = 2
+        this.loading = false
+        this.open = false;
       }
     },
     /**
@@ -99,58 +114,30 @@ export default {
      * @returns {any}
      */
     submitForm() {
-      this.$refs["form"].validate(async (valid) => {
+      this.$refs["form"].validate(valid => {
         if (valid) {
-          try {
-            let postMap = {
-              goodsPerform: {},
-              performRefundRule: {}
-            }
-            if(this.form.id){
-              postMap.id = this.form.id;
-            }
-            postMap.goodsName = this.form.goodsName;
-            postMap.isAuth = this.form.isAuth;
-            postMap.goodsPerform.verificationSpeaker = this.form.verificationSpeaker;
-            postMap.goodsPerform.beforeTime = this.form.beforeTime;
-            postMap.goodsPerform.detail = this.form.detail;
-
-
-            postMap.salePrice = this.form.salePrice;
-            postMap.goodsPerform.buyAstrict = this.form.buyAstrictType == '1' ? this.form.buyAstrict : '-1';
-            if(!(this.form.channelWx || this.form.channelWindow || this.form.channelAutoSale)){
-              this.$message.error("请选择销售渠道!");
-              return false;
-            }
-            postMap.taxRate = this.form.taxRate
-            postMap.goodsPerform.channelWx = this.form.channelWx ? 0 : 1;
-            postMap.goodsPerform.channelWindow = this.form.channelWindow  ? 0 : 1;
-            postMap.goodsPerform.channelAutoSale = this.form.channelAutoSale  ? 0 : 1;
-            postMap.goodsPerform.backStatus = this.form.backStatus;
-            if(this.form.backStatus == '0') {
-              postMap.performRefundRule.days = this.form.days;
-              postMap.performRefundRule.hour = this.form.hour;
-            }
-            postMap.goodsType = 2;
-            postMap.classifyId = 1;
-            postMap.classifyName = "门票类";
-            postMap.saleArea = this.form.saleArea&&this.form.saleArea.length>0?this.form.saleArea:[]
-            postMap.goodsPerform.stopSaleTime = this.form.stopSaleTime
-            if(this.form.saleTimeAll && this.form.saleTimeAll.length > 0) {
-              postMap.goodsPerform.saleBeginTime = this.form.saleTimeAll[0];
-              postMap.goodsPerform.saleEndTime = this.form.saleTimeAll[1];
-            }
-
-            this.loading = true;
-            const { code } = await saveAndEdit({ ...postMap });
-            if (code === 200) {
-              this.$message.success("操作成功!");
-              this.$emit("getList");
-              this.cancel();
-            }
-          } catch (error) {
-          } finally {
-            this.loading = false;
+          this.loading = true
+          if (this.model != 'ADD') {
+            updateTableApi(
+              this.configUrl.edit,this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.loading = false
+              this.open = false;
+              this.$emit('refresh')
+            }).catch(()=>{
+              this.$message.error("修改失败!!!");
+              this.loading = false
+            })
+          } else {
+            addTableApi(this.configUrl.edit,this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.loading = false
+              this.open = false;
+              this.$emit('refresh')
+            }).catch(()=>{
+              this.$message.error("新增失败!!!");
+              this.loading = false
+            })
           }
         }
       });
@@ -161,28 +148,9 @@ export default {
      * @returns {any}
      */
     reset() {
-      this.$set(this.form, 'id', '');
-      this.$set(this.form, 'goodsName', '');
-      this.$set(this.form, 'isAuth', '1');
-      this.$set(this.form, 'verificationSpeaker', '');
-      this.$set(this.form, 'detail', '');
-      this.$set(this.form, 'goodsPerform', {});
-      this.$set(this.form, 'salePrice', '');
-      this.$set(this.form, 'buyAstrictType', '1');
-      this.$set(this.form, 'buyAstrict', '');
-      this.$set(this.form, 'channelWx', '');
-      this.$set(this.form, 'channelWindow', '');
-      this.$set(this.form, 'beforeTime', '');
-
-      this.$set(this.form, 'backStatus', '');
-      this.$set(this.form, 'backTime', '1');
-      this.$set(this.form, 'taxRate', '');
-      this.$set(this.form, 'backStatus', '');
-      this.$set(this.form, 'days', '');
-      this.$set(this.form, 'hour', '');
-      this.$set(this.form, 'saleArea', '');
-      this.$set(this.form, 'stopSaleTime', '');
-      this.$set(this.form, 'saleTimeAll', '');
+      if(this.$refs["form"]) {
+        this.$refs["form"].clearValidate();
+      }
     },
     /**
      * 关闭弹框
@@ -190,7 +158,7 @@ export default {
      * @returns {any}
      */
     cancel() {
-      // this.reset();
+      this.reset();
       this.open = false;
     },
   },
@@ -198,13 +166,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.dialog {
+.form-dialog-box {
+  padding: 0 30px;
   padding: 0 30px;
+  min-height: 50vh;
   max-height: 65vh;
   overflow-y: auto;
-}
-.dialog {
-  padding: 0 30px;
   .upload-btn {
     width: 100px;
     height: 100px;

src/views/tourism/scenicAreaManagement/contentManagement/dialog/details.vue

@@ -1,67 +1,92 @@
-<!--
- * @Description: 详情弹框
- * @Author: Sugar.
- * @Date: 2023-11-24 13:55:00
- * @LastEditors: Sugar.
- * @LastEditTime: 2023-11-24 13:55:00
- * @FilePath: \cattle_webui\src\views\ticket\ticketMr\dialog\details.vue
- * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
--->
 <template>
   <el-dialog
-    title="票务详情"
+    :title="title"
     :visible.sync="open"
-    width="700px"
+    width="800px"
     append-to-body
     :close-on-click-modal="false"
     @close="cancel"
   >
-    <div class="dialog" v-if="form">
-      
+    <div class="form-dialog-box"
+    v-loading="loading"
+    element-loading-text="拼命加载数据中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)">
+      <el-form :model="form" ref="form" :rules="rules" label-width="120px">
+        
+      </el-form>
     </div>
-    <span slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="cancel">关闭</el-button>
+    <span slot="footer" class="dialog-footer" v-if="formStatus==1">
+      <el-button @click="cancel">关闭</el-button>
     </span>
-
+    <!-- 添加或修改对话框 End -->
   </el-dialog>
 </template>
 
 <script>
-import { getSelectById } from "@/api/tourism/scenicAreaManagement/attractionInfo";
+import { 
+  getTableDeatilsApi,
+  updateTableApi,
+  addTableApi
+ } from '@/api/CURD'
 export default {
-  name: "detailsDia",
+  name: "addAndEdit",
+  dicts: [],
   data() {
     return {
-      title: "编辑",
-      model: "EDIT",
+      title: "我是谁",
+      model: "", // DEATILS: 详情模式   DEATILSInit : 详情模式（需要请求详情）
       open: false,
       loading: false,
+      formStatus: null, // 0/null : 加载中 1 : 获取详情成功 2  : 获取详情失败 
+      configUrl: {
+        details: '/merchant/merchantSysuser/', // 详情地址
+      },
       form: {
         id: undefined,
       },
-      performerVisible: false,
-      performerList: []
+      rules: {
+        xxx: [{ required: true, message: "请输入xxx", trigger: ["change","blur"] }]
+      }
     };
   },
   methods: {
-    /**
-     * 打开弹框
-     * @date 2023-11-22
-     * @param {any} obj
-     * @returns {any}
-     */
-    openDialog(title, obj) {
-      this.open = true;
-      if (obj){
-        this.getSelectByIdApi(obj)
+    async initData(title , model,row){
+      this.title = title
+      this.open = true
+      this.loading = true
+      this.model = model
+      this.formStatus = 0
+      if(model=='DEATILS') { // 新增
+        this.$set(this,'form',row)
+        this.formStatus = 1
+      }else if(model=='DEATILSInit') { // 新增
+        await this.getTableDeatilsFun(row)
       }
+      this.loading = false
     },
     /** 获取详情 */
-    getSelectByIdApi(row) {
+    async getTableDeatilsFun(row) {
       const id = row.id
-      getSelectById(id).then(response => {
-        this.form = response.data;
-      });
+      this.loading = true
+      try {
+        let res = await getTableDeatilsApi(this.configUrl.details,id)
+        if(res.code == 200) {
+          this.$set(this,'form',JSON.parse(JSON.stringify(res.data)))
+          this.formStatus = 1
+        }else {
+          this.$message.error('获取详情失败!!!');
+          this.formStatus = 2
+          this.loading = false
+          this.open = false;
+        }
+        this.loading = false
+      } catch (error) {
+        console.error('获取详情失败!!!!',error)
+        this.formStatus = 2
+        this.loading = false
+        this.open = false;
+      }
     },
     /**
      * 关闭弹框
@@ -76,13 +101,31 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.dialog {
+.form-dialog-box {
+  padding: 0 30px;
   padding: 0 30px;
+  min-height: 50vh;
   max-height: 65vh;
   overflow-y: auto;
+  .upload-btn {
+    width: 100px;
+    height: 100px;
+    background-color: #fbfdff;
+    border: dashed 1px #c0ccda;
+    border-radius: 5px;
+    i {
+      font-size: 30px;
+      margin-top: 20px;
+    }
+    &-text {
+      margin-top: -10px;
+    }
+  }
+  .avatar {
+    cursor: pointer;
+  }
 }
-.dialog {
-  padding: 0 30px;
+.el-table{
   .upload-btn {
     width: 100px;
     height: 100px;
@@ -100,15 +143,54 @@ export default {
   .avatar {
     cursor: pointer;
   }
-  .title-class{
-    font-size: 16px;
-    font-weight: bold;
-    color: black;
-    margin-bottom: 20px;
-    margin-top: 20px;
+}
+
+.area-container {
+  min-height: 400px;
+}
+
+::v-deep .area-wrap-city.el-cascader {
+  line-height: normal;
+  .el-input {
+    cursor: pointer;
+    width: 100% !important;
+    height: 28px !important;
+    .el-input__inner {
+      display: none !important;
+    }
+    span.el-input__suffix {
+      position: inherit !important;
+      i.el-input__icon {
+        line-height: inherit;
+        margin-left: 5px;
+      }
+    }
+
+    .el-input__wrapper {
+      box-shadow: none;
+      input {
+        display: none;
+      }
+    }
+  }
+
+  .el-cascader__tags {
+    display: none;
   }
-  .item-class{
-    margin-bottom: 20px;
+}
+
+.area-city-popper {
+  .el-cascader-panel {
+    .el-scrollbar.el-cascader-menu {
+      .el-cascader-menu__wrap.el-scrollbar__wrap {
+        height: 315px;
+      }
+    }
   }
 }
 </style>
+<style>
+.custom-class-box {
+  z-index: 999999 !important;
+}
+</style>

src/views/tourism/scenicAreaManagement/contentManagement/profile/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="6" :xs="24">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>个人信息</span>
+          </div>
+          <div>
+            <div class="text-center">
+              <userAvatar />
+            </div>
+            <ul class="list-group list-group-striped">
+              <li class="list-group-item">
+                <svg-icon icon-class="user" />用户名称
+                <div class="pull-right">{{ user.userName }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="phone" />手机号码
+                <div class="pull-right">{{ user.phonenumber }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="email" />用户邮箱
+                <div class="pull-right">{{ user.email }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="tree" />所属部门
+                <div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="peoples" />所属角色
+                <div class="pull-right">{{ roleGroup }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="date" />创建日期
+                <div class="pull-right">{{ user.createTime }}</div>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="18" :xs="24">
+        <el-card>
+          <div slot="header" class="clearfix">
+            <span>基本资料</span>
+          </div>
+          <el-tabs v-model="activeTab">
+            <el-tab-pane label="基本资料" name="userinfo">
+              <userInfo :user="user" />
+            </el-tab-pane>
+            <el-tab-pane label="修改密码" name="resetPwd">
+              <resetPwd />
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import userAvatar from "./userAvatar";
+import userInfo from "./userInfo";
+import resetPwd from "./resetPwd";
+import { getUserProfile } from "@/api/system/user";
+
+export default {
+  name: "Profile",
+  components: { userAvatar, userInfo, resetPwd },
+  data() {
+    return {
+      user: {},
+      roleGroup: {},
+      postGroup: {},
+      activeTab: "userinfo"
+    };
+  },
+  created() {
+    this.getUser();
+  },
+  methods: {
+    getUser() {
+      getUserProfile().then(response => {
+        this.user = response.data;
+        this.roleGroup = response.roleGroup;
+        this.postGroup = response.postGroup;
+      });
+    }
+  }
+};
+</script>

src/views/tourism/scenicAreaManagement/contentManagement/profile/resetPwd.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
+    <el-form-item label="旧密码" prop="oldPassword">
+      <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
+    </el-form-item>
+    <el-form-item label="新密码" prop="newPassword">
+      <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/>
+    </el-form-item>
+    <el-form-item label="确认密码" prop="confirmPassword">
+      <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" size="mini" @click="submit">保存</el-button>
+      <el-button type="danger" size="mini" @click="close">关闭</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { updateUserPwd } from "@/api/system/user";
+
+export default {
+  data() {
+    const equalToPassword = (rule, value, callback) => {
+      if (this.user.newPassword !== value) {
+        callback(new Error("两次输入的密码不一致"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      user: {
+        oldPassword: undefined,
+        newPassword: undefined,
+        confirmPassword: undefined
+      },
+      // 表单校验
+      rules: {
+        oldPassword: [
+          { required: true, message: "旧密码不能为空", trigger: "blur" }
+        ],
+        newPassword: [
+          { required: true, message: "新密码不能为空", trigger: "blur" },
+          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
+          { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
+        ],
+        confirmPassword: [
+          { required: true, message: "确认密码不能为空", trigger: "blur" },
+          { required: true, validator: equalToPassword, trigger: "blur" }
+        ]
+      }
+    };
+  },
+  methods: {
+    submit() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
+            this.$modal.msgSuccess("修改成功");
+          });
+        }
+      });
+    },
+    close() {
+      this.$tab.closePage();
+    }
+  }
+};
+</script>

src/views/tourism/scenicAreaManagement/contentManagement/profile/userAvatar.vue

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"  @close="closeDialog">
+      <el-row>
+        <el-col :xs="24" :md="12" :style="{height: '350px'}">
+          <vue-cropper
+            ref="cropper"
+            :img="options.img"
+            :info="true"
+            :autoCrop="options.autoCrop"
+            :autoCropWidth="options.autoCropWidth"
+            :autoCropHeight="options.autoCropHeight"
+            :fixedBox="options.fixedBox"
+            :outputType="options.outputType"
+            @realTime="realTime"
+            v-if="visible"
+          />
+        </el-col>
+        <el-col :xs="24" :md="12" :style="{height: '350px'}">
+          <div class="avatar-upload-preview">
+            <img :src="previews.url" :style="previews.img" />
+          </div>
+        </el-col>
+      </el-row>
+      <br />
+      <el-row>
+        <el-col :lg="2" :sm="3" :xs="3">
+          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
+            <el-button size="small">
+              选择
+              <i class="el-icon-upload el-icon--right"></i>
+            </el-button>
+          </el-upload>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2">
+          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
+          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
+          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
+          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
+        </el-col>
+        <el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2">
+          <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import store from "@/store";
+import { VueCropper } from "vue-cropper";
+import { uploadAvatar } from "@/api/system/user";
+import { debounce } from '@/utils'
+
+export default {
+  components: { VueCropper },
+  data() {
+    return {
+      // 是否显示弹出层
+      open: false,
+      // 是否显示cropper
+      visible: false,
+      // 弹出层标题
+      title: "修改头像",
+      options: {
+        img: store.getters.avatar,  //裁剪图片的地址
+        autoCrop: true,             // 是否默认生成截图框
+        autoCropWidth: 200,         // 默认生成截图框宽度
+        autoCropHeight: 200,        // 默认生成截图框高度
+        fixedBox: true,             // 固定截图框大小 不允许改变
+        outputType:"png",           // 默认生成截图为PNG格式
+        filename: 'avatar'          // 文件名称
+      },
+      previews: {},
+      resizeHandler: null
+    };
+  },
+  methods: {
+    // 编辑头像
+    editCropper() {
+      this.open = true;
+    },
+    // 打开弹出层结束时的回调
+    modalOpened() {
+      this.visible = true;
+      if (!this.resizeHandler) {
+        this.resizeHandler = debounce(() => {
+          this.refresh()
+        }, 100)
+      }
+      window.addEventListener("resize", this.resizeHandler)
+    },
+    // 刷新组件
+    refresh() {
+      this.$refs.cropper.refresh();
+    },
+    // 覆盖默认的上传行为
+    requestUpload() {
+    },
+    // 向左旋转
+    rotateLeft() {
+      this.$refs.cropper.rotateLeft();
+    },
+    // 向右旋转
+    rotateRight() {
+      this.$refs.cropper.rotateRight();
+    },
+    // 图片缩放
+    changeScale(num) {
+      num = num || 1;
+      this.$refs.cropper.changeScale(num);
+    },
+    // 上传预处理
+    beforeUpload(file) {
+      if (file.type.indexOf("image/") == -1) {
+        this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
+      } else {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+          this.options.img = reader.result;
+          this.options.filename = file.name;
+        };
+      }
+    },
+    // 上传图片
+    uploadImg() {
+      this.$refs.cropper.getCropBlob(data => {
+        let formData = new FormData();
+        formData.append("avatarfile", data, this.options.filename);
+        uploadAvatar(formData).then(response => {
+          this.open = false;
+          this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
+          store.commit('SET_AVATAR', this.options.img);
+          this.$modal.msgSuccess("修改成功");
+          this.visible = false;
+        });
+      });
+    },
+    // 实时预览
+    realTime(data) {
+      this.previews = data;
+    },
+    // 关闭窗口
+    closeDialog() {
+      this.options.img = store.getters.avatar
+      this.visible = false;
+      window.removeEventListener("resize", this.resizeHandler)
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+.user-info-head {
+  position: relative;
+  display: inline-block;
+  height: 120px;
+}
+
+.user-info-head:hover:after {
+  content: '+';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  color: #eee;
+  background: rgba(0, 0, 0, 0.5);
+  font-size: 24px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: pointer;
+  line-height: 110px;
+  border-radius: 50%;
+}
+</style>

src/views/tourism/scenicAreaManagement/contentManagement/profile/userInfo.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-form-item label="用户昵称" prop="nickName">
+      <el-input v-model="form.nickName" maxlength="30" />
+    </el-form-item> 
+    <el-form-item label="手机号码" prop="phonenumber">
+      <el-input v-model="form.phonenumber" maxlength="11" />
+    </el-form-item>
+    <el-form-item label="邮箱" prop="email">
+      <el-input v-model="form.email" maxlength="50" />
+    </el-form-item>
+    <el-form-item label="性别">
+      <el-radio-group v-model="form.sex">
+        <el-radio label="0">男</el-radio>
+        <el-radio label="1">女</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" size="mini" @click="submit">保存</el-button>
+      <el-button type="danger" size="mini" @click="close">关闭</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { updateUserProfile } from "@/api/system/user";
+
+export default {
+  props: {
+    user: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      form: {},
+      // 表单校验
+      rules: {
+        nickName: [
+          { required: true, message: "用户昵称不能为空", trigger: "blur" }
+        ],
+        email: [
+          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
+          {
+            type: "email",
+            message: "请输入正确的邮箱地址",
+            trigger: ["blur", "change"]
+          }
+        ],
+        phonenumber: [
+          { required: true, message: "手机号码不能为空", trigger: "blur" },
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  watch: {
+    user: {
+      handler(user) {
+        if (user) {
+          this.form = { nickName: user.nickName, phonenumber: user.phonenumber, email: user.email, sex: user.sex };
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    submit() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          updateUserProfile(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.user.phonenumber = this.form.phonenumber;
+            this.user.email = this.form.email;
+          });
+        }
+      });
+    },
+    close() {
+      this.$tab.closePage();
+    }
+  }
+};
+</script>