2025-05-21

admin/src/views/car/product/components/edit.vue

@@ -31,7 +31,7 @@
         </div>
         -->
       </el-form-item>
-      <el-form-item label="官方售价:">
+      <el-form-item label="优惠券金额:">
         <el-input
           clearable
           :maxlength="60"
@@ -39,28 +39,36 @@
           v-model="form.price"
         />
       </el-form-item>
-      <el-form-item label="置换补贴:">
+      <el-form-item label="指导价:">
         <el-input
           clearable
           :maxlength="60"
           placeholder=""
-          v-model="form.price_replacement"
+          v-model="form.guide_price"
         />
       </el-form-item>
-      <el-form-item label="报废补贴:">
+      <el-form-item label="优惠信息:">
         <el-input
           clearable
           :maxlength="60"
           placeholder=""
-          v-model="form.price_crapping"
+          v-model="form.discounts"
         />
       </el-form-item>
-      <el-form-item label="优惠金额:">
+      <el-form-item label="现金补贴:">
         <el-input
           clearable
           :maxlength="60"
           placeholder=""
-          v-model="form.price_coupon"
+          v-model="form.cash_subsidy"
+        />
+      </el-form-item>
+      <el-form-item label="新客大礼包:">
+        <el-input
+          clearable
+          :maxlength="60"
+          placeholder=""
+          v-model="form.new_price"
         />
       </el-form-item>
       <el-form-item label="推广范围:" prop="">
@@ -121,6 +129,16 @@
           v-model="form.secondLevelDeal"
         />
       </el-form-item>
+      <el-form-item label="产品标签:">
+        <el-checkbox-group v-model="form.carProductLabel">
+          <el-checkbox
+            v-for="value in carProductLabel"
+            :label="value.dictDataId"
+            :key="value.dictDataId"
+            >{{ value.dictDataName }}</el-checkbox
+          >
+        </el-checkbox-group>
+      </el-form-item>
       <el-form-item label="人群画像:">
         <el-checkbox-group v-model="form.crowdProfiling">
           <el-checkbox
@@ -147,22 +165,14 @@
           v-model="form.man_pre"
         />
       </el-form-item>
-      <el-form-item label="购车券:">
+      <el-form-item label="使用规则:">
-        <el-input
-          clearable
-          :maxlength="60"
-          placeholder=""
-          v-model="form.car_coupon"
-        />
-      </el-form-item>
-      <el-form-item label="车型卖点:">
         <el-input
           clearable
           type="textarea"
           :maxlength="60"
           placeholder=""
           :rows="4"
-          v-model="form.descript"
+          v-model="form.rule"
         />
       </el-form-item>
       <el-form-item label="推广文案:">
@@ -237,14 +247,16 @@
           modelId: null
         },
         price: '',
-        price_replacement: '',
+        guide_price: '',
-        price_crapping: '',
+        discounts: '',
+        cash_subsidy: '',
         price_coupon: '',
+        new_price: '',
         man_pre: '',
         age_between: '',
-        descript: '',
+        rule: '',
         promotion_text: [],
