Skip to content

H
haoban-3
Commit d5cd15d8 by crushh
Options

Merge branch 'feature/act-code' into dev

parents ee12510f 0299fc03
Showing with 88 additions and 85 deletions
src/views/salesleads/actCodeManage/components/select-clerk/select-clerk.vue
<template>
<el-dialog :visible.sync="show" v-if="show" title="选择成员" width="1030px" append-to-body @close="onCancel">
<div class="select-clerk" v-loading="loading">
<!-- 选择导购 -->
<div class="clerk-list">
<!-- 筛选条件 -->
<div class="search-bar">
<!-- <el-select clearable style="width: 182px"></el-select> -->
<gic-select-group class="select-group" :brandId="enterpriseId" :selectData="params.storeGroup" @checkGroupIds="onCheckGroupIds"> </gic-select-group>
<el-input v-model="params.storeSearchParams" @change="onSearch" placeholder="请输入门店名称/code" prefix-icon="el-icon-search" clearable style="margin-left: 10px; width: 210px"></el-input>
<el-input v-model="params.clerkSearchParams" @change="onSearch" placeholder="请输入导购名称/手机号/code" prefix-icon="el-icon-search" clearable style="margin-left: 10px; width: 250px"></el-input>
</div>
<!-- 导购列表的表头 -->
<el-table :class="['clerk-list-header', { 'hide-empty': storeClerkList.length > 0 }]">
<el-table-column min-width="67px">
<template #header>
<el-checkbox v-if="multiple" v-model="selectAll.selected" @change="onSelectAll" :indeterminate="selectAll.indeterminate" :disabled="selectAll.disabled"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="导购" min-width="230px"></el-table-column>
<el-table-column label="手机号码" min-width="155px"></el-table-column>
<el-table-column label="备注" min-width="161px"></el-table-column>
</el-table>
<!-- 导购列表 -->
<div v-if="storeClerkList.length > 0" ref="clerkList" class="clerk-list-body">
<div v-for="(el, index) in storeClerkList" :key="el.storeId" class="clerk-list-cell">
<!-- 门店信息 -->
<el-table :data="[{}]" class="clerk-store-info" :show-header="false">
<el-table-column min-width="67px">
<el-checkbox v-if="multiple" v-model="el.selected" @change="onSelectStore(el)" :indeterminate="el.indeterminate" :disabled="el.disabled"></el-checkbox>
</el-table-column>
<el-table-column min-width="546px">
<div class="clerk-store-name">{{ el.storeName }}</div>
<div class="clerk-store-code">code：{{ el.storeCode }}</div>
</el-table-column>
</el-table>
<!-- 门店下的导购 -->
<el-table :data="el.clerkList" class="clerk-list-table" :show-header="false">
<el-table-column min-width="67px">
<template slot-scope="{ row }">
<el-checkbox v-if="multiple" v-model="row.selected" @change="onSelectClerk(row, index)" :disabled="row.disabled"></el-checkbox>
<!-- 为了实现单选框选中状态时再次点击能切换到未选中状态，所以使用一个复选框盖在单选框上 -->
<div v-else class="radio-wrapper">
<el-checkbox class="radio-handler" v-if="!row.disabled" v-model="row.selected" @change="onSelectClerk(row, index)"></el-checkbox>
<el-radio class="radio-content" :value="row.selected" :label="true" :disabled="row.disabled"></el-radio>
</div>
</template>
</el-table-column>
<el-table-column label="导购" min-width="230px">
<template slot-scope="{ row }">
<div class="clerk-name">{{ row.clerkName }}</div>
<div class="clerk-code">code：{{ row.clerkCode }}</div>
</template>
</el-table-column>
<el-table-column label="手机号码" prop="phoneNumber" min-width="155px"></el-table-column>
<el-table-column label="备注" min-width="161px">
<div slot-scope="{ row }">{{ formatRemark(row.hmStatus) }}</div>
</el-table-column>
</el-table>
<div>
<el-dialog :visible="visible" v-if="visible" title="选择成员" width="1030px" append-to-body @close="onCancel">
<div class="select-clerk" v-loading="loading">
<!-- 选择导购 -->
<div class="clerk-list">
<!-- 筛选条件 -->
<div class="search-bar">
<!-- <el-select clearable style="width: 182px"></el-select> -->
<gic-select-group class="select-group" :brandId="enterpriseId" :selectData="params.storeGroup" @checkGroupIds="onCheckGroupIds"> </gic-select-group>
<el-input v-model="params.storeSearchParams" @change="onSearch" placeholder="请输入门店名称/code" prefix-icon="el-icon-search" clearable style="margin-left: 10px; width: 210px"></el-input>
<el-input v-model="params.clerkSearchParams" @change="onSearch" placeholder="请输入导购名称/手机号/code" prefix-icon="el-icon-search" clearable style="margin-left: 10px; width: 250px"></el-input>
</div>
</div>
<el-pagination v-if="params.total > 0" @current-change="onCurrentChange" :total="params.total" :page-size="params.pageSize" :current-page="params.pageNum" layout="prev, pager, next" style="margin-bottom: 0;text-align: right"></el-pagination>
</div>
<!-- 选中的导购 -->
<div class="selected-clerk">
<div class="selected-clerk-title">
<span>{{ `已选导购（${selected.length}）` }}</span>
<el-button v-if="multiple" type="text" @click="onDelAll">全部清除</el-button>
</div>
<!-- 选中的导购列表 -->
<div class="selected-clerk-list">
<div v-for="(el, index) in selected" :key="el.clerkId" class="clerk-item">
<div class="clerk-info">
<div class="clerk-name">{{ el.clerkName }}</div>
<div class="clerk-code">code：{{ el.clerkCode }}</div>
<!-- 导购列表的表头 -->
<el-table :class="['clerk-list-header', { 'hide-empty': storeClerkList.length > 0 }]">
<el-table-column min-width="67px">
<template #header>
<el-checkbox v-if="multiple" v-model="selectAll.selected" @change="onSelectAll" :indeterminate="selectAll.indeterminate" :disabled="selectAll.disabled"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="导购" min-width="230px"></el-table-column>
<el-table-column label="手机号码" min-width="155px"></el-table-column>
<el-table-column label="备注" min-width="161px"></el-table-column>
</el-table>
<!-- 导购列表 -->
<div v-if="storeClerkList.length > 0" ref="clerkList" class="clerk-list-body">
<div v-for="(el, index) in storeClerkList" :key="el.storeId" class="clerk-list-cell">
<!-- 门店信息 -->
<el-table :data="[{}]" class="clerk-store-info" :show-header="false">
<el-table-column min-width="67px">
<el-checkbox v-if="multiple" v-model="el.selected" @change="onSelectStore(el)" :indeterminate="el.indeterminate" :disabled="el.disabled"></el-checkbox>
</el-table-column>
<el-table-column min-width="546px">
<div class="clerk-store-name">{{ el.storeName }}</div>
<div class="clerk-store-code">code：{{ el.storeCode }}</div>
</el-table-column>
</el-table>
<!-- 门店下的导购 -->
<el-table :data="el.clerkList" class="clerk-list-table" :show-header="false">
<el-table-column min-width="67px">
<template slot-scope="{ row }">
<el-checkbox v-if="multiple" v-model="row.selected" @change="onSelectClerk(row, index)" :disabled="row.disabled"></el-checkbox>
<!-- 为了实现单选框选中状态时再次点击能切换到未选中状态，所以使用一个复选框盖在单选框上 -->
<div v-else class="radio-wrapper">
<el-checkbox class="radio-handler" v-if="!row.disabled" v-model="row.selected" @change="onSelectClerk(row, index)"></el-checkbox>
<el-radio class="radio-content" :value="row.selected" :label="true" :disabled="row.disabled"></el-radio>
</div>
</template>
</el-table-column>
<el-table-column label="导购" min-width="230px">
<template slot-scope="{ row }">
<div class="clerk-name">{{ row.clerkName }}</div>
<div class="clerk-code">code：{{ row.clerkCode }}</div>
</template>
</el-table-column>
<el-table-column label="手机号码" prop="phoneNumber" min-width="155px"></el-table-column>
<el-table-column label="备注" min-width="161px">
<div slot-scope="{ row }">{{ formatRemark(row.hmStatus) }}</div>
</el-table-column>
</el-table>
</div>
<div class="del-btn" @click="onDel(index)">
<i class="iconfont-hb3 iconclose1 del-btn-icon"></i>
</div>
<el-pagination v-if="params.total > 0" @current-change="onCurrentChange" :total="params.total" :page-size="params.pageSize" :current-page="params.pageNum" layout="prev, pager, next" style="margin-bottom: 0;text-align: right"></el-pagination>
</div>
<!-- 选中的导购 -->
<div class="selected-clerk">
<div class="selected-clerk-title">
<span>{{ `已选导购（${selected.length}）` }}</span>
<el-button v-if="multiple" type="text" @click="onDelAll">全部清除</el-button>
</div>
<!-- 选中的导购列表 -->
<div class="selected-clerk-list">
<div v-for="(el, index) in selected" :key="el.clerkId" class="clerk-item">
<div class="clerk-info">
<div class="clerk-name">{{ el.clerkName }}</div>
<div class="clerk-code">code：{{ el.clerkCode }}</div>
</div>
<div class="del-btn" @click="onDel(index)">
<i class="iconfont-hb3 iconclose1 del-btn-icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<template slot="footer">
<el-button @click="show = false">取消</el-button>
<el-button type="primary" @click="onSave">确定</el-button>
</template>
</el-dialog>
<template slot="footer">
<el-button @click="onCancel">取消</el-button>
<el-button type="primary" @click="onSave">确定</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
......@@ -95,7 +97,10 @@ export default {
name: 'SelectClerk',
components: { GicSelectGroup },
props: {
visible: Boolean,
visible: {
type: Boolean,
default: false
},
data: {
type: Array,
default: () => []
......@@ -118,7 +123,6 @@ export default {
watch: {
visible(flag) {
if (flag) {
this.show = true;
this.selected = JSON.parse(JSON.stringify(this.data));
this.getStoreClerkList();
}
......@@ -126,7 +130,6 @@ export default {
},
data() {
return {
show: false,
params: {
storeGroup: [],
storeGroupId: '', // 分组ID
......@@ -356,7 +359,7 @@ export default {
},
onSave() {
this.$emit('save', JSON.parse(JSON.stringify(this.selected)));
this.show = false;
this.$emit('update:visible', false);
}
}
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment