|
|
@@ -0,0 +1,252 @@
|
|
|
+<template>
|
|
|
+ <div >
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <el-form-item label="名片标题" prop="title">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.title"
|
|
|
+ placeholder="请输入名片标题"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="名片类型" prop="type">
|
|
|
+ <el-select filterable v-model="queryParams.type" placeholder="请选择类型" clearable size="small">
|
|
|
+ <el-option
|
|
|
+ v-for="item in typeOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- <el-form-item label="名片访问次数" prop="lookNum">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.lookNum"
|
|
|
+ placeholder="请输入名片访问次数"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="名片访问人数" prop="personNum">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.personNum"
|
|
|
+ placeholder="请输入名片访问人数"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item> -->
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ <el-button icon="el-icon-add" size="mini" @click="addCard">添加名片</el-button>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- <div class="tags">
|
|
|
+ <el-tag closable @close="delCard(index)" style="margin-bottom:5px;" v-for="(item,index) in cards" >{{item.title}}</el-tag>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <el-table ref="multipleTable" v-loading="loading" :data="cardList">
|
|
|
+ <!-- <el-table-column type="selection" width="50" align="center" /> -->
|
|
|
+ <el-table-column width="55" label="Id" align="center" prop="id" />
|
|
|
+ <el-table-column width="60" label="用户ID" align="center" prop="userId" />
|
|
|
+ <el-table-column label="名片标题" align="center" prop="title" />
|
|
|
+ <el-table-column label="名片图片" align="center" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-popover
|
|
|
+ placement="right"
|
|
|
+ title=""
|
|
|
+ trigger="hover">
|
|
|
+ <img slot="reference" :src="scope.row.imageUrl" width="100">
|
|
|
+ <img :src="scope.row.imageUrl" style="max-width: 150px;">
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="名片短链接" width="100" align="center" prop="shortUrl" />
|
|
|
+
|
|
|
+ <el-table-column label="创建时间" width="100" align="center" prop="createTime" />
|
|
|
+
|
|
|
+ <el-table-column label="名片类型" align="center" prop="type">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag prop="type" v-for="(item, index) in typeOptions" v-if="scope.row.type==item.dictValue">{{item.dictLabel}}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="操作" align="center" fixed="right" width="120px" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ @click="handleSelect(scope.row)"
|
|
|
+ >选择</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" />
|
|
|
+
|
|
|
+ <div class="btns">
|
|
|
+ <el-button type="primary" @click="submit" >确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+import { listCard, getCard, delCard } from "@/api/company/companyUserCard";
|
|
|
+export default {
|
|
|
+ name: "User",
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ selectCard:[],
|
|
|
+ cards:[],
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 用户表格数据
|
|
|
+ cardList: [],
|
|
|
+ // 部门树选项
|
|
|
+ deptOptions: undefined,
|
|
|
+ // 部门名称
|
|
|
+ deptName: undefined,
|
|
|
+ // 日期范围
|
|
|
+ dateRange: [],
|
|
|
+ typeOptions:[],
|
|
|
+ defaultProps: {
|
|
|
+ children: "children",
|
|
|
+ label: "label",
|
|
|
+ },
|
|
|
+ hasClickClose:false,
|
|
|
+ // 用户导入参数
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ title: null,
|
|
|
+ userId: null,
|
|
|
+ urlScheme: null,
|
|
|
+ companyId: null,
|
|
|
+ imageUrl: null,
|
|
|
+ type: null,
|
|
|
+ shortUrl: null,
|
|
|
+ isVisit: null,
|
|
|
+ lookNum: null,
|
|
|
+ personNum: null,
|
|
|
+ ipNum: null,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // 根据名称筛选部门树
|
|
|
+ deptName(val) {
|
|
|
+ this.$refs.tree.filter(val);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getDicts("company_user_card_type").then((response) => {
|
|
|
+ this.typeOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ submit(){
|
|
|
+ //this.addCard();
|
|
|
+ this.$emit('selectCard',this.cards);
|
|
|
+ },
|
|
|
+ itemChcek(){
|
|
|
+ let that=this;
|
|
|
+ setTimeout(() => {
|
|
|
+ var userIds=[];
|
|
|
+ for (let index = 0; index < this.users.length; index++) {
|
|
|
+ const user = this.users[index];
|
|
|
+ userIds.push(user.userId);
|
|
|
+ }
|
|
|
+ that.userList.forEach(row => {
|
|
|
+ if(userIds.indexOf(row.userId)!=-1){
|
|
|
+ that.$refs.multipleTable.toggleRowSelection(row, true);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ }, 0);
|
|
|
+ },
|
|
|
+ /** 查询用户列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ listCard(this.queryParams).then(response => {
|
|
|
+ this.cardList = response.rows;
|
|
|
+ this.total = response.total;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.page = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.dateRange = [];
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ // 多选框选中数据
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.selectCard=selection;
|
|
|
+ this.ids = selection.map((item) => item.userId);
|
|
|
+ },
|
|
|
+ handleSelect(row) {
|
|
|
+ var ids=[];
|
|
|
+ ids.push(row.cardId);
|
|
|
+ this.ids=ids;
|
|
|
+
|
|
|
+ var cards=[];
|
|
|
+ this.selectCard=row;
|
|
|
+ cards.push(row);
|
|
|
+ this.cards=cards;
|
|
|
+ this.$emit('selectCard',this.cards);
|
|
|
+ },
|
|
|
+ addCard(){
|
|
|
+ var that=this;
|
|
|
+ this.selectCard.forEach(element => {
|
|
|
+ var flag= that.cards.some(item => item.cardId === element.cardId)
|
|
|
+ if(!flag){
|
|
|
+ this.cards.push(element);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //this.users=this.users.concat(this.selectCard);
|
|
|
+ },
|
|
|
+ delCard(index){
|
|
|
+ this.cards.splice(index,1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style >
|
|
|
+
|
|
|
+.btns{
|
|
|
+ padding-top: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+</style>
|
wansfa