-        car_coupon: ''
+        carProductLabel: []
       };
       return {
         editVersion: false,
@@ -279,7 +291,10 @@
         loading: false,
         // 是否是修改
         isUpdate: false,
-        crowdProfiling: []
+        //用户画像
+        crowdProfiling: [],
+        //产品标签
+        carProductLabel: ''
       };
     },
     computed: {
@@ -292,6 +307,9 @@
       listDictionaryData({ dictCode: 'crowdProfiling' }).then((data) => {
         this.crowdProfiling = data;
       });
+      listDictionaryData({ dictCode: 'carProductLabel' }).then((data) => {
+        this.carProductLabel = data;
+      });
     },
     methods: {
       /* 保存编辑 */

admin/src/views/car/product/index.vue

@@ -81,6 +81,9 @@
         </template>
         <!-- 操作列 -->
         <template v-slot:action="{ row }">
+          <el-link type="primary" :underline="false" @click="edit(row)">
+            适用门店
+          </el-link>
           <el-link
             type="primary"
             :underline="false"

pingan/.env

@@ -1,2 +1,2 @@
-VUE_APP_NAME=易客来
+VUE_APP_NAME=后台
 VUE_APP_API_BASE_URL=https://v2.eleadmin.com/api

pingan/.env.development

@@ -1,4 +1,3 @@
-VUE_APP_NAME=易客来
 VUE_APP_API_BASE_URL=/pingan
 URL = http://agent.admin.haodian.cn
 PORT = 8200

pingan/src/api/car/product/index.js

@@ -65,9 +65,7 @@ export async function removeProduct(ids) {
  * @param id 产品id
  */
 export async function getProduct(id) {
-  const res = await request.get('/car/product/', {
+  const res = await request.get('/car/product/' + id);
-    id: id
-  });
   if (res.data.code === 0) {
     return res.data.data;
   }

pingan/src/api/user/cmmssn/index.js

@@ -0,0 +1,15 @@
+import request from '@/utils/request';
+
+/**
+ * 我的佣金
+ * @param params 查询条件
+ */
+export async function pageCmmssn(params) {
+  const res = await request.get('/user/cmmssn/page', {
+    params
+  });
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

pingan/src/api/user/team/index.js

@@ -0,0 +1,15 @@
+import request from '@/utils/request';
+
+/**
+ * 我的团队
+ * @param params 查询条件
+ */
+export async function pageTeam(params) {
+  const res = await request.get('/user/team/page', {
+    params
+  });
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

pingan/src/components/IframePre/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :title="title"
+    :width="width"
+    :before-close="handleBeforeClose"
+    custom-class="custom-dialog"
+  >
+    <!-- 内容区域 -->
+    <div class="dialog-content" :style="{ height: contentHeight }">
+      <iframe
+        :src="iframeSrc"
+        frameborder="0"
+        @load="handleIframeLoad"
+        style="width: 100%; height: 100%"
+      ></iframe>
+    </div>
+
+    <!-- 底部按钮区域 -->
+    <template #footer>
+      <el-button
+        type="primary"
+        style="width: 100%"
+        v-clipboard:copy="iframeSrc"
+        v-clipboard:success="onCopy"
+        >复制链接</el-button
+      >
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    name: 'ElDialogWrapper',
+    props: {
+      // 基础配置
+      visible: {
+        type: Boolean,
+        default: false
+      },
+      title: {
+        type: String,
+        default: '对话框'
+      },
+      width: {
+        type: String,
+        default: '50%'
+      },
+      height: {
+        type: String,
+        default: '500px' // 更改为明确的默认高度
+      },
+      // iframe配置
+      iframeSrc: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      // 计算内容区域高度（减去标题和底部区域）
+      contentHeight() {
+        return this.height;
+      }
+    },
+    data() {
+      return {
+        dialogVisible: this.visible
+      };
+    },
+    watch: {
+      visible(val) {
+        this.dialogVisible = val;
+      },
+      dialogVisible(val) {
+        this.$emit('update:visible', val);
+      }
+    },
+    methods: {
+      handleBeforeClose(done) {
+        this.$emit('before-close', done);
+        this.$emit('update:visible', false);
+        done();
+      },
+      handleIframeLoad() {
+        this.$emit('iframe-load');
+      },
+      onCopy() {
+        this.$message.success('复制成功！');
+      }
+    }
+  };
+</script>
+
+<style scoped>
+  /* 组件内样式（scoped） */
+  ::v-deep .el-dialog__body {
+    padding: 0;
+    font-size: 14px;
+  }
+</style>

pingan/src/views/car/product/components/edit.vue

@@ -178,10 +178,8 @@
       }
     },
     created() {
-      console.log('333');
       listDictionaryData({ dictCode: 'crowdProfiling' }).then((data) => {
         this.crowdProfiling = data;
-        console.log(this.crowdProfiling);
       });
     },
     methods: {

pingan/src/views/car/product/detail.vue

@@ -5,48 +5,80 @@
         <el-col :span="24"><h2>概况</h2></el-col>
       </el-row>
       <el-row class="pd10">
-        <el-col :span="6">品牌</el-col>
+        <el-col :span="6">品牌 {{ product.brandName }}</el-col>
-        <el-col :span="6">车型</el-col>
+        <el-col :span="6">车型 {{ product.seariesName }}</el-col>
-        <el-col :span="6">官方售价</el-col>
+        <el-col :span="6"
+          >官方售价
+          <span class="ele-text-danger">{{ product.price }}</span></el-col
+        >
         <el-col :span="6"></el-col>
       </el-row>
       <el-row class="pd10">
         <el-col :span="24"><h2>优惠</h2></el-col>
       </el-row>
       <el-row class="pd10">
-        <el-col :span="6">置换补贴</el-col>
+        <el-col :span="6"
-        <el-col :span="6">报废补贴</el-col>
+          >置换补贴
-        <el-col :span="6">优惠金额</el-col>
+          <span class="ele-text-danger">{{
+            product.price_replacement
+          }}</span></el-col
+        >
+        <el-col :span="6"
+          >报废补贴
+          <span class="ele-text-danger">{{
+            product.price_crapping
+          }}</span></el-col
+        >
+        <el-col :span="6"
+          >优惠金额
+          <span class="ele-text-danger">{{
+            product.price_coupon
+          }}</span></el-col
+        >
         <el-col :span="6"></el-col>
       </el-row>
       <el-row class="pd10">
         <el-col :span="24"><h2>客户画像</h2></el-col>
       </el-row>
       <el-row class="pd10">
-        <el-col :span="6">男性占比</el-col>
+        <el-col :span="6">男性占比 {{ product.man_pre }}</el-col>
-        <el-col :span="6">年龄区间</el-col>
+        <el-col :span="6">年龄区间 {{ product.age_between }}</el-col>
-        <el-col :span="6">人群标签</el-col>
+        <el-col :span="12">
-        <el-col :span="6"></el-col>
+          人群标签
+          <template v-for="(item, index) in crowdProfiling">
+            <el-tag
+              :key="index"
+              v-if="product.crowdProfiling.includes(item.dictDataId)"
+              :type="randomTypeName()"
+              >{{ item.dictDataName }}</el-tag
+            >
+          </template>
+        </el-col>
       </el-row>
       <el-row class="pd10">
         <el-col :span="24"><h2>车型卖点</h2></el-col>
       </el-row>
       <el-row class="pd10">
-        <el-col :span="24">范围访问量附件为冷风机微辣</el-col>
+        <el-col :span="24">{{ product.descript }}</el-col>
       </el-row>
       <el-row class="pd10">
         <el-col :span="24"><h2>推广文案</h2></el-col>
       </el-row>
-      <el-row class="pd10">
+      <el-row
+        class="pd10"
+        v-for="(item, index) in product.promotion_text"
+        :key="index"
+      >
         <el-col :span="20">
-          <el-input
+          <el-input :value="item"></el-input>
-            type="textarea"
-            :rows="2"
-            value="呢哦if我饿了覅就为了"
-          ></el-input>
         </el-col>
         <el-col :span="4">
-          <el-button style="margin-left: 5px" type="primary" size="small"
+          <el-button
+            style="margin-left: 5px"
+            type="primary"
+            size="mini"
+            v-clipboard:copy="item"
+            v-clipboard:success="onCopy"
             >复制</el-button
           >
         </el-col>
@@ -56,10 +88,15 @@
       </el-row>
       <el-row class="pd10">
         <el-col :span="20">
-          <el-input value="呢哦if我饿了覅就为了"></el-input
+          <el-input :value="product.car_coupon"></el-input
         ></el-col>
         <el-col :span="4">
-          <el-button style="margin-left: 5px" type="primary" size="small"
+          <el-button
+            style="margin-left: 5px"
+            type="primary"
+            size="mini"
+            v-clipboard:copy="product.car_coupon"
+            v-clipboard:success="onCopy"
             >复制</el-button
           >
         </el-col>
@@ -70,6 +107,7 @@
 
 <script>
   import { getProduct } from '@/api/car/product';
+  import { listDictionaryData } from '@/api/system/dictionary-data';
   const ROUTE_PATH = '/car/product/detail';
   export default {
     name: 'carProductDetail',
@@ -77,22 +115,42 @@
     data() {
       return {
         loading: false,
-        promotionText:
+        product: {
-          '东风日产N7，官方售价11.99万起，现享10000元置换补贴和报废补贴，至高优惠10000元！适合都市白领家庭，25-40岁人群首选新能源车型。'
+          id: '',
+          brandName: '',
+          seariesName: '',
+          price: '',
+          price_replacement: '',
+          price_crapping: '',
+          price_coupon: '',
+          man_pre: '',
+          age_between: '',
+          descript: '',
+          promotion_text: [],
+          car_coupon: '',
+          crowdProfiling: []
+        },
+        crowdProfiling: [],
+        // 预定义的 CSS 类数组
+        availableClasses: ['', 'success', 'info', 'warning', 'danger']
       };
     },
-    created() {},
+    created() {
+      listDictionaryData({ dictCode: 'crowdProfiling' }).then((data) => {
+        this.crowdProfiling = data;
+      });
+    },
     methods: {
       query() {
-        const id = this.$route.params.id;
+        const id = this.$route.query.id;
-        if (!id || this.user.userId === Number(id)) {
+        if (!id || this.product.id === Number(id)) {
           return;
         }
         this.loading = true;
         getProduct(Number(id))
           .then((data) => {
             this.loading = false;
-            this.$util.assignObject(this.user, {
+            this.$util.assignObject(this.product, {
               ...data,
               createTime: this.$util.toDateString(data.createTime)
             });
@@ -101,13 +159,20 @@
             this.loading = false;
             this.$message.error(e.message);
           });
+      },
+      onCopy() {
+        this.$message.success('复制成功！');
+      },
+      randomTypeName() {
+        const index = Math.floor(Math.random() * 5); // 生成 0~4 的整数
+        return this.availableClasses[index];
       }
     },
     watch: {
       $route: {
         handler(route) {
-          const { fullPath } = route;
+          const { path } = route;
-          if (!fullPath.startsWith(ROUTE_PATH)) {
+          if (path !== ROUTE_PATH) {
             return;
           }
           this.query();

pingan/src/views/car/product/index.vue

@@ -81,8 +81,10 @@
           >
             文案
           </el-link>
-          <el-link type="primary" :underline="false"> 购车券 </el-link>
           <el-link type="primary" :underline="false"> 海报 </el-link>
+          <el-link type="primary" :underline="false" @click="showPre(row)">
+            预览
+          </el-link>
         </template>
       </ele-pro-table>
       <!-- 推广文案 -->
@@ -102,6 +104,13 @@
           </div>
         </template>
       </el-dialog>
+      <el-dialog-wrapper
+        :visible.sync="dialogVisible"
+        width="300px"
+        height="60vh"
+        title="产品预览"
+        iframe-src="https://share.xiaoyu.com/wap-view/home"
+      />
     </el-card>
   </div>
 </template>
@@ -109,10 +118,11 @@
 <script>
   import { pageProduct } from '@/api/car/product';
   import CarModelSelector from '@/components/CarSelector/index.vue';
+  import ElDialogWrapper from '@/components/IframePre/index.vue';
 
   export default {
     name: 'carProduct',
-    components: { CarModelSelector },
+    components: { CarModelSelector, ElDialogWrapper },
     data() {
       return {
         where: {
@@ -125,13 +135,6 @@
         },
         // 表格列配置
         columns: [
-          {
-            columnKey: 'selection',
-            type: 'selection',
-            width: 45,
-            align: 'center',
-            fixed: 'left'
-          },
           {
             prop: 'title',
             label: '产品信息',
@@ -146,7 +149,7 @@
             minWidth: 80
           },
           {
-            prop: '',
+            prop: 'Price',
             label: '佣金',
             showOverflowTooltip: true,
             minWidth: 80,
@@ -177,18 +180,19 @@
             slot: 'action'
           },
           {
-            columnKey: '',
+            prop: 'viewNum',
-            label: '浏览数',
+            label: '浏览量',
-            width: 80,
+            showOverflowTooltip: true,
-            align: 'center',
+            minWidth: 80,
-            resizable: false
+            align: 'center'
           },
           {
-            columnKey: '',
+            prop: 'cluesNum',
             label: '留资数',
             width: 80,
             align: 'center',
-            resizable: false
+            resizable: false,
+            showOverflowTooltip: true
           }
         ],
         // 表格选中数据
@@ -196,7 +200,8 @@
         // 当前编辑数据
         current: null,
         showPromotion: false,
-        componentKey: ''
+        componentKey: '',
+        dialogVisible: false
       };
     },
     created() {},
@@ -236,6 +241,10 @@
             query: row ? { id: row.id } : undefined
           });
         });
+      },
+      //预览
+      showPre() {
+        this.dialogVisible = true;
       }
     }
   };
@@ -254,4 +263,7 @@
     /* 文本样式 */
     overflow: hidden;
   }
+  .el-dialog__body {
+    padding: 0;
+  }
 </style>

pingan/src/views/user/cmmssn/components/role-select.vue

@@ -0,0 +1,54 @@
+<!-- 角色选择下拉框 -->
+<template>
+  <el-select
+    multiple
+    clearable
+    :value="value"
+    class="ele-block"
+    :placeholder="placeholder"
+    @input="updateValue"
+  >
+    <el-option
+      v-for="item in data"
+      :key="item.roleId"
+      :value="item.roleId"
+      :label="item.roleName"
+    />
+  </el-select>
+</template>
+
+<script>
+  import { listRoles } from '@/api/system/role';
+
+  export default {
+    props: {
+      // 选中的数据(v-modal)
+      value: Array,
+      // 提示信息
+      placeholder: {
+        type: String,
+        default: '请选择角色'
+      }
+    },
+    data() {
+      return {
+        data: []
+      };
+    },
+    created() {
+      /* 获取角色数据 */
+      listRoles()
+        .then((list) => {
+          this.data = list;
+        })
+        .catch((e) => {
+          this.$message.error(e.message);
+        });
+    },
+    methods: {
+      updateValue(value) {
+        this.$emit('input', value);
+      }
+    }
+  };
+</script>

pingan/src/views/user/cmmssn/components/user-edit.vue

@@ -0,0 +1,262 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="680px"
+    :visible="visible"
+    :append-to-body="true"
+    :close-on-click-modal="true"
+    custom-class="ele-dialog-form"
+    :title="isUpdate ? '修改用户' : '添加用户'"
+    @update:visible="updateVisible"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="82px">
+      <el-row :gutter="15">
+        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
+          <el-form-item label="用户账号:" prop="username">
+            <el-input
+              clearable
+              :maxlength="20"
+              :disabled="isUpdate"
+              v-model="form.username"
+              placeholder="请输入用户账号"
+            />
+          </el-form-item>
+          <el-form-item label="用户名:" prop="nickname">
+            <el-input
+              clearable
+              :maxlength="20"
+              v-model="form.nickname"
+              placeholder="请输入用户名"
+            />
+          </el-form-item>
+          <el-form-item label="性别:" prop="sex">
+            <el-select
+              clearable
+              class="ele-block"
+              v-model="form.sex"
+              placeholder="请选择性别"
+            >
+              <el-option label="男" value="1" />
+              <el-option label="女" value="2" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="角色:" prop="roleIds">
+            <role-select v-model="form.roleIds" />
+          </el-form-item>
+          <el-form-item label="邮箱:" prop="email">
+            <el-input
+              clearable
+              :maxlength="100"
+              v-model="form.email"
+              placeholder="请输入邮箱"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
+          <el-form-item label="手机号:" prop="phone">
+            <el-input
+              clearable
+              :maxlength="11"
+              v-model="form.phone"
+              placeholder="请输入手机号"
+            />
+          </el-form-item>
+          <el-form-item label="出生日期:" prop="birthday">
+            <el-date-picker
+              type="date"
+              class="ele-fluid"
+              v-model="form.birthday"
+              value-format="yyyy-MM-dd"
+              placeholder="请选择出生日期"
+            />
+          </el-form-item>
+          <el-form-item v-if="!isUpdate" label="登录密码:" prop="password">
+            <el-input
+              show-password
+              :maxlength="20"
+              v-model="form.password"
+              placeholder="请输入登录密码"
+            />
+          </el-form-item>
+          <el-form-item label="个人简介:">
+            <el-input
+              :rows="4"
+              clearable
+              type="textarea"
+              :maxlength="200"
+              v-model="form.introduction"
+              placeholder="请输入个人简介"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template v-slot:footer>
+      <el-button @click="updateVisible(false)">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script>
+  import { emailReg, phoneReg } from 'ele-admin';
+  import RoleSelect from './role-select.vue';
+  import { addUser, updateUser, checkExistence } from '@/api/system/user';
+
+  export default {
+    components: { RoleSelect },
+    props: {
+      // 弹窗是否打开
+      visible: Boolean,
+      // 修改回显的数据
+      data: Object
+    },
+    data() {
+      const defaultForm = {
+        userId: null,
+        username: '',
+        nickname: '',
+        sex: null,
+        roleIds: [],
+        email: '',
+        phone: '',
+        birthday: '',
+        password: '',
+        introduction: ''
+      };
+      return {
+        defaultForm,
+        // 表单数据
+        form: { ...defaultForm },
+        // 表单验证规则
+        rules: {
+          username: [
+            {
+              required: true,
+              trigger: 'blur',
+              validator: (_rule, value, callback) => {
+                if (!value) {
+                  return callback(new Error('请输入用户账号'));
+                }
+                checkExistence('username', value, this.data?.username)
+                  .then(() => {
+                    callback(new Error('账号已经存在'));
+                  })
+                  .catch(() => {
+                    callback();
+                  });
+              }
+            }
+          ],
+          nickname: [
+            {
+              required: true,
+              message: '请输入用户名',
+              trigger: 'blur'
+            }
+          ],
+          sex: [
+            {
+              required: true,
+              message: '请选择性别',
+              trigger: 'blur'
+            }
+          ],
+          roleIds: [
+            {
+              required: true,
+              message: '请选择角色',
+              trigger: 'blur'
+            }
+          ],
+          email: [
+            {
+              pattern: emailReg,
+              message: '邮箱格式不正确',
+              trigger: 'blur'
+            }
+          ],
+          password: [
+            {
+              required: true,
+              pattern: /^[\S]{5,18}$/,
+              message: '密码必须为5-18位非空白字符',
+              trigger: 'blur'
+            }
+          ],
+          phone: [
+            {
+              pattern: phoneReg,
+              message: '手机号格式不正确',
+              trigger: 'blur'
+            }
+          ]
+        },
+        // 提交状态
+        loading: false,
+        // 是否是修改
+        isUpdate: false
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      /* 保存编辑 */
+      save() {
+        this.$refs.form.validate((valid) => {
+          if (!valid) {
+            return false;
+          }
+          this.loading = true;
+          const data = {
+            ...this.form,
+            roles: this.form.roleIds.map((d) => {
+              return { roleId: d };
+            })
+          };
+          const saveOrUpdate = this.isUpdate ? updateUser : addUser;
+          saveOrUpdate(data)
+            .then((msg) => {
+              this.loading = false;
+              this.$message.success(msg);
+              this.updateVisible(false);
+              this.$emit('done');
+            })
+            .catch((e) => {
+              this.loading = false;
+              this.$message.error(e.message);
+            });
+        });
+      },
+      /* 更新visible */
+      updateVisible(value) {
+        this.$emit('update:visible', value);
+      }
+    },
+    watch: {
+      visible(visible) {
+        if (visible) {
+          if (this.data) {
+            this.$util.assignObject(this.form, {
+              ...this.data,
+              roleIds: this.data.roles.map((d) => d.roleId),
+              password: ''
+            });
+            this.isUpdate = true;
+          } else {
+            this.isUpdate = false;
+          }
+        } else {
+          this.$refs.form.clearValidate();
+          this.form = { ...this.defaultForm };
+        }
+      }
+    }
+  };
+</script>

pingan/src/views/user/cmmssn/components/user-import.vue

@@ -0,0 +1,99 @@
+<!-- 用户导入弹窗 -->
+<template>
+  <ele-modal
+    width="520px"
+    title="导入用户"
+    :visible="visible"
+    @update:visible="updateVisible"
+  >
+    <el-upload
+      drag
+      action=""
+      class="ele-block"
+      v-loading="loading"
+      accept=".xls,.xlsx"
+      :show-file-list="false"
+      :before-upload="doUpload"
+    >
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">将文件拖到此处, 或 <em>点击上传</em></div>
+      <template v-slot:tip>
+        <div class="el-upload__tip ele-text-center">
+          <span>只能上传xls、xlsx文件, </span>
+          <el-link
+            download
+            :href="url"
+            type="primary"
+            :underline="false"
+            style="vertical-align: baseline"
+          >
+            下载模板
+          </el-link>
+        </div>
+      </template>
+    </el-upload>
+  </ele-modal>
+</template>
+
+<script>
+  import { importUsers } from '@/api/system/user';
+
+  export default {
+    props: {
+      // 是否打开弹窗
+      visible: Boolean
+    },
+    data() {
+      return {
+        // 导入请求状态
+        loading: false,
+        // 导入模板下载地址
+        url: 'https://cdn.eleadmin.com/20200610/用户导入模板.xlsx'
+      };
+    },
+    methods: {
+      /* 上传 */
+      doUpload(file) {
+        if (
+          ![
+            'application/vnd.ms-excel',
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+          ].includes(file.type)
+        ) {
+          this.$message.error('只能选择 excel 文件');
+          return false;
+        }
+        if (file.size / 1024 / 1024 > 10) {
+          this.$message.error('大小不能超过 10MB');
+          return false;
+        }
+        this.loading = true;
+        importUsers(file)
+          .then((msg) => {
+            this.loading = false;
+            this.$message.success(msg);
+            this.updateVisible(false);
+            this.$emit('done');
+          })
+          .catch((e) => {
+            this.loading = false;
+            this.$message.error(e.message);
+          });
+        return false;
+      },
+      /* 更新visible */
+      updateVisible(value) {
+        this.$emit('update:visible', value);
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .ele-block {
+    :deep(.el-upload),
+    :deep(.el-upload-dragger) {
+      width: 100%;
+    }
+  }
+</style>

pingan/src/views/user/cmmssn/components/user-search.vue

@@ -0,0 +1,126 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="77px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
+        <el-form-item label="筛选日期:">
+          <el-date-picker
+            unlink-panels
+            v-model="dateRange"
+            range-separator="-"
+            type="datetimerange"
+            end-placeholder="结束日期"
+            start-placeholder="开始日期"
+            :picker-options="pickerOptions"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            class="ele-fluid"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <div class="ele-form-actions">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+          >
+            查询
+          </el-button>
+          <el-button @click="reset">重置</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+  export default {
+    data() {
+      // 默认表单数据
+      const defaultWhere = {
+        username: '',
+        nickname: '',
+        sex: undefined
+      };
+      return {
+        // 表单数据
+        where: { ...defaultWhere },
+        // 日期范围选择
+        dateRange: [],
+        // 日期时间选择器快捷项
+        pickerOptions: {
+          shortcuts: [
+            {
+              text: '今天',
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                picker.$emit('pick', [start, end]);
+              }
+            },
+            {
+              text: '昨天',
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setTime(start.getTime() - 3600 * 1000 * 24);
+                end.setTime(start.getTime() - 3600 * 1000 * 24);
+                picker.$emit('pick', [start, end]);
+              }
+            },
+            {
+              text: '最近一周',
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                picker.$emit('pick', [start, end]);
+              }
+            },
+            {
+              text: '最近一个月',
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                picker.$emit('pick', [start, end]);
+              }
+            },
+            {
+              text: '最近三个月',
+              onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                picker.$emit('pick', [start, end]);
+              }
+            }
+          ]
+        }
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      /* 搜索 */
+      search() {
+        this.$emit('search', this.where);
+      },
+      /*  重置 */
+      reset() {
+        this.where = { ...this.defaultWhere };
+        this.search();
+      }
+    }
+  };
+</script>

pingan/src/views/user/cmmssn/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <el-row class="ele-text-center">
+        <el-radio-group v-model="tabPosition" @change="handleOptionChange">
+          <el-radio-button label="my">我的收入</el-radio-button>
+          <el-radio-button label="team">团队收入</el-radio-button>
+        </el-radio-group>
+      </el-row>
+      <el-row class="ele-text-center" style="font-size: 30px; padding: 20px">
+        <div class="ele-text-danger">
+          <span>¥10000</span>
+        </div>
+        <div>
+          <span>我的收入（元）</span>
+        </div>
+      </el-row>
+      <!-- 搜索表单 -->
+      <user-search @search="reload" />
+      <!-- 数据表格 -->
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        cache-key="systemUserTable"
+      >
+      </ele-pro-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import UserSearch from './components/user-search.vue';
+  import { pageCmmssn } from '@/api/user/cmmssn';
+
+  export default {
+    name: 'SystemUser',
+    components: {
+      UserSearch
+    },
+    data() {
+      return {
+        // 表格列配置
+        columns: [
+          {
+            prop: 'fromCn',
+            label: '佣金来源',
+            showOverflowTooltip: true,
+            slot: 'username',
+            align: 'center',
+            minWidth: 100
+          },
+          {
+            prop: 'typeCn',
+            label: '类型',
+            showOverflowTooltip: true,
+            minWidth: 80,
+            align: 'center'
+          },
+          {
+            prop: 'money',
+            label: '金额',
+            showOverflowTooltip: true,
+            minWidth: 80,
+            align: 'center'
+          },
+          {
+            prop: 'ctime',
+            label: '时间',
+            align: 'center',
+            minWidth: 100,
+            resizable: false,
+            showOverflowTooltip: true
+          }
+        ],
+        tabPosition: 'my'
+      };
+    },
+    methods: {
+      /* 表格数据源 */
+      datasource({ page, limit, where, order }) {
+        return pageCmmssn({ ...where, ...order, page, limit });
+      },
+      /* 刷新表格 */
+      reload(where) {
+        this.$refs.table.reload({ page: 1, where: where });
+      },
+      handleOptionChange() {
+        console.log(this.tabPosition);
+      }
+    }
+  };
+</script>

pingan/src/views/user/profile/index.vue

@@ -1,88 +1,49 @@
 <template>
   <div class="ele-body">
-    <el-row :gutter="15">
+    <el-row :gutter="24">
-      <el-col v-bind="styleResponsive ? { md: 6, sm: 8 } : { span: 6 }">
+      <el-col>
-        <el-card shadow="never" body-style="padding: 25px;">
+        <el-card shadow="never" body-style="padding: 20px;">
-          <div class="user-info-card">
-            <div class="user-info-avatar-group" @click="openCropper">
-              <img class="user-info-avatar" :src="form.avatar" alt="" />
-              <i class="el-icon-upload2"></i>
-            </div>
-            <h2 class="user-info-name">{{ loginUser.nickname }}</h2>
-            <div class="user-info-desc">{{ loginUser.introduction }}</div>
-          </div>
-        </el-card>
-      </el-col>
-      <el-col v-bind="styleResponsive ? { md: 18, sm: 16 } : { span: 18 }">
-        <el-card shadow="never" body-style="padding: 0;">
           <el-tabs v-model="active" class="user-info-tabs">
             <el-tab-pane label="基本信息" name="info">
               <el-form
                 ref="form"
                 :model="form"
                 :rules="rules"
-                label-width="90px"
+                label-width="300px"
-                style="max-width: 450px; padding: 34px 20px 0 20px"
+                style="padding: 34px 20px 0 20px"
                 @keyup.enter.native="save"
                 @submit.native.prevent
               >
-                <el-form-item label="昵称:" prop="nickname">
+                <el-form-item label="姓名:" prop="username">
-                  <el-input
+                  <div> {{ form.username }} </div>
-                    v-model="form.nickname"
-                    placeholder="请输入昵称"
-                    clearable
-                  />
                 </el-form-item>
-                <el-form-item label="性别:" prop="sex">
+                <el-form-item label="手机号:" prop="phone">
-                  <el-select
+                  <div class="phone-container">
-                    v-model="form.sex"
+                    {{ form.phone }}
-                    placeholder="请选择性别"
+                    <el-button
-                    class="ele-fluid"
+                      type="primary"
-                    clearable
+                      size="small"
-                  >
+                      style="margin-left: 10px"
-                    <el-option label="男" value="1" />
+                    >
-                    <el-option label="女" value="2" />
+                      换绑
-                  </el-select>
+                    </el-button>
-                </el-form-item>
-                <el-form-item label="邮箱:" prop="email">
-                  <el-input
-                    v-model="form.email"
-                    placeholder="请输入邮箱"
-                    clearable
-                  />
-                </el-form-item>
-                <el-form-item label="个人简介:">
-                  <el-input
-                    v-model="form.introduction"
-                    placeholder="请输入个人简介"
-                    :rows="4"
-                    type="textarea"
-                  />
-                </el-form-item>
-                <el-form-item label="街道地址:">
-                  <el-input
-                    v-model="form.address"
-                    placeholder="请输入街道地址"
-                    clearable
-                  />
-                </el-form-item>
-                <el-form-item label="联系电话:">
-                  <div class="ele-cell">
-                    <el-input v-model="form.tellPre" style="width: 65px" />
-                    <div class="ele-cell-content">
-                      <el-input
-                        v-model="form.tell"
-                        placeholder="请输入联系电话"
-                        clearable
-                      />
-                    </div>
                   </div>
                 </el-form-item>
+                <el-form-item label="经营区域:">
+                  <div class="phone-container"> {{ form.cityName }} </div>
+                </el-form-item>
+                <!--
+                <el-form-item label="团队长:">
+                  <div class="phone-container"> 222 </div>
+                </el-form-item>
+                -->
+                <!--
                 <el-form-item>
                   <el-button type="primary" :loading="loading" @click="save">
                     保存更改
                   </el-button>
                 </el-form-item>
+                -->
               </el-form>
             </el-tab-pane>
           </el-tabs>
@@ -114,12 +75,9 @@
         active: 'info',
         // 表单数据
         form: {
-          nickname: '',
+          username: '',
-          sex: '1',
+          phone: '',
-          email: '',
+          cityName: ''
-          tellPre: '',
-          tell: '',
-          avatar: ''
         },
         // 表单验证规则
         rules: {
@@ -162,10 +120,7 @@
       }
     },
     created() {
-      Object.assign(this.form, this.loginUser, {
+      Object.assign(this.form, this.loginUser);
-        tellPre: '',
-        tell: ''
-      });
     },
     methods: {
       /* 保存更改 */
@@ -204,142 +159,4 @@
   .ele-body {
     padding-bottom: 0;
   }
-
-  .el-card {
-    margin-bottom: 15px;
-  }
-
-  /* 用户资料卡片 */
-  .user-info-card {
-    padding: 8px 0;
-    text-align: center;
-
-    .user-info-avatar-group {
-      position: relative;
-      cursor: pointer;
-      margin: 0 auto;
-      width: 110px;
-      height: 110px;
-      border-radius: 50%;
-      overflow: hidden;
-
-      & > i {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        color: #fff;
-        font-size: 30px;
-        display: none;
-        z-index: 2;
-      }
-
-      &:hover {
-        & > i {
-          display: block;
-        }
-
-        &:after {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background-color: rgba(0, 0, 0, 0.3);
-        }
-      }
-    }
-
-    .user-info-avatar {
-      width: 110px;
-      height: 110px;
-      border-radius: 50%;
-      object-fit: cover;
-    }
-
-    .user-info-name {
-      font-size: 24px;
-      margin-top: 20px;
-    }
-
-    .user-info-desc {
-      margin-top: 8px;
-    }
-  }
-
-  /* 用户信息列表 */
-  .user-info-list {
-    margin-top: 30px;
-
-    .user-info-item {
-      margin-bottom: 16px;
-      display: flex;
-      align-items: baseline;
-
-      & > i {
-        margin-right: 10px;
-        font-size: 16px;
-      }
-
-      & > span {
-        flex: 1;
-        display: block;
-      }
-    }
-  }
-
-  /* 用户标签 */
-  .user-info-tags .el-tag {
-    margin: 10px 10px 0 0;
-  }
-
-  /* 用户账号绑定列表 */
-  .user-account-list {
-    padding: 16px 20px;
-
-    .user-account-item {
-      padding: 15px;
-
-      .ele-text-secondary {
-        margin-top: 6px;
-      }
-
-      .user-account-icon {
-        width: 42px;
-        height: 42px;
-        line-height: 42px;
-        text-align: center;
-        color: #fff;
-        font-size: 26px;
-        border-radius: 50%;
-        background-color: #3492ed;
-        box-sizing: border-box;
-
-        &.el-icon-_wechat {
-          background-color: #4daf29;
-          font-size: 28px;
-        }
-
-        &.el-icon-_alipay {
-          background-color: #1476fe;
-          padding-left: 5px;
-          font-size: 32px;
-        }
-      }
-    }
-  }
-
-  /* tab 页签 */
-  .user-info-tabs {
-    :deep(.el-tabs__nav-wrap) {
-      padding-left: 24px;
-    }
-
-    :deep(.el-tabs__item) {
-      height: 50px;
-      line-height: 50px;
-      font-size: 15px;
-    }
-  }
 </style>

pingan/src/views/user/team/components/role-select.vue

@@ -0,0 +1,54 @@
+<!-- 角色选择下拉框 -->
+<template>
+  <el-select
+    multiple
+    clearable
+    :value="value"
+    class="ele-block"
+    :placeholder="placeholder"
+    @input="updateValue"
+  >
+    <el-option
+      v-for="item in data"
+      :key="item.roleId"
+      :value="item.roleId"
+      :label="item.roleName"
+    />
+  </el-select>
+</template>
+
+<script>
+  import { listRoles } from '@/api/system/role';
+
+  export default {
+    props: {
+      // 选中的数据(v-modal)
+      value: Array,
+      // 提示信息
+      placeholder: {
+        type: String,
+        default: '请选择角色'
+      }
+    },
+    data() {
+      return {
+        data: []
+      };
+    },
+    created() {
+      /* 获取角色数据 */
+      listRoles()
+        .then((list) => {
+          this.data = list;
+        })
+        .catch((e) => {
+          this.$message.error(e.message);
+        });
+    },
+    methods: {
+      updateValue(value) {
+        this.$emit('input', value);
+      }
+    }
+  };
+</script>

pingan/src/views/user/team/components/user-edit.vue

@@ -0,0 +1,262 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="680px"
+    :visible="visible"
+    :append-to-body="true"
+    :close-on-click-modal="true"
+    custom-class="ele-dialog-form"
+    :title="isUpdate ? '修改用户' : '添加用户'"
+    @update:visible="updateVisible"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="82px">
+      <el-row :gutter="15">
+        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
+          <el-form-item label="用户账号:" prop="username">
+            <el-input
+              clearable
+              :maxlength="20"
+              :disabled="isUpdate"
+              v-model="form.username"
+              placeholder="请输入用户账号"
+            />
+          </el-form-item>
+          <el-form-item label="用户名:" prop="nickname">
+            <el-input
+              clearable
+              :maxlength="20"
+              v-model="form.nickname"
+              placeholder="请输入用户名"
+            />
+          </el-form-item>
+          <el-form-item label="性别:" prop="sex">
+            <el-select
+              clearable
+              class="ele-block"
+              v-model="form.sex"
+              placeholder="请选择性别"
+            >
+              <el-option label="男" value="1" />
+              <el-option label="女" value="2" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="角色:" prop="roleIds">
+            <role-select v-model="form.roleIds" />
+          </el-form-item>
+          <el-form-item label="邮箱:" prop="email">
+            <el-input
+              clearable
+              :maxlength="100"
+              v-model="form.email"
+              placeholder="请输入邮箱"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
+          <el-form-item label="手机号:" prop="phone">
+            <el-input
+              clearable
+              :maxlength="11"
+              v-model="form.phone"
+              placeholder="请输入手机号"
+            />
+          </el-form-item>
+          <el-form-item label="出生日期:" prop="birthday">
+            <el-date-picker
+              type="date"
+              class="ele-fluid"
+              v-model="form.birthday"
+              value-format="yyyy-MM-dd"
+              placeholder="请选择出生日期"
+            />
+          </el-form-item>
+          <el-form-item v-if="!isUpdate" label="登录密码:" prop="password">
+            <el-input
+              show-password
+              :maxlength="20"
+              v-model="form.password"
+              placeholder="请输入登录密码"
+            />
+          </el-form-item>
+          <el-form-item label="个人简介:">
+            <el-input
+              :rows="4"
+              clearable
+              type="textarea"
+              :maxlength="200"
+              v-model="form.introduction"
+              placeholder="请输入个人简介"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template v-slot:footer>
+      <el-button @click="updateVisible(false)">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script>
+  import { emailReg, phoneReg } from 'ele-admin';
+  import RoleSelect from './role-select.vue';
+  import { addUser, updateUser, checkExistence } from '@/api/system/user';
+
+  export default {
+    components: { RoleSelect },
+    props: {
+      // 弹窗是否打开
+      visible: Boolean,
+      // 修改回显的数据
+      data: Object
+    },
+    data() {
+      const defaultForm = {
+        userId: null,
+        username: '',
+        nickname: '',
+        sex: null,
+        roleIds: [],
+        email: '',
+        phone: '',
+        birthday: '',
+        password: '',
+        introduction: ''
+      };
+      return {
+        defaultForm,
+        // 表单数据
+        form: { ...defaultForm },
+        // 表单验证规则
+        rules: {
+          username: [
+            {
+              required: true,
+              trigger: 'blur',
+              validator: (_rule, value, callback) => {
+                if (!value) {
+                  return callback(new Error('请输入用户账号'));
+                }
+                checkExistence('username', value, this.data?.username)
+                  .then(() => {
+                    callback(new Error('账号已经存在'));
+                  })
+                  .catch(() => {
+                    callback();
+                  });
+              }
+            }
+          ],
+          nickname: [
+            {
+              required: true,
+              message: '请输入用户名',
+              trigger: 'blur'
+            }
+          ],
+          sex: [
+            {
+              required: true,
+              message: '请选择性别',
+              trigger: 'blur'
+            }
+          ],
+          roleIds: [
+            {
+              required: true,
+              message: '请选择角色',
+              trigger: 'blur'
+            }
+          ],
+          email: [
+            {
+              pattern: emailReg,
+              message: '邮箱格式不正确',
+              trigger: 'blur'
+            }
+          ],
+          password: [
+            {
+              required: true,
+              pattern: /^[\S]{5,18}$/,
+              message: '密码必须为5-18位非空白字符',
+              trigger: 'blur'
+            }
+          ],
+          phone: [
+            {
+              pattern: phoneReg,
+              message: '手机号格式不正确',
+              trigger: 'blur'
+            }
+          ]
+        },
+        // 提交状态
+        loading: false,
+        // 是否是修改
+        isUpdate: false
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      /* 保存编辑 */
+      save() {
+        this.$refs.form.validate((valid) => {
+          if (!valid) {
+            return false;
+          }
+          this.loading = true;
+          const data = {
+            ...this.form,
+            roles: this.form.roleIds.map((d) => {
+              return { roleId: d };
+            })
+          };
+          const saveOrUpdate = this.isUpdate ? updateUser : addUser;
+          saveOrUpdate(data)
+            .then((msg) => {
+              this.loading = false;
+              this.$message.success(msg);
+              this.updateVisible(false);
+              this.$emit('done');
+            })
+            .catch((e) => {
+              this.loading = false;
+              this.$message.error(e.message);
+            });
+        });
+      },
+      /* 更新visible */
+      updateVisible(value) {
+        this.$emit('update:visible', value);
+      }
+    },
+    watch: {
+      visible(visible) {
+        if (visible) {
+          if (this.data) {
+            this.$util.assignObject(this.form, {
+              ...this.data,
+              roleIds: this.data.roles.map((d) => d.roleId),
+              password: ''
+            });
+            this.isUpdate = true;
+          } else {
+            this.isUpdate = false;
+          }
+        } else {
+          this.$refs.form.clearValidate();
+          this.form = { ...this.defaultForm };
+        }
+      }
+    }
+  };
+</script>

pingan/src/views/user/team/components/user-import.vue

@@ -0,0 +1,99 @@
+<!-- 用户导入弹窗 -->
+<template>
+  <ele-modal
+    width="520px"
+    title="导入用户"
+    :visible="visible"
+    @update:visible="updateVisible"
+  >
+    <el-upload
+      drag
+      action=""
+      class="ele-block"
+      v-loading="loading"
+      accept=".xls,.xlsx"
+      :show-file-list="false"
+      :before-upload="doUpload"
+    >
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">将文件拖到此处, 或 <em>点击上传</em></div>
+      <template v-slot:tip>
+        <div class="el-upload__tip ele-text-center">
+          <span>只能上传xls、xlsx文件, </span>
+          <el-link
+            download
+            :href="url"
+            type="primary"
+            :underline="false"
+            style="vertical-align: baseline"
+          >
+            下载模板
+          </el-link>
+        </div>
+      </template>
+    </el-upload>
+  </ele-modal>
+</template>
+
+<script>
+  import { importUsers } from '@/api/system/user';
+
+  export default {
+    props: {
+      // 是否打开弹窗
+      visible: Boolean
+    },
+    data() {
+      return {
+        // 导入请求状态
+        loading: false,
+        // 导入模板下载地址
+        url: 'https://cdn.eleadmin.com/20200610/用户导入模板.xlsx'
+      };
+    },
+    methods: {
+      /* 上传 */
+      doUpload(file) {
+        if (
+          ![
+            'application/vnd.ms-excel',
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+          ].includes(file.type)
+        ) {
+          this.$message.error('只能选择 excel 文件');
+          return false;
+        }
+        if (file.size / 1024 / 1024 > 10) {
+          this.$message.error('大小不能超过 10MB');
+          return false;
+        }
+        this.loading = true;
+        importUsers(file)
+          .then((msg) => {
+            this.loading = false;
+            this.$message.success(msg);
+            this.updateVisible(false);
+            this.$emit('done');
+          })
+          .catch((e) => {
+            this.loading = false;
+            this.$message.error(e.message);
+          });
+        return false;
+      },
+      /* 更新visible */
+      updateVisible(value) {
+        this.$emit('update:visible', value);
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .ele-block {
+    :deep(.el-upload),
+    :deep(.el-upload-dragger) {
+      width: 100%;
+    }
+  }
+</style>

pingan/src/views/user/team/components/user-search.vue

@@ -0,0 +1,80 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="77px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="团员:">
+          <el-input
+            clearable
+            v-model="where.keyword"
+            placeholder="请输入姓名或手机号"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="状态:">
+          <el-select
+            v-model="where.status"
+            placeholder="请选择"
+            clearable
+            class="ele-fluid"
+          >
+            <el-option label="正常" :value="1" />
+            <el-option label="禁用" :value="0" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <div class="ele-form-actions">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+          >
+            查询
+          </el-button>
+          <el-button @click="reset">重置</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+  export default {
+    data() {
+      // 默认表单数据
+      const defaultWhere = {
+        keyword: '',
+        status: ''
+      };
+      return {
+        // 表单数据
+        where: { ...defaultWhere }
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      /* 搜索 */
+      search() {
+        this.$emit('search', this.where);
+      },
+      /*  重置 */
+      reset() {
+        this.where = { ...this.defaultWhere };
+        this.search();
+      }
+    }
+  };
+</script>

pingan/src/views/user/team/index.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <!-- 搜索表单 -->
+      <user-search @search="reload" />
+      <!-- 数据表格 -->
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        :selection.sync="selection"
+        cache-key="systemUserTable"
+      >
+        <!-- 用户名列 -->
+        <template v-slot:username="{ row }">
+          <el-row>
+            <el-col :span="12" class="ele-text-center">
+              {{ row.username }}
+            </el-col>
+            <el-col :span="12" class="ele-text-center">
+              {{ row.mobile }}
+            </el-col>
+          </el-row>
+        </template>
+        <!-- 角色列 -->
+        <template v-slot:roles="{ row }">
+          <el-tag
+            v-for="item in row.roles"
+            :key="item.roleId"
+            size="mini"
+            type="primary"
+            :disable-transitions="true"
+          >
+            {{ item.roleName }}
+          </el-tag>
+        </template>
+        <!-- 状态列 -->
+        <template v-slot:status="{ row }">
+          <span v-if="row.status" class="ele-text-success">正常</span>
+          <span v-else class="ele-text-danger">禁用</span>
+        </template>
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-link type="primary" :underline="false" @click="openEdit(row)">
+            查看
+          </el-link>
+          <el-link type="primary" :underline="false"> 佣金明细 </el-link>
+        </template>
+      </ele-pro-table>
+    </el-card>
+    <!-- 编辑弹窗 -->
+    <user-edit :visible.sync="showEdit" :data="current" @done="reload" />
+    <!-- 导入弹窗 -->
+    <user-import :visible.sync="showImport" @done="reload" />
+  </div>
+</template>
+
+<script>
+  import UserSearch from './components/user-search.vue';
+  import UserEdit from './components/user-edit.vue';
+  import UserImport from './components/user-import.vue';
+  import { updateUserStatus } from '@/api/system/user';
+  import { pageTeam } from '@/api/user/team';
+
+  export default {
+    name: 'SystemUser',
+    components: {
+      UserSearch,
+      UserEdit,
+      UserImport
+    },
+    data() {
+      return {
+        // 表格列配置
+        columns: [
+          {
+            prop: 'id',
+            label: '编号',
+            minWidth: 50,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
+          {
+            prop: 'username',
+            label: '团员',
+            showOverflowTooltip: true,
+            slot: 'username',
+            align: 'center',
+            minWidth: 100
+          },
+          {
+            prop: 'cityName',
+            label: '所属区域',
+            showOverflowTooltip: true,
+            minWidth: 110,
+            align: 'center'
+          },
+          {
+            prop: 'sexName',
+            label: '归属板块',
+            showOverflowTooltip: true,
+            minWidth: 80,
+            align: 'center'
+          },
+          {
+            prop: 'status',
+            label: '状态',
+            align: 'center',
+            width: 100,
+            resizable: false,
+            slot: 'status',
+            showOverflowTooltip: true
+          },
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 220,
+            align: 'center',
+            resizable: false,
+            slot: 'action',
+            showOverflowTooltip: true
+          }
+        ],
+        // 表格选中数据
+        selection: [],
+        // 当前编辑数据
+        current: null,
+        // 是否显示编辑弹窗
+        showEdit: false,
+        // 是否显示导入弹窗
+        showImport: false
+      };
+    },
+    methods: {
+      /* 表格数据源 */
+      datasource({ page, limit, where, order }) {
+        return pageTeam({ ...where, ...order, page, limit });
+      },
+      /* 刷新表格 */
+      reload(where) {
+        this.$refs.table.reload({ page: 1, where: where });
+      },
+      /* 打开编辑弹窗 */
+      openEdit(row) {
+        this.current = row;
+        this.showEdit = true;
+      },
+      /* 更改状态 */
+      editStatus(row) {
+        const loading = this.$loading({ lock: true });
+        updateUserStatus(row.userId, row.status)
+          .then((msg) => {
+            loading.close();
+            this.$message.success(msg);
+          })
+          .catch((e) => {
+            loading.close();
+            row.status = !row.status ? 1 : 0;
+            this.$message.error(e.message);
+          });
+      }
+    }
+  };
+</script>