Skip to content

V
vue-gic-people
Commit 02a6cb05 by 无尘
Options

add people plugin

parent 955251f7
Showing with 3019 additions and 2 deletions
.babelrc 0 → 100644
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
.editorconfig 0 → 100644
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
.gitignore 0 → 100644
.DS_Store
node_modules/
npm-debug.log
yarn-error.log
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
\ No newline at end of file
README.md
vue-gic-people
\ No newline at end of file
# vue 插件—-人群筛选器
>>> HEAD
> A Vue.js filter people Plugin
## Install
```shell
npm install @gic-test/vue-gic-people -S
```
## how to use
```
// main.js
import vueGicPeople from '@gic-test/vue-gic-people'
Vue.use(vueGicPeople)
// 使用页面
<vue-gic-people :projectName="projectName" :useId="useId" :hasSearchData="hasSearchData" :sceneValue="sceneValue" ref="peopleFilter" @findFilter="findFilter" @getBackData="getBackData" @editHide= "editHide" @editShow="editShow" @hideBtn="hideBtn"></vue-gic-people>
// 按钮根据当前使用场景设置,有的无保存
<div v-if="toggleTag">
<button @click="getData">确定</button>
<button @click="cancelFilter">取消</button>
</div>
<div v-if="saveTag">
<button @click="saveTempData">保存</button>
</div>
data() {
return {
// 可传参数
projectName: '', // 当前项目名
sceneValue: 'member', // 场景值
useId: '', // 模板id
hasSearchData: '' , // 当前页回显的数据(接口返回)
toggleTag: false, // 控制(确认取消)按钮显示的参数,仅供参考,可自行修改
saveTag: false, // 控制(保存)按钮显示的参数,仅供参考,可自行修改
}
},
beforeMount() {
// (如果需要传递数据)请求的数据最好在这里写
},
methods: {
// 父组件调用子组件方法,触发父组件事件
getData() {
var that = this
that.$refs.peopleFilter.confirmSet()
},
// 子组件触发父组件事件,返回过滤条件数据
findFilter(value){
var that = this
console.log(value)
},
// 取消
cancelFilter(){
var that = this
that.$refs.peopleFilter.cancelSet()
},
// 获取需要回显的数据, 供保存时候使用
getBackData(val) {
var that = this
console.log(val)
that.getSaveData = val;
},
// 显示编辑,保存按钮隐藏,确认按钮显示 (子组件会调用)
editShow() {
var that = this
console.log('editShow')
that.toggleTag= true
that.saveTag = false
},
// 显示保存按钮,隐藏确认按钮显示 (子组件会调用)
editHide() {
var that = this
console.log('editHide')
that.toggleTag = false
that.saveTag = true
},
// 隐藏保存按钮和确认按钮 (子组件会调用)
hideBtn() {
var that = this
that.toggleTag= false;
that.saveTag = false
},
// 保存当前模板,对接保存接口
saveTempData() {
var that = this
console.log('save')
}
}
```
dist/vue-gic-people.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/vue-gic-people.js.map 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>vue-gic-people</title>
</head>
<body>
<div id="app"></div>
<!-- <script src="/dist/build.js"></script> -->
<script src="/dist/vue-gic-people.js"></script>
</body>
</html>
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "@gic-test/vue-gic-people",
"description": "vue-gic-people Plugin",
"author": "fairyly <498745097@qq.com>",
"version": "1.1.40",
"license": "MIT",
"private": false,
"main": "dist/vue-gic-people.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"@riophae/vue-treeselect": "0.0.35",
"axios": "^0.18.0",
"localforage": "^1.7.2",
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"less-loader": "^4.1.0",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.1"
}
}
src/App.vue 0 → 100644
<template>
<div id="app">
<vue-gic-people :projectName="projectName" :useId="useId" :hasSearchData="hasSearchData" :sceneValue="sceneValue" ref="peopleFilter" @findFilter="findFilter" @getBackData="getBackData" @editHide= "editHide" @editShow="editShow" @hideBtn="hideBtn"></vue-gic-people>
<!-- // 按钮根据当前使用场景设置,有的无保存 -->
<div v-if="toggleTag">
<button @click="getData">确定</button>
<button @click="cancelFilter">取消</button>
</div>
<div v-else>
<button @click="saveTempData">保存</button>
</div>
</div>
</template>
<script>
import vueGicPeople from './lib/vue-gic-people'
export default {
name: 'app',
data () {
return {
projectName: '', // 当前项目名
sceneValue: 'member', // 场景值
useId: '', // 模板id
hasSearchData: '' , // 当前页回显的数据(接口返回)
toggleTag: true, // 控制(确认取消)按钮显示的参数,仅供参考,可自行修改
saveTag: false, // 控制(保存)按钮显示的参数,仅供参考,可自行修改
}
},
components: {
vueGicPeople
},
methods: {
// 父组件调用子组件方法,触发父组件事件
getData() {
var that = this
that.$refs.peopleFilter.confirmSet()
},
// 子组件触发父组件事件,返回过滤条件数据
findFilter(value){
var that = this
console.log(value)
},
// 取消
cancelFilter(){
that.$refs.peopleFilter.cancelSet()
},
// 获取需要回显的数据, 供保存时候使用
getBackData(val) {
var that = this
console.log(val)
that.getSaveData = val;
},
// 显示编辑,保存按钮隐藏,确认按钮显示 (子组件会调用)
editShow() {
var that = this
console.log('editShow')
that.toggleTag= true
that.saveTag = false
},
// 显示保存按钮,隐藏确认按钮显示 (子组件会调用)
editHide() {
var that = this
console.log('editHide')
that.toggleTag = false
that.saveTag = true
},
// 隐藏保存按钮和确认按钮 (子组件会调用)
hideBtn() {
var that = this
console.log('hideBtn')
that.toggleTag= false;
that.saveTag = false
},
// 保存当前模板,对接保存接口
saveTempData() {
var that = this
console.log('save')
}
},
beforeMount() {
// (如果需要传递数据)请求的数据最好在这里写
},
}
</script>
<style lang="scss">
* {
margin: 0;
padding: 0;
}
</style>
src/lib/index.js 0 → 100644
import vueGicPeople from './vue-gic-people.vue' // 导入组件
const GicPeople = {
install(Vue, options) {
Vue.component(vueGicPeople.name, vueGicPeople) // vueGicPeople.name 组件的name属性
// 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已
// Vue.prototype.$xxx // 最终可以在任何地方通过 this.$xxx 调用
// 虽然没有明确规定用$开头 但是大家都默认遵守这个规定
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(GicPeople);
}
export default GicPeople
// export {
// vueGicPeople
// }
src/lib/vue-area-ab.vue 0 → 100644
<template>
<div class="pay-box">
<!-- -->
<div class="pay-wrapper">
<div class="pay-container" >
<!-- <el-cascader
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader> -->
<div class="area-wrap">
<el-select class="w-160" no-data-text=" " v-model="ruleForm.provience" placeholder="请选择省份" @focus="getPro" @change="selectPro">
<el-option
v-for="item in optionsPro"
:key="item.provinceId"
:label="item.provinceName"
:value="item.provinceId">
</el-option>
</el-select>
<el-select class="w-160" no-data-text=" " v-model="ruleForm.city" placeholder="请选择城市" @focus="getCity" @change="selectCity">
<el-option
v-for="item in optionsCity"
:key="item.cityId"
:label="item.cityName"
:value="item.cityId">
</el-option>
</el-select>
<el-select class="w-160" no-data-text=" " v-model="ruleForm.country" placeholder="请选择区县" @focus="getCountry" @change="selectCountry">
<el-option
v-for="item in optionsRegion"
:key="item.countyId"
:label="item.countyName"
:value="item.countyId">
</el-option>
</el-select>
</div>
</div>
</div>
</div>
</template>
<script>
// import { getRequest } from './api';
import qs from 'qs';
export default {
name: 'vue-area-ab',
props: ['areaOptions','projectName','index','indexKey','ind'],
data () {
return {
repProjectName: 'gic-web', // 项目名
// 省市区
ruleForm: {
provience: '',
provinceName: '',
city: '',
cityName: '',
countryName: '',
country: '',
areaId: ''// 选择的区 id
},
// 省
optionsPro: [
],
// 市
optionsCity: [
],
// 区/县
optionsRegion: [
],
provinceId: '',
cityId: '',
countyId: '',
// 区域
typeId: 1, // 1:省 2:市 3:区(县)
getProId: '', // 选择的省 id
getCityId: '',// 选择的城市 id
// 登录信息
loginInnfo: {
loginName: 'damogic',
password: 1
},
// 获取 location origin
baseUrl: '',
}
},
beforeMount() {
var that = this
var host = window.location.origin;
console.log("当前host:",host)
if (host.indexOf('localhost') != '-1') {
that.baseUrl = 'http://gicdev.demogic.com';
}else {
that.baseUrl = host
}
},
methods: {
handleChange(value) {
console.log(value);
//选择完毕后将值传递给父组件
this.$emit('selected', value)
},
// 点击省
getPro: function() {
var that = this
if (that.optionsPro.length) {
return;
}
that.typeId = 1
// that.getAreaId = 0 // 选择的省份id
// that.areaFlag = true;
that.getArea(0)
},
// 点击市
getCity: function(e) {
var that = this
console.log(e)
// if (that.optionsCity.length) {
// return;
// }
that.typeId = 2
console.log("that.getProId:",that.getProId)
if (!that.getProId) {
that.$message.error({
duration: 1000,
message: '请先选择省'
})
return;
}
that.getArea(that.getProId)
},
// 点击县区
getCountry: function() {
var that = this
that.typeId = 3
if (that.getCityId == '') {
// showMsg.showmsg('请先选择省市','warning')
that.$message.error({
duration: 1000,
message: '请先选择省市'
})
return;
}
console.log("that.getCityId前:",that.getCityId)
that.getArea(that.getCityId)
},
// 选择省
selectPro: function(e) {
var that = this
console.log(e)
console.log(that.ruleForm.provience)
that.getProId = e;
that.getCityId = ''
// that.getArea()
that.ruleForm.city = ''
that.ruleForm.country = ''
// 打印
console.log(that.optionsPro)
that.optionsPro.forEach(function(item,index){
if (e == item.provinceId) {
that.ruleForm.provinceName = item.provinceName
}
})
// console.log("省名字:",that.ruleForm.provinceName)
that.$emit('selected', that.ruleForm)
},
// 选择市
selectCity: function(e) {
var that = this
console.log(e)
that.getCityId = e;
that.ruleForm.country = ''
console.log(that.optionsCity)
that.optionsCity.forEach(function(item,index){
if (e == item.cityId) {
that.ruleForm.cityName = item.cityName
}
})
// console.log(that.ruleForm.cityName)
that.$emit('selected', that.ruleForm)
},
// 选择县区
selectCountry: function(e) {
var that = this
console.log(e)
that.areaId = e
that.ruleForm.areaId = e
console.log(that.optionsRegion)
that.optionsRegion.forEach(function(item,index){
if (e == item.countyId) {
that.ruleForm.countryName = item.countyName
}
})
that.ruleForm.index = that.index
that.ruleForm.indexKey = that.indexKey
that.ruleForm.ind = that.ind
console.log(that.ruleForm)
that.$emit('selected', that.ruleForm)
},
// 获取区域
getArea: function(areaId) {
var that = this
console.log(areaId)
var para = {
requestProject: that.repProjectName
};
if (areaId == 0) {
para.type = that.typeId;
}
if (areaId != 0) {
para.type = that.typeId;
para.id = areaId;
}
that.optionsCity = [];
that.optionsRegion = [];
that.axios.post(that.baseUrl+'/api-admin/dict-district-list',qs.stringify(para)).then((res) => {
console.log(res,res.data,res.data.errorCode)
var resList = '';
resList = res.data;
if (resList.errorCode == 0) {
// 如果是省
if (that.typeId == 1) {
that.optionsPro = [];
for (var i in resList.result) {
if (i == '710000'|| i == '810000' || i =='820000') {return;}
that.optionsPro.push(resList.result[i])
}
console.log("省:",that.optionsPro)
}
// 如果是市
if (that.typeId == 2) {
for (var i in resList.result) {
delete resList.result[i].provinceId
that.optionsCity.push(resList.result[i])
}
console.log("市:",that.optionsCity)
}
// 如果是区
if (that.typeId == 3) {
for (var i in resList.result) {
delete resList.result[i].provinceId;
delete resList.result[i].cityId;
that.optionsRegion.push(resList.result[i])
}
console.log("区:",that.optionsRegion)
}
return false;
}
// 如果出错
// errMsg.errorMsg(res.data.response)
// 去登陆
// that.toLogin();
that.$message.error({
duration: 1000,
message: res.data.errorMessage
})
}).catch(function (error) {
console.log(error);
// if (error.success == false) {
// that.getArea();
// 如果出错需要登录
// that.toLogin()
that.$message.error({
duration: 1000,
message: res.data.errorMessage
})
// }
});
},
toLogin() {
var that = this;
that.axios.post(that.baseUrl+'/api-auth/doLogin',qs.stringify(that.loginInnfo)).then((res) => {
console.log(res)
var resLogin = res.data
if (resLogin.errorCode == 0) {
that.getArea();
}
}).catch(function (error) {
console.log(error);
that.$message.error({
duration: 1000,
message: error.errorMessage
})
});
},
setNewData(optionData) {
var that = this;
that.ruleForm.provience = optionData.provinceName;
that.ruleForm.city = optionData.cityName;
that.ruleForm.country = optionData.countryName;
that.ruleForm.provinceName = optionData.provinceName;
that.ruleForm.cityName = optionData.cityName;
that.ruleForm.countryName = optionData.countryName;
that.ruleForm.areaId = optionData.countyId;
that.getProId = optionData.provinceId;
that.getCityId = optionData.cityId;
console.log("that.ruleForm:",that.ruleForm)
},
},
watch: {
areaOptions: function(newData,oldData){
var that = this;
console.log("areaOptions:",newData,oldData)
that.setNewData(newData)
},
projectName: function(newData,oldData){
var that = this;
// console.log("新数据:",newData,oldData)
that.repProjectName = newData || 'gic-web';
},
},
/* 接收数据 */
mounted(){
console.log("传递的参数对象:",this.areaOptions,this.index,this.indexKey,this.ind)
var that = this;
// 项目名
that.repProjectName = that.projectName || 'gic-web';
that.setNewData(that.areaOptions)
},
}
</script>
<style>
.gray-wrapper {
position: relative;
}
.pay-wrapper {
position: relative;
bottom: 0px;
height: 40px;
}
.w-160 {
width: 160px;
}
.w-160+.w-160 {
margin-left: 3px;
}
</style>
src/lib/vue-gic-people.vue 0 → 100644
<template>
<div class="people-content">
<!-- 选择模板 -->
<div class="people-temp-head">
<!-- <div class="temp-wrap">
<label class="member-templates-title">人群模板</label>
<el-select v-model="tempValue" class="temp-select" placeholder="请选择" @change="tempChangeList">
<el-option
v-for="item in tempOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div> -->
<!-- 模板内容 -->
<div class="condition-detail-contain" v-if="conditionDetailShow">
<div class="screening-condition">
<div class="detail" id="detail-tempcondition">
<!-- (<span class="bg_blue"><b>活跃于</b>最近30天</span>
<span class="word">或者</span>
<span class="bg_blue"><b>活跃于</b>最近30天</span>
<span class="word">或者</span>
<span class="bg_blue"><b>活跃于</b>最近30天</span>
<span class="word">或者</span>
<span class="bg_yellow">在新增后3天内<b>页面点击</b>次数&gt;=1</span>)
<span class="word">且</span> (
<span class="bg_blue"><b>活跃于</b>2017-12-07到2017-12-13</span>
<span class="word">或者</span>
<span class="bg_blue"><b>新增于</b>最近30天</span>
<span class="word">或者</span>
<span class="bg_blue"><b>活跃于</b>最近30天</span>) -->
{{templateData}}
</div>
<span class="el-icon-edit btn-edit-group" id="btn-edit-group-tempcondition" title="编辑用户群" @click="editTemp" style="display: inline-block;"></span>
<span class="el-icon-delete btn-cancel-group" id="btn-cancel-group-tempcondition" title="重置条件" @click="resetTemp"></span>
</div>
<!-- <div class="button-group marginLeft134 button-group-save" id="save-tempcondition">
<button class="gic-btn gic-btn-preserve gic-btn-save" @click="saveTemp">保存</button>
</div> -->
</div>
<!-- end -->
<!-- 筛选条件 -->
<div class="filter-condition-wrap">
<div class="filter-content" v-if="conditionsShow">
<p class="member-templates-condition-title">筛选条件</p>
<div class="filter-group marginLeft134">
<!-- 增加内容部分 -->
<div id="app1" class="rations">
<!-- 循环几行(并且)-->
<div class="condition-cell" v-for="(item, index) in conditionsList" v-if="item.children.length>0">
<div class="andlabels labelsbg_white" data-ration-id="index" v-if="index!=0">并且</div>
<div class="filter-box inline-block ration" data-ration-id="index" >
<!-- 循环几行(或者) -->
<div class="group_combo" data-group-id="1" v-for="(cellItem, key) in item.children">
<div class="orlabels" v-if="key!=0">或者</div>
<!-- type="belong" -->
<div class="filter-message groupbox">
<span class="el-icon-close filter-guanbi" @click="deleteCell(index,key)"></span>
<p class="fliter-message-title inline-block">{{cellItem.chainNodeName}}</p>
<!-- 一行循环了几个 -->
<template v-for="(childCell,ind) in cellItem.children">
<!-- 下拉单选 -->
<div class="gic-select-wrap inline-block" v-if="childCell.templateCode == 'com001'">
<div class="gic-select">
<el-select v-model="childCell.levelModel" class="temp-select" placeholder="请选择" @focus="selectFocus(index,key,ind)" @change="tempChange(index,key,ind)">
<el-option
v-for="item in childCell.levelOptions"
:label="item.value"
:value="item.key"><!-- :key="item.key" -->
</el-option>
</el-select>
</div>
</div>
<!-- 下拉多选 最后控件-->
<div class="gic-select-wrap inline-block" v-if="childCell.templateCode == 'com002'">
<el-select v-model="childCell.levelModel" multiple class="temp-select" v-if="" @focus="selectFocus(index,key,ind)" placeholder="请选择" @change="tempChangeMultip($event,index,key,ind)">
<el-option
v-for="item in childCell.levelOptions"
:label="item.value"
:value="item.key">
</el-option>
</el-select>
</div>
<!-- 单选+输入框 -->
<!-- <div class="gic-select-wrap inline-block" v-if="childCell.templateCode == 'com003'">
<el-select v-model="childCell.levelModel" class="temp-select" @focus="selectFocus(index,key,ind)" placeholder="请选择" @change="tempChange(index,key,ind)">
<el-option
v-for="item in childCell.levelOptions"
:key="item.key"
:label="item.value"
:value="item.key">
</el-option>
</el-select>
</div> -->
<!-- 加输入框 最后控件-->
<div class="gic-select-wrap inline-block" v-if="childCell.templateCode == 'com003'">
<el-input v-model="childCell.levelModel" class="select-wrap-input" placeholder="请输入" @focus="selectFocus(index,key,ind)" @keyup.native="(value) => toInput(value)"></el-input><label></label>
</div>
<!-- 加区间输入框 最后控件-->
<div class="gic-select-wrap inline-block" v-if="childCell.templateCode == 'com013'">
<el-input v-model="childCell.levelModel[0]" class="select-wrap-input" style="margin-right: 0;" placeholder="请输入" @blur="blurFrom" @focus="selectFocus(index,key,ind)" ></el-input><!-- @keyup.native="(value) => toInputFrom(value)" -->
<label> - </label>
<el-input v-model="childCell.levelModel[1]" class="select-wrap-input" style="margin-right: 0;" placeholder="请输入" @blur="blurTo" @focus="selectFocus(index,key,ind)" ></el-input><!-- @keyup.native="(value) => toInputTo(value)" -->
</div>
<!-- 下拉树形结构 最后控件-->
<div class="gic-select-wrap inline-block" v-if="childCell.templateCode == 'com004'">
<treeselect v-model="childCell.levelModel" :multiple="true" placeholder="请选择" :options="childCell.levelOptions" noOptionsText="暂无数据" noResultsText="无数据" noChildrenText="无数据" :normalizer="normalizer" :value-consists-of="valueConsistsOf" :searchable="false" :clearable="false" @open="selectFocus(index,key,ind)" @select="selectTree($event,index,key,ind)" @deselect="deSelectTree($event,index,key,ind)"/><!-- :normalizer="normalizer" -->
</div>
<!-- 搜索后出现下列 最后控件-->
<div class="gic-select-wrap inline-block" v-if="childCell.templateCode == 'com005'">
<el-select
v-model="childCell.levelModel"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
@focus="selectFocus(index,key,ind)"
@change="changeRemote($event,index,key,ind)"
>
<el-option
v-for="item in childCell.levelOptions"
:key="item.key"
:label="item.value"
:value="item.key">
</el-option><!-- :key="item.key" -->
</el-select>
</div>
<!-- 时间区间年月日-年月日 最后控件-->
<div class="gic-select-wrap inline-block" v-if="childCell.templateCode == 'com006'">
<el-date-picker
v-model="childCell.levelModel"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyyMMdd"
value-format="yyyyMMdd"
:default-time="['000000', '235959']"
:picker-options="pickerOptions"
@focus="selectFocus(index,key,ind)"
@change="changeDate($event,index,key,ind)"
>
</el-date-picker>
</div>
<!-- 下拉多选异步() 最后控件-->
<div class="gic-select-wrap inline-block" v-if="childCell.templateCode == 'com007'" @click="selectFocus(index,key,ind)">
<el-select v-model="childCell.levelModel" multiple class="temp-select" v-if="" @focus="selectFocus(index,key,ind)" placeholder="请选择" @change="tempChangeMultip($event,index,key,ind)">
<el-option
v-for="item in childCell.levelOptions"
:key="item.key"
:label="item.value"
:value="item.key">
</el-option>
</el-select>
</div>
<!-- 时间区间 月日- 月日 最后控件-->
<div class="gic-select-wrap inline-block" v-if="childCell.templateCode == 'com008'">
<el-date-picker
v-model="childCell.levelModel"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="MMdd"
value-format="MMdd"
:picker-options="pickerBirthOptions"
@focus="selectFocus(index,key,ind)"
@change="changeDate($event,index,key,ind)"
>
</el-date-picker>
</div>
<!-- 下拉单选异步 -->
<div class="gic-select-wrap inline-block" v-if="childCell.templateCode == 'com009'">
<div class="gic-select">
<el-select v-model="childCell.levelModel" class="temp-select" placeholder="请选择" @focus="selectFocus(index,key,ind)" @change="tempChange(index,key,ind)">
<el-option
v-for="item in childCell.levelOptions"
:label="item.value"
:value="item.key"><!-- :key="item.key" -->
</el-option>
</el-select>
</div>
</div>
<!-- input tag 最后控件-->
<div class="gic-select-wrap inline-block input-tags" v-if="childCell.templateCode == 'com010'">
<el-select
v-model="childCell.levelModel"
multiple
filterable
allow-create
default-first-option
no-data-text= ''
no-match-text=''
placeholder="请输入"
@focus="selectFocus(index,key,ind)"
@change = "changeCreate($event,index,key,ind)">
<el-option
v-for="item in optionsNone"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<!-- 门店区域省市县树形 最后控件-->
<div class="gic-select-wrap inline-block" v-if="childCell.templateCode == 'com011'">
<!-- <vue-area-ab :projectName="projectName" :areaOptions="areaOptions" :index="index" :indexKey="key" :ind="ind" @selected="selected" @click="selectFocus(index,key,ind)"></vue-area-ab> -->
<treeselect v-model="childCell.levelModel" :multiple="true" placeholder="请选择" :options="childCell.levelOptions" noOptionsText="暂无数据" noResultsText="无数据" noChildrenText="无数据" :normalizer="normalizer" value-consists-of="BRANCH_PRIORITY" :searchable="true" :clearable="false" @open="selectFocus(index,key,ind)" @select="selectTree($event,index,key,ind)" @deselect="deSelectTree($event,index,key,ind)"/>
</div>
<!-- 时间区间年月日时分秒-年月日时分秒 最后控件v-if="childCell.templateCode == 'com012'"-->
<div class="gic-select-wrap inline-block" v-if="childCell.templateCode == 'com012'"><!-- default-time="235900" -->
<el-date-picker
v-model="childCell.levelModel"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyyMMdd"
value-format="yyyyMMddHHmmss"
:default-time="['000000', '235959']"
:picker-options="pickerOptionsRange"
@focus="selectFocus(index,key,ind)"
@change="changeDate($event,index,key,ind)"
>
</el-date-picker>
</div>
</template>
</div>
</div>
<!-- 或者条件 -->
<div class="add-or-box" v-if="item.children.length < orConditionLength">
<span class="add-or-words">或者</span>
<span class="add-or-type" id="">
<ul class="filter-button condition-type" id="">
<li data-flag="or" v-for="(orItem,cindex) in conditionTypeList" data-index="index" data-key="key" data-conditiontype="belong" @click="orConditionClick(index,'or',orItem)">{{orItem.chainNodeName}}</li>
<!-- <li data-flag="or" data-index="index" data-key="key" data-conditiontype="baseinfo" @click="orConditionClick(index,'or','baseinfo')">基本信息</li>
<li data-flag="or" data-index="index" data-key="key" data-conditiontype="meminfo" @click="orConditionClick(index,'or','meminfo')">会员信息</li>
<li data-flag="or" data-index="index" data-key="key" data-conditiontype="interact" @click="orConditionClick(index,'or','interact')">互动信息</li>
<li data-flag="or" data-index="index" data-key="key" data-conditiontype="consume" @click="orConditionClick(index,'or','consume')">消费行为</li> -->
</ul>
</span>
</div>
</div>
<!-- 第一个end -->
</div>
</div>
<div class="filter-and add-and-box addAndConditions" v-if="conditionsList.length< andConditionLength">
<span class="and-words" v-if="conditionsList.length>0">并且</span>
<span class="conditionTypes">
<ul class="filter-button condition-type">
<li data-flag="and" data-conditiontype="belong" v-for="(andItem,index) in conditionTypeList" @click="andConditionClick('and',andItem)">{{andItem.chainNodeName}}</li>
<!-- <li data-flag="and" data-conditiontype="baseinfo" @click="andConditionClick('and','baseinfo')">基本信息</li>
<li data-flag="and" data-conditiontype="meminfo" @click="andConditionClick('and','meminfo')">会员信息</li>
<li data-flag="and" data-conditiontype="interact" @click="andConditionClick('and','interact')">互动信息</li>
<li data-flag="and" data-conditiontype="consume" @click="andConditionClick('and','consume')">消费行为</li> -->
</ul>
</span>
</div>
</div>
</div>
<!-- <div class="people-temp-btns" v-if="conditionsShow">
<el-button type="primary" @click="confirmSet">确定</el-button>
<el-button @click="cancelSet">取消</el-button>
</div> -->
</div>
<!-- end -->
</div>
<!-- 筛选条件 -->
<!-- end -->
</div>
</template>
<script>
import qs from 'qs'
// 使用树形插件
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// import vueAreaAb from './vue-area-ab'
import localforage from 'localforage'
export default {
name: "vue-gic-people",
props: {
projectName: String, // 项目名
sceneValue: String, // 场景值
useId: String, // 模板id
hasSearchData: String, // 当前页返回的数据
tempData: String, // 当前页临时返回的数据
},
data() {
return {
repProjectName: 'gic-web', // 项目名
repSceneCode: 'member', //场景值
repId: '', // 模板id
tempDataTemp: '',// 临时数据
// 查询 list
selectDataList: [],
responseData: '',
// 获取 location origin
baseUrl: '',
// data
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6
}
},
// 生日
birthBegin: '',
birthEnd: '',
pickerBirthOptions: {
// disabledDate(time) {
// return time.getTime() > Date.now() - 8.64e6
// },
onPick(date) {
// (0-9)年月数字的显示
function formatDig(num) {
return num > 9 ? '' + num : '0' + num;
}
console.log(date)
this.birthBegin = formatDig(new Date(date.minDate).getMonth()+1) +formatDig(new Date(date.minDate).getDate())
this.birthEnd = formatDig(new Date(date.maxDate).getMonth()+1) + formatDig(new Date(date.maxDate).getDate())
console.log(new Date(date.minDate).getMonth(),new Date(date.maxDate),this.birthBegin,this.birthEnd)
}
},
pickerOptionsRange: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6
}
},
// 区域 option
areaOptions: {
provinceName: '',
provinceId: '',
cityName: '',
cityId: '',
countryName: '',
countyId: ''
},
// 头部模板
tempValue: '',
tempOptions: [
{
value: '选项1',
label: '第一种人'
}, {
value: '选项2',
label: '第二种人'
},
],
// 获取的文字
templateData: '',
// 模板详细条件
conditionDetailShow: false, // true: 显示详细; false: 隐藏详细
// 模板所有条件
conditionsShow: true, // true: 显示选择条件; false: 隐藏选择条件
// 或者条件长度
orConditionLength: 3,
// 并且条件长度
andConditionLength: 5,
// 输入框多个
optionsNone: [],
// 条件数据
conditionsList:[
// {
// id: '',
// chainNodeName: '归属信息',
// children: [
// {
// id: '',
// chainNodeName: '归属信息',
// type: 'belong',
// children:[
// {
// levelModel: '',
// templateCode: 'com001',
// levelOptions: [
// {
// value: '选项1',
// key: '黄金糕'
// },
// {
// value: '选项2',
// key: '黄金糕2'
// }
// ],
// },
// {
// levelModel: '',
// templateCode: 'com001',
// levelOptions: [
// {
// value: '选项11',
// key: '黄金糕11'
// },
// {
// value: '选项22',
// key: '黄金糕22'
// }
// ],
// },
// {
// levelModel: '',
// templateCode: 'com001',
// levelOptions: [
// {
// value: '选项13',
// key: '黄金糕13'
// },
// {
// value: '选项23',
// key: '黄金糕23'
// }
// ],
// },
// {
// levelModel: '',
// templateCode: 'com001',
// levelOptions: [],
// },
// {
// levelModel: null, // tree: null /['aa']; select: ''
// templateCode: 'com004',
// levelOptions: [
// {
// id: 'aa',
// label: 'a',
// children: [
// {
// id: 'aaa',
// label: 'aa',
// }, {
// id: 'abab',
// label: 'ab',
// }
// ],
// }
// ],
// },
// {
// levelModel: '',
// templateCode: 'com001',
// levelOptions: []
// }
// ]
// }
// ]
// }
],
// normalizer(node) {
// return {
// id: node.value,
// label: node.key,
// children: node.subOptions,
// }
// },
// tree
treeFlag: false,
nodeId: '0', //获取门店分组参数
storeData: [
{
storeGroupId: 0,
parentGroupId: '0',
enterpriseId: 'rrrr',
storeGroupName: '所有门店',
groupLevel: 'fff',
storeGroupChain: '所有门店',
children: [
{
storeGroupId: 1,
parentGroupId: '0',
enterpriseId: 'rrrr',
storeGroupName: 'A区',
groupLevel: 'fff',
storeGroupChain: 'A区',
children: [{
storeGroupId: 33,
parentGroupId: '1',
enterpriseId: 'rrrr',
storeGroupName: 'A1区',
groupLevel: 'fff',
storeGroupChain: 'A1区',
}]
},
{
storeGroupId: 2,
parentGroupId: '0',
enterpriseId: 'rrrr',
storeGroupName: 'B区',
groupLevel: 'fff',
storeGroupChain: 'B区',
},
{
storeGroupId: 3,
parentGroupId: '0',
enterpriseId: 'rrrr',
storeGroupName: 'C区',
groupLevel: 'fff',
storeGroupChain: 'C区'
}
]
}
],
defaultProps: {
children: 'children',
label: 'storeGroupName'
},
// 已选择的 tree 节点
selectTreeKeys: [],
valueConsistsOf: 'BRANCH_PRIORITY', // tree节点
normalizer(node) {
return {
id: node.storeGroupId,
label: node.storeGroupName,
children: node.children,
}
},
// 条件类别列表数据
conditionTypeList:[],
// 当前选择的并条件索引,或条件索引, 第几个组件
andIndex: '',
orIndex: '',
componentIndex: '',
// 增加的字段
addObjKey: {
"key": "storeId",
"value": "所有关联门店"
},
}
},
beforeMount() {
var that = this
var host = window.location.origin;
console.log("当前host:",host)
if (host.indexOf('localhost') != '-1') {
that.baseUrl = 'http://gicdev.demogic.com';
}else {
that.baseUrl = host
}
},
methods: {
// 模板选择
tempChangeList(e) {
var that = this;
console.log(e)
},
// 选择方法后,获取下级数据,追加到当行数据
tempChange(index,key,order) {
var that = this;
console.log(index,key,order)
console.log(that.conditionsList[index].children[key])
console.log(that.conditionsList[index].children[key].children[order])
console.log(that.conditionsList[index].children[key].children[order].levelModel)
// 请求参数
var parentChainId = that.conditionsList[index].children[key].children[order].esScreeningWidgetChainId;
var widgetFieldKey = that.conditionsList[index].children[key].children[order].levelModel;
console.log("test>>>>>",that.andIndex,that.orIndex,that.conditionsList[that.andIndex].children[that.orIndex])
that.getNextData(parentChainId,widgetFieldKey)
},
// 下拉多选最后控件
tempChangeMultip(e,index,key,order){
var that = this;
console.log("下拉多选:",String(e),e.join(' '),index,key,order,that.conditionsList[index].children[key].columnValue)
console.log(that.conditionsList[index].children[key])
console.log(that.conditionsList[index].children[key].children[order])
console.log(that.conditionsList[index].children[key].children[order].levelModel)
that.conditionsList[index].children[key].columnValue = e.join(' ')
},
// 获取列表
getDataList() {
var that = this
var para = {
sceneCode: that.repSceneCode,
requestProject: that.repProjectName
}
that.axios.post(that.baseUrl+'/api-plug/get-screening-init-data',qs.stringify(para))
.then((res) => {
console.log(res,res.data,res.data.errorCode)
var resData = res.data
if (resData.errorCode == 0) {
that.conditionTypeList = resData.result;
return;
}
that.$message.error({
duration: 1000,
message: resData.message
})
})
.catch(function (error) {
console.log(error);
// that.toLogin()
that.$message.error({
duration: 1000,
message: error.message
})
});
},
// 获取下级数据
getNextData(parentChainId,widgetFieldKey) {
var that = this
that.$forceUpdate();
var param = {
requestProject: that.repProjectName,
parentChainId: parentChainId,
widgetFieldKey: widgetFieldKey
}
that.axios.post(that.baseUrl+'/api-plug/get-screening-chain-detail',qs.stringify(param))
.then((res) => {
console.log(res,res.data,res.data.errorCode)
var resData = res.data
if (resData.errorCode == 0) {
var data = resData.result
if (!resData.result) {
console.log("zuihou: result-null")
return;
}
// 如果切换了不是特殊的 16 ,先删除
console.log(that.conditionsList[that.andIndex].children[that.orIndex])
if (data.property != 16 && data.property != 4 && !!that.conditionsList[that.andIndex].children[that.orIndex].dealKey) {
delete that.conditionsList[that.andIndex].children[that.orIndex].dealKey
}
// if (data.property == 8) {
// // "property" : "8", //属性:1、计算属性(>,=), 2、字段属性(搜索字段名称)，4、值属性，8、不是属性 可以两两组合(比如，有事计算属性又是值属性，就是5
// that.conditionsList[that.andIndex].children[that.orIndex].columnKey = data.columnKey;
// that.conditionsList[that.andIndex].children[that.orIndex].computeCharacter = data.computeCharacter;
// that.conditionsList[that.andIndex].children[that.orIndex].columnValue = '';
// if (that.conditionsList[that.andIndex].children[that.orIndex].dealKey) {
// delete that.conditionsList[that.andIndex].children[that.orIndex].dealKey
// }
// console.log("data.property字段8:columnKey" ,data.property,data.columnKey,data.computeCharacter)
// }
// 计算
if (data.property == 1) {
// "property" : "8", //属性:1、计算属性(>,=), 2、字段属性(搜索字段名称)，4、值属性，8、不是属性 可以两两组合(比如，有事计算属性又是值属性，就是5
//that.conditionsList[that.andIndex].children[that.orIndex].children[0].levelModel;
that.conditionsList[that.andIndex].children[that.orIndex].computeCharacter = data.computeCharacter;
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = '';
if (that.conditionsList[that.andIndex].children[that.orIndex].dealKey) {
delete that.conditionsList[that.andIndex].children[that.orIndex].dealKey
}
console.log("data.property计算: computeCharacter" ,data.property,data.computeCharacter)
}
// 字段
if (data.property == 2) {
// "property" : "8", //属性:1、计算属性(>,=), 2、字段属性(搜索字段名称)，4、值属性，8、不是属性 可以两两组合(比如，有事计算属性又是值属性，就是5
that.conditionsList[that.andIndex].children[that.orIndex].columnKey = data.columnKey;
that.conditionsList[that.andIndex].children[that.orIndex].computeCharacter = '';
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = '';
if (that.conditionsList[that.andIndex].children[that.orIndex].dealKey) {
delete that.conditionsList[that.andIndex].children[that.orIndex].dealKey
}
console.log("data.property字段:columnKey" ,data.property,data.columnKey)
}
// 计算属性+字段属性
if (data.property == 3) {
// "property" : "8", //属性:1、计算属性(>,=), 2、字段属性(搜索字段名称)，4、值属性，8、不是属性 可以两两组合(比如，有事计算属性又是值属性，就是5
that.conditionsList[that.andIndex].children[that.orIndex].computeCharacter = data.computeCharacter;
that.conditionsList[that.andIndex].children[that.orIndex].columnKey = data.columnKey;
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = '';
if (that.conditionsList[that.andIndex].children[that.orIndex].dealKey) {
delete that.conditionsList[that.andIndex].children[that.orIndex].dealKey
}
console.log("data.property计算+字段:computeCharacter,columnKey" ,data.computeCharacter,data.columnKey)
}
// 值属性
if (data.property == 4) {
// "property" : "8", //属性:1、计算属性(>,=), 2、字段属性(搜索字段名称)，4、值属性，8、不是属性 可以两两组合(比如，有事计算属性又是值属性，就是5
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = data.columnValue;
console.log("data.property值属性:columnValue" ,data.property,data.columnValue)
}
// 门店
if ((data.property & 16) > 0) {
that.conditionsList[that.andIndex].children[that.orIndex].dealKey = data.dealKey;
// that.conditionsList[that.andIndex].children[that.orIndex].columnKey = data.columnKey;
// that.conditionsList[that.andIndex].children[that.orIndex].computeCharacter = data.computeCharacter;
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = '';
console.log("data.property门店:",data.property)
}
console.log('columnKey>>>>>>>',that.conditionsList[that.andIndex].children[that.orIndex].columnKey,widgetFieldKey)
// 判断是否把数据添加到下级组件中
that.addNextData(resData.result,widgetFieldKey)
return;
}
that.$message.error({
duration: 1000,
message: resData.message
})
})
.catch(function (error) {
console.log(error);
// that.toLogin()
that.$message.error({
duration: 1000,
message: error.message
})
});
},
// 添加数据到下级组件,需要先清空当前组件以后所有数据
addNextData(item,fieldKey) {
var that = this
console.log("添加的下级数据:",item)
// 先清空当前组件以后所有数据
var arrList = that.conditionsList[that.andIndex].children[that.orIndex].children
for(var i = 0;i < arrList.length; i++){
if(that.componentIndex < i ){
arrList.splice(i,1)
--i
}
}
console.log(arrList)
// sourceFlag 如果是 url
if (!!item.widget&&item.widget.sourceFlag == 1) {
console.log(":sourceFlag:",item.widget.sourceFlag)
item.widget.widgetParam = JSON.parse(item.widget.widgetParam)
console.log(item.widget.widgetParam[0])
// 如果是搜索下拉多选
if (item.widget.templateCode=='com005') {
that.conditionsList[that.andIndex].children[that.orIndex].children[that.componentIndex].url = item.widget.widgetParam[0].value
console.log(item.widget.widgetParam[0].value)
// 追加数据,显示下拉搜索双选组件,因为是多选,追加数据时候levelModel 是数组,不然选择时候报错 TypeError: value.push is not a function
that.pushData(item)
return;
}
// 获取下级数据
that.getUrlData(item.widget.widgetParam,item,fieldKey)
return;
}
if (!item||!item.widget) {
return;
}
// if (item.widget.templateCode=="com002") {
// }
// 添加数据到下级组件
var conditionTag = item.widget.templateCode=="com002"||item.widget.templateCode=="com010"||item.widget.templateCode=="com013"
var newObj = {};
newObj = {
esScreeningWidgetChainId: item.esScreeningWidgetChainId,
property: item.property,
levelModel: conditionTag?[]:'',
templateCode: item.widget.templateCode,
levelOptions: JSON.parse(item.widget.widgetValues),
}
console.log("当前数组:",newObj,that.conditionsList[that.andIndex].children[that.orIndex].children)
that.conditionsList[that.andIndex].children[that.orIndex].children.push(newObj)
},
// 追加数据
pushData(item) {
var that = this
var newObj = {};
newObj = {
esScreeningWidgetChainId: item.esScreeningWidgetChainId,
property: item.property,
levelModel: [],
templateCode: item.widget.templateCode,
levelOptions: [],//JSON.parse(item.widget.widgetValues),
}
console.log("当前数组:",that.conditionsList[that.andIndex].children[that.orIndex].children)
that.conditionsList[that.andIndex].children[that.orIndex].children.push(newObj)
},
// 追加组件+数据
pushComData(item,options) {
var that = this
// 如果是门店树形结构
// if (item.widget.templateCode=='com004') {
// options.forEach(function(ele,index) {
// // ele.id = ele.storeGroupId
// })
// }
var newObj = {};
newObj = {
esScreeningWidgetChainId: item.esScreeningWidgetChainId,
property: item.property,
levelModel: [],
templateCode: item.widget.templateCode,
levelOptions: options,//JSON.parse(item.widget.widgetValues),
}
console.log("当前数组:",that.conditionsList[that.andIndex].children[that.orIndex].children)
that.conditionsList[that.andIndex].children[that.orIndex].children.push(newObj)
},
// 获取请求的url,请求数据到下级
getUrlData(widgetParam,item,fieldKey) {
console.log("获取请求的url:",widgetParam,item)
var that = this
var param = {
requestProject: that.repProjectName,
key: fieldKey
}
that.axios.post(that.baseUrl + widgetParam[0].value,qs.stringify(param))
.then((res) => {
console.log(res,res.data,res.data.errorCode)
var resData = res.data
if (resData.errorCode == 0) {
// 判断省市县控件
if (item.widget.templateCode == 'com011') {
console.log("省市县控件>>>>>>>>>>>")
resData.result.forEach(function(ele,index){
ele.storeGroupId = ele.provinceId;
ele.storeGroupName = ele.provinceName;
if (ele.children.length) {
ele.children.forEach(function(el,ind){
el.storeGroupId = el.cityId
el.storeGroupName = el.cityName
})
}
})
}
console.log("resData.result>>>>>",resData.result)
that.pushComData(item,resData.result)
return;
}
that.$message.error({
duration: 1000,
message: resData.message
})
})
.catch(function (error) {
console.log(error);
// that.toLogin()
that.$message.error({
duration: 1000,
message: error.message
})
});
},
// input tag
changeCreate(e,index,key,ind){
var that = this
console.log("create input tag:",e,index,key,ind)
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = e.join(' ')
},
// 输入框输入的时候
toInput(e) {
var that = this
console.log("输入值:",e.target.value)
var value = e.target.value
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = String(value)
},
blurFrom(e){
var that = this
console.log("输入值From:",e.target.value,that.conditionsList[that.andIndex].children[that.orIndex],Number(e.target.value.replace(/[^\.\d]/g,'')))
var value = !Number(e.target.value.replace(/[^\.\d]/g,''))? Number(0): Number(e.target.value.replace(/[^\.\d]/g,''))
console.log(value,Number(e.target.value.replace(/[^\.\d]/g,'')))
// 判断输入
let v1 = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[0];
let v2 = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[1]
if (!Number(v2) || Number(v1) >= Number(v2)) {
console.log("输入值From:v2",Number(v1),v2,value)
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[0] = value
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[1] = Number((!!Number(v1)? Number(v1):0) + 1)
that.$forceUpdate();
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel.join(',')
return;
}
// if (Number(v1) >= Number(v2)) {
// that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[1] = Number((!!Number(v1)? Number(v1):0) + 1)
// that.$forceUpdate();
// that.conditionsList[that.andIndex].children[that.orIndex].columnValue = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel.join(',')
// return;
// }
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[0] = value
// that.conditionsList[that.andIndex].children[that.orIndex].columnValue = String(value)
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel.join(',')
that.$forceUpdate();
},
blurTo(e){
var that = this
console.log("输入值To:",e.target.value,that.conditionsList[that.andIndex].children[that.orIndex])
var value = !Number(e.target.value.replace(/[^\.\d]/g,''))? Number(0): Number(e.target.value.replace(/[^\.\d]/g,''))
let t1 = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[0];
let t2 = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[1]
if ((!Number(t1) && Number(t1)!=0) || (Number(t1) >= Number(t2))) {
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[0] = Number(t2) - 1 >=0? (Number(Number(t2) - 1)): Number(0)
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[1] = value
that.$forceUpdate();
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel.join(',')
return
}
// if (Number(t1) >= Number(t2)) {
// console.log("输入值To:",Number(t1))
// that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[1] = Number(Number(t1) + 1)
// that.$forceUpdate();
// that.conditionsList[that.andIndex].children[that.orIndex].columnValue = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel.join(',')
// return
// }
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[1] = value
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel.join(',')
that.$forceUpdate();
},
// 输入框区间输入的时候
toInputFrom(e) {
var that = this
console.log("输入值:",e.target.value,that.conditionsList[that.andIndex].children[that.orIndex])
var value = Number(e.target.value.replace(/[^\d]/g,'')) == NaN? '0': Number(e.target.value.replace(/[^\d]/g,''))
console.log(value,Number(e.target.value.replace(/[^\d]/g,'')),String(value).substr(String(value).length-1,1))
// 判断输入
let v1 = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[0];
let v2 = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[1]
if (!Number(v2)) {
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[1] = Number(v1) + 1
}
if (Number(v1) >= Number(v2)) {
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[1] = Number(v1) + 1
that.$forceUpdate();
return
}
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[0] = value
// that.conditionsList[that.andIndex].children[that.orIndex].columnValue = String(value)
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel.join(',')
that.$forceUpdate();
},
toInputTo(e) {
var that = this
console.log("输入值:",e.target.value,that.conditionsList[that.andIndex].children[that.orIndex])
var value = Number(e.target.value.replace(/[^\d]/g,'')) == NaN? '0': Number(e.target.value.replace(/[^\d]/g,''))
let t1 = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[0];
let t2 = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[1]
if (!Number(t1)) {
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[0] = Number(t2) - 1 >=0? (Number(t2) - 1): 0
}
if (Number(t1) >= Number(t2)) {
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[1] = Number(t1) + 1
that.$forceUpdate();
return
}
that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel[1] = value
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = that.conditionsList[that.andIndex].children[that.orIndex].children[2].levelModel.join(',')
that.$forceUpdate();
},
// date 选择的时候
changeDate(e,index,key,ind) {
var that = this
console.log("选择 date:",e,index,key,ind)
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = String(e)
},
// 添加并且条件 flag: and, conditiontype: belong/baseinfo/meminfo/interact/consume
andConditionClick(flag,item){
var that = this;
console.log("添加并且条件",flag,item);
// 显示确认取消按钮
that.$emit('editShow')
// 判断是不是通过 url 请求数据
var dataOption = JSON.parse(item.widget.widgetParam)
if (item.widget.sourceFlag == 1) {
that.getOpenList(item,dataOption[0].value,flag)
return ;
}
that.conditionsList.push(that.judgeConditionType(item,JSON.parse(item.widget.widgetValues)))
},
// 添加或者条件 index: 第几个并条件;
orConditionClick(index,flag,item) {
var that = this;
console.log("添加或者条件:",index,flag,item);
// 显示确认取消按钮
that.$emit('editShow')
var dataOption = JSON.parse(item.widget.widgetParam)
if (item.widget.sourceFlag == 1) {
that.getOpenList(item,dataOption[0].value,flag,index)
return ;
}
that.conditionsList[index].children.push(that.judgeOrConditionType(item,JSON.parse(item.widget.widgetValues)))
},
// 点击下拉事件
selectFocus(index,key,order){
var that = this
that.andIndex = index,
that.orIndex = key,
that.componentIndex = order,
console.log("第 "+index+' 个并条件中第 '+key+' 个或条件中第 '+order+' 个组件',that.conditionsList[index].children[key].children[order])
console.log(that.conditionsList[index].children[key].children[order].levelModel)
console.log(Object.keys(that.conditionsList[index].children[key].children[order]))
console.log(Object.values(that.conditionsList[index].children[key].children[order]))
},
// 选择搜索后的列表
changeRemote(e,index,key,ind){
var that = this
console.log(e,index,key,ind)
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = e.join(' ');//String(e)
},
// 选择 tree 树形结构
selectTree(e,index,key,ind){
var that = this
console.log(e,index,key,ind)
console.log(that.conditionsList[index].children[key].children[ind])
var arr = {}
setTimeout(function(){
arr = JSON.parse(JSON.stringify(that.conditionsList[index].children[key].children[ind].levelModel))
console.log(JSON.stringify(arr),that.conditionsList[index].children[key].children[ind].levelModel)
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = arr.join(' ');//String(arr)
console.log(that.conditionsList[that.andIndex].children[that.orIndex].columnValue)
},100)
// var arr = {}
// arr = JSON.parse(JSON.stringify(that.conditionsList[index].children[key].children[ind]))
// console.log(JSON.stringify(arr),that.conditionsList[index].children[key].children[ind].levelModel)
},
// 不选tree
deSelectTree(e,index,key,ind){
var that = this
console.log(e,index,key,ind)
console.log(that.conditionsList[index].children[key].children[ind])
var arr = {}
setTimeout(function(){
arr = JSON.parse(JSON.stringify(that.conditionsList[index].children[key].children[ind].levelModel))
console.log(JSON.stringify(arr),that.conditionsList[index].children[key].children[ind].levelModel)
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = arr.join(' ');//String(arr)
console.log(that.conditionsList[that.andIndex].children[that.orIndex].columnValue)
},100)
},
// 搜索后出现下拉列表
// 搜索
remoteMethod(query) {
var that = this;
console.log("query:",query)
var selectValue = that.conditionsList[that.andIndex].children[that.orIndex].children[that.componentIndex].levelModel
console.log(selectValue)
if (query !== '') {
var url = that.conditionsList[that.andIndex].children[that.orIndex].children[that.componentIndex-1].url
console.log("取到当前组前一个保存的",url)
that.getCurrentData(url,query)
// 获取搜索列表数据
// that.getStoreList(query,selectValue);
}else {
// that.conditionsList[that.andIndex].children[that.orIndex].children[that.componentIndex].levelOptions = [];
}
},
// 获取门店列表
getStoreList(query,threeLevelValue) {
var that = this
console.log(threeLevelValue)
var para = {
searchParam: query,
selectedIds: threeLevelValue?String(threeLevelValue):'',
flag: null,
requestProject: that.repProjectName
}
that.axios.post(that.baseUrl+'/api-plug/query-store-by-code-name',qs.stringify(para))
.then((res) => {
console.log(res,res.data,res.data.errorCode)
var resData = res.data
if (resData.errorCode == 0) {
resData.result.forEach(function(ele,index){
ele.id = ele.storeId;
ele.value = ele.storeName;
ele.key = ele.storeId
})
that.conditionsList[that.andIndex].children[that.orIndex].children[that.componentIndex].levelOptions = resData.result
return;
}
that.$message.error({
duration: 1000,
message: resData.message
})
})
.catch(function (error) {
console.log(error);
// that.toLogin()
that.$message.error({
duration: 1000,
message: error.message
})
});
},
// 搜索获取数据到当前组件中
getCurrentData(url,name) {
var that = this
var para = {
requestProject: that.repProjectName,
name: name
}
that.axios.post(that.baseUrl+url,qs.stringify(para))
.then((res) => {
console.log(res,res.data,res.data.errorCode)
var resData = res.data
if (resData.errorCode == 0) {
resData.result.forEach(function(ele,index){
// // ele.id = ele.cityId;
// // ele.value = ele.cityName;
// // ele.key = ele.cityId
// 改又增加搜索数据var tempOptions =
that.conditionsList[that.andIndex].children[that.orIndex].children[that.componentIndex].levelOptions.unshift(ele)
// that.conditionsList[that.andIndex].children[that.orIndex].children[that.componentIndex].levelOptions = tempOptions;//[...new Set(tempOptions)]
})
// console.log("##转换后:",[...new Set(that.conditionsList[that.andIndex].children[that.orIndex].children[that.componentIndex].levelOptions)])
let obj = {};
let person = that.conditionsList[that.andIndex].children[that.orIndex].children[that.componentIndex].levelOptions;
person = person.reduce((cur,next) => {
// console.log(cur,next)
obj[next.key] ? "" : obj[next.key] = true && cur.push(next);
return cur;
},[]) //设置cur默认类型为数组，并且初始值为空的数组
that.conditionsList[that.andIndex].children[that.orIndex].children[that.componentIndex].levelOptions = person
// that.conditionsList[that.andIndex].children[that.orIndex].children[that.componentIndex].levelOptions = resData.result
console.log(person)
return;
}
that.$message.error({
duration: 1000,
message: resData.message
})
})
.catch(function (error) {
console.log(error);
// that.toLogin()
that.$message.error({
duration: 1000,
message: error.message
})
});
},
// 省市县选择
selected(val) {
var that = this
console.log(val)
if (val.country) {
that.conditionsList[val.index].children[val.indexKey].columnValue = val.areaId
}
},
// 删除 cell 条件
deleteCell(index,key) {
var that = this
console.log(index,key)
that.conditionsList[index].children.splice(key,1);
if (that.conditionsList[index].children.length ==0) {
that.conditionsList.splice(index,1);
}
console.log(that.conditionsList)
//判断隐藏/显示按钮
if (that.conditionsList.length===0) {
that.$emit('hideBtn')
}
},
// warning tips
showWarn(msg,type) {
var that = this
that.$message({
message: msg,
type: type
})
},
returnFlag(data) {
var that = this
var tag = true;
data.forEach(function(ele,index) {
ele.children.forEach(function(el,ind){
if (!el.columnValue) {
that.showWarn('请完善筛选条件','warning')
tag = false
return;
}
})
})
console.log(tag)
return tag
},
// 点击编辑模板
editTemp() {
var that = this;
that.conditionDetailShow = false;
that.conditionsShow = true;
if (!!that.conditionsList.length) {
that.$emit('editShow');
}else {
that.$emit('hideBtn');
}
},
// 点击重置
resetTemp() {
var that = this;
that.conditionDetailShow = false;
that.conditionsShow = true;
// 清空数据
// that.cancelSet()
// 清空所有的条件值
that.conditionsList = []
that.templateData = []
// 隐藏按钮
that.$emit('hideBtn')
// 传递查询数据空的
that.$emit('findFilter', '')
// 传递列表数据空的
that.$emit('getBackData','')
},
// 确认设置
confirmSet() {
var that = this;
console.log(that.conditionsList)
var setData = JSON.parse(JSON.stringify(that.conditionsList))
// 发送数据 拼接
var sendData = {
list:[],
type: 'and'
}
if (!setData.length) {
that.showWarn('请完善筛选条件','warning')
return false;
}
if(!that.returnFlag(setData)){
that.showWarn('请完善筛选条件','warning')
return false;
}
// 存储模板数据到本地数据库
// that.saveIndexDb(setData)
// window.localStorage.setItem('temp',JSON.stringify(setData))
// localforage.setItem('tempData', setData).then(function (value) {
// // 当值被存储后，可执行其他操作
// console.log(value);
// }).catch(function(err) {
// // 当出错时，此处代码运行
// console.log(err);
// });
// setData.forEach(function(ele,index) {
// var obj = {
// type: "or",
// list: [
// ]
// }
// ele.children.forEach(function(el,index) {
// el.children.forEach(function(element,keys) {
// console.log(element.levelModel,keys)
// var ky = keys
// if (element.levelOptions) {
// element.levelOptions.forEach(function(child,k) {
// if (element.levelModel == child.key) {
// el[ky] = child.value
// }
// })
// }
// })
// })
// })
console.log("setData:",JSON.stringify(setData))
// return;
var birthFlag = true;
setData.forEach(function(ele,index) {
//外层 and
var obj = {
type: "or",
list: [
]
}
ele.children.forEach(function(el,index) {
var innerObj = {
type: 'data',
data: {
}
}
console.log(el.columnKey)
innerObj.data.key = el.columnKey;
innerObj.data.compute = el.computeCharacter;
innerObj.data.value = el.columnValue
if (el.dealKey) {
innerObj.data.dealKey = el.dealKey
}
// 生日
if (el.columnKey == 'birthday' || el.columnKey == 'birthdayMD') {
if (parseInt(el.columnValue.split(',')[0])>parseInt(el.columnValue.split(',')[1])) {
birthFlag = false
}
}
obj.list.push(innerObj)
})
sendData.list.push(obj)
})
console.log("sendData:>>>>>",JSON.stringify(sendData))
that.selectDataList = sendData
// that.calculateNum(sendData)
setTimeout(function(){
console.log(birthFlag)
if (!birthFlag) {
console.log(birthFlag)
that.showWarn('生日不能跨年','warning')
return false;
}
that.getAbInfo(sendData,setData)
},100)
// 获取缩略信息
// 隐藏筛选条件 获取缩略信息后显示
// that.conditionsShow = false;
// that.conditionDetailShow = true;
},
// 计算选择多少项数据的
calculateNum(selectData){
var that = this;
let len = 0;
if(!!that.selectDataList.list.length){
that.selectDataList.list.forEach(function(ele,index){
if(!!ele.list.length){
len +=ele.list.length
}
})
}
// that.$emit('getSelectNum',len)
return len
},
// 获取缩略信息
getAbInfo(sendData,setData) {
var that = this
var para = {
params: JSON.stringify(sendData),
requestProject: that.repProjectName,
sceneCode: that.repSceneCode,
}
that.axios.post(that.baseUrl+'/api-plug/screening-show-back',qs.stringify(para))
.then((res) => {
console.log(res,res.data,res.data.errorCode)
var resData = res.data
if (resData.errorCode == 0) {
that.templateData = resData.result.replace(/或/g, ' 或 ').replace(/且/g, ' 且 ')
// 隐藏筛选条件
that.conditionsShow = false;
// 显示缩略信息
that.conditionDetailShow = true;
// 传递查询数据
that.$emit('findFilter', JSON.stringify(sendData))
// 传递列表数据
that.$emit('getBackData',JSON.stringify(setData))
// 按钮隐藏
that.$emit('editHide')
return;
}
that.$message.error({
duration: 1000,
message: resData.message
})
})
.catch(function (error) {
console.log(error);
// that.toLogin()
that.$message.error({
duration: 1000,
message: error.message
})
})
},
// 取消设置
cancelSet() {
var that = this;
// that.conditionsShow = false;
// that.conditionDetailShow = true;
// that.$emit('cancelFilter')
if (!!that.templateData && !!that.templateData.length) {
that.conditionsShow = false;
that.conditionDetailShow = true;
that.$emit('editHide')
return;
}else{
// 清空所有的条件值
that.conditionsList = []
that.$emit('hideBtn')
}
},
// 保存用户群
saveTemp() {
var that = this
var saveData = JSON.parse(JSON.stringify(that.conditionsList))
},
// 获取模板详细数据(回显)
getTempDetail() {
var that = this
var para = {
requestProject: that.repProjectName,
id: that.repId
}
that.axios.post(that.baseUrl+'/api-plug/get-screening-detail',qs.stringify(para))
.then((res) => {
console.log(res,res.data,res.data.errorCode)
var resData = res.data
if (resData.errorCode == 0) {
// console.log(">>>>>>>result:",resData.result.detail)
if (!!resData.result) {
if (!!resData.result.detail && !!resData.result.detail.length) {
var resDetail = JSON.parse(resData.result.detail)
resDetail.forEach(function(ele,index){
// console.log(ele,">>>>>>>>>>>>>>>>>>")
if (ele.esScreeningWidgetChainId == '8b0f770c72c24158bda1105b40d7336c') {
ele.children.forEach(function(el,key){
// console.log(el,"//////")
el.children[0].levelOptions.push(that.addObjKey)
})
}
})
that.conditionsList = resDetail
that.$emit("editHide")
}
}
return;
}
that.$message.error({
duration: 1000,
message: resData.message
})
})
.catch(function (error) {
console.log(error);
// that.toLogin()
that.$message.error({
duration: 1000,
message: error.message
})
})
},
// 判断并条件类型,添加数据
judgeConditionType(item,levelOptions) {
var that = this
var addObj = {};
var length = that.conditionsList.length;
console.log(length,item);
addObj = {
esScreeningWidgetChainId: item.esScreeningWidgetChainId,
chainNodeName: item.chainNodeName,
children: [
{
esScreeningWidgetChainId: item.esScreeningWidgetChainId,
property: item.property,
chainNodeName: item.chainNodeName,
columnKey:'',
computeCharacter: '',
columnValue: '',
children: [
{
esScreeningWidgetChainId: item.esScreeningWidgetChainId,
property: item.property,
levelModel: '',
templateCode: item.widget.templateCode,
levelOptions: levelOptions,
}
]
}
]
}
return addObj;
},
// 获取开卡信息字段
getOpenList(item,url,flag,index) {
var that = this
var para = {
requestProject: that.repProjectName
}
that.axios.post(that.baseUrl+url,qs.stringify(para))
.then((res) => {
console.log(res,res.data,res.data.errorCode)
var resData = res.data
if (resData.errorCode == 0) {
resData.result.forEach(function(ele,index){
ele.value = ele.name;
ele.key = ele.id
})
if (flag=="or") {
that.conditionsList[index].children.push(that.judgeOrConditionType(item,resData.result))
return;
}
that.conditionsList.push(that.judgeConditionType(item,resData.result))
// that.conditionsList[that.andIndex].children[that.orIndex].children[that.componentIndex].levelOptions = resData.result
return;
}
that.$message.error({
duration: 1000,
message: resData.message
})
})
.catch(function (error) {
console.log(error);
// that.toLogin()
that.$message.error({
duration: 1000,
message: error.message
})
});
},
// 判断或者条件类型,添加数据
judgeOrConditionType(item,levelOptions) {
var that = this
var addObj = {};
console.log(item);
addObj = {
esScreeningWidgetChainId: item.esScreeningWidgetChainId,
property: item.property,
chainNodeName: item.chainNodeName,
columnKey:'',
computeCharacter: '',
columnValue: '',
children: [
{
esScreeningWidgetChainId: item.esScreeningWidgetChainId,
levelModel: '',
templateCode: item.widget.templateCode,
levelOptions: levelOptions,
}
]
}
return addObj;
},
},
watch: {
projectName: function(newData,oldData){
var that = this;
that.repProjectName = newData || 'gic-web';
},
sceneValue: function(newData,oldData){
var that = this;
that.repSceneCode = newData || 'member';
},
useId: function(newData,oldData){
var that = this;
that.repId = newData;
that.getTempDetail()
},
hasSearchData: function(newData,oldData){
var that = this;
console.log("that.responseData:",newData)
if (!!newData) {
that.responseData = JSON.parse(newData)
that.getAbInfo(that.responseData)
// 显示缩略 隐藏保存按钮
that.$emit('editHide')
}
},
tempData:function(newData,oldData){
var that = this;
that.tempDataTemp = newData
}
},
mounted() {
var that = this
that.getDataList();
// 项目名
that.repProjectName = that.projectName || 'gic-web';
// localforage.getItem('tempData').then(function(value) {
// // 当离线仓库中的值被载入时，此处代码运行
// console.log(JSON.stringify(value));
// if (value!=null && !!value) {
// that.conditionsList = value
// }
// }).catch(function(err) {
// // 当出错时，此处代码运行
// console.log(err);
// });
that.repSceneCode = that.sceneValue || 'member'; // 获取场景值
that.repId = that.useId; // 获取模板 id
console.log(that.repId)
// 默认隐藏保存按钮,确认按钮
that.$emit('hideBtn')
if (!!that.repId) {
that.getTempDetail()
}
if (!!that.hasSearchData) {
console.log("hasSearchData//////////",that.hasSearchData)
that.responseData = JSON.parse(that.hasSearchData)
that.getAbInfo(that.responseData)
// 显示缩略 显示保存按钮
that.$emit('.editHide')
}
// 临时数据显示
if (!!that.tempData) {
that.tempDataTem = that.tempData
}
},
components: {
Treeselect,
// vueAreaAb
}
}
</script>
<style lang="scss" scoped>
.people-content {
width: 100%;
padding: 24px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #f2f3f4;
.people-temp-head {
.member-templates-title {
display: inline-block;
width: 100px;
text-align: right;
margin-right: 30px;
line-height: 40px;
}
.el-select {
/*height: 40px;*/
border-radius: 2px;
line-height: 40px;
/*border: 1px solid #e7e7eb;*/
position: relative;
cursor: pointer;
color: #888;
}
}
.el-select .el-input__inner {
border: none!important;
border-radius: 2px!important;
}
}
/*去掉输入框右侧*/
.input-tags /deep/ {
.el-input__suffix-inner {
display: none
}
}
.el-select>.el-input {
border: none;
}
.temp-select .el-input__inner {
border: none;
border-radius: 2px;
}
.screening-condition {
margin-left: 100px;
margin-top: 14px;
}
.screening-condition .btn-edit-group,
.screening-condition .btn-cancel-group {
color: #909399;
cursor: pointer;
display: inline-block;
font-size: 14px;
margin-left: 4px;
position: relative;
width: 14px;
height: 14px;
top: 1px;
/*background: url('../../images/14x14icon@2x.png') no-repeat center center;*/
}
.screening-condition .btn-edit-group:hover {
color: #409eff;
}
.screening-condition .el-icon-delete:hover {
color: #F56C6C;
}
.screening-condition .btn-edit-group {
background-position: 0 -355px;
}
.screening-condition .btn-cancel-group {
background-position: -59px -298px;
}
.detail {
display: inline;
cursor: pointer;
/*margin-top: 14px;*/
font-size: 14px;
color: #858585;
line-height: 20px;
}
.detail span {
font-size: 14px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.detail .bg_blue {
display: inline-block;
background: #effcff;
padding: 6px 7px;
border-radius: 3px;
color: #858585;
margin: 0 5px 5px 5px;
height: 18px;
}
.detail .word {
margin: 0px 10px;
}
.detail .bg_yellow {
display: inline-block;
background: #fffeeb;
padding: 6px 7px;
border-radius: 3px;
color: #858585;
margin: 0 5px 5px 5px;
height: 18px;
}
.gic-btn {
height: 36px;
line-height: 36px;
color: #fff;
padding: 0 24px;
font-size: 14px;
border-radius: 2px;
background: #409eff;
border: none;
outline: none;
cursor: pointer;
margin-top: 30px;
&:hover {
/*background: #fceb88;*/
}
}
/* 筛选条件 */
@media screen and (min-width: 1131px) {
.ration .groupbox {
/*min-width: 1241px;*/
min-width: 750px;
padding-right: 30px;
}
}
@media screen and (max-width: 1131px) {
.ration .groupbox {
/*min-width: 1241px;*/
min-width: 750px;
padding-right: 30px;
}
}
.el-input__inner {
/*border: 0px solid #dcdfe6;*/
}
.filter-message {
position: relative;
background: #fff;
padding: 10px 30px;
}
.filter-content {
margin-top: 0;
min-width: 1100px;
position: relative;
}
.filter-content .member-templates-condition-title {
width: 80px;
vertical-align: top;
position: absolute;
left: 0;
top: 0;
text-align: right;
margin: 0px;
z-index: 2;
font-size: 14px;
line-height: 28px;
color: #303133;
}
.filter-box {
border-left: 10px solid #409eff;
}
.filter-message {
position: relative;
background: #fff;
padding-left: 30px;
padding-bottom: 10px;
}
.fliter-message-title {
margin-right: 7px;
line-height: 40px;
height: 40px;
font-size: 14px;
margin: 0;
}
.marginLeft134 {
margin-left: 100px;
}
.inline-block {
display: inline-block;
vertical-align: top;
}
.filter-or {
display: inline-block;
margin-right: 20px;
}
.filter-button li {
padding: 8px 15px;
display: inline-block;
background: #e3e7ee;
border-radius: 20px;
font-size: 12px;
line-height: 12px;
margin-right: 10px;
cursor: pointer;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.filter-button li:hover {
background: #409eff;
color: #fff;
}
.filter-button .filter-active {
background: #409eff;
color: #fff;
}
.filter-and {
display: flex;
margin: 10px 10px 10px -10px;
font-size: 14px;
}
.filter-guanbi {
color: #909399;
cursor: pointer;
position: absolute;
right: 10px;
top: 24px;
}
.filter-guanbi:hover {
color: #F56C6C;
}
.filter-button {
margin: 0px 10px 0px 15px;
}
.add-or-box {
display: flex;
margin: 10px 0 0 16px;
}
.add-or-box .add-or-words {
margin-right: 16px;
padding: 3px 0 0;
/*line-height: 30px;*/
font-size: 14px;
}
.andlabels {
margin: 10px 10px 10px -10px;
font-size: 14px;
}
.group_combo>.orlabels {
height: 30px;
line-height: 30px;
margin-left: 15px;
color: #292929;
font-size: 14px;
}
.gic-select-wrap {
position: relative;
margin-left: 5px;
}
/* btns */
.people-temp-btns {
width: 100%;
margin-top: 20px;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 130px;
}
/*tree*/
.el-tree-out {
position: absolute;
left: 0;
}
.el-tree-contain {
position: relative;
left: 0px;
width: 400px;
height: 300px;
z-index: 91008;
border: 1px solid #e4e7ed;
border-radius: 4px;
background: #fff;
-webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.el-tree {
position: absolute;
left: 0px;
min-width: 398px;
height: 230px;
overflow: auto;
z-index: 91008;
border-bottom: 1px solid #e4e7ed;
margin: 15px 0;
}
.tree-btns {
position: absolute;
left: 0px;
top: 251px;
min-width: 398px;
height: 50px;
text-align: right;
.el-button.el-button--primary {
margin-right: 30px
}
}
.select-wrap-input {
width: 100px;
margin-right: 10px;
}
.vue-treeselect /deep/ {
width: 217px;
/deep/ .vue-treeselect__control {
height: 40px;
/*line-height: 36px;*/
cursor: pointer;
}
/deep/ .vue-treeselect__multi-value-item {
color: #909399;
background: #f0f2f5;
}
/deep/ .vue-treeselect__value-remove {
color: #909399;
}
.vue-treeselect__placeholder {
line-height: 40px;
font-size: 13.3333px;
}
.vue-treeselect--searchable:not(.vue-treeselect--disabled) .vue-treeselect__value-container {
cursor: pointer;
}
.vue-treeselect__control-arrow {
display: none;
}
.vue-treeselect__control-arrow-container {
position: relative;
}
/deep/.vue-treeselect__control-arrow-container:after, .vue-treeselect__control-arrow-container:before {
border: 6px solid transparent;
border-left: 6px solid #fff;
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
margin-left: -6px;
content: ' ';
margin-top: -3px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
transition: transform .3s,-webkit-transform .3s;
}
/deep/ .vue-treeselect__control-arrow-container:before {
border-left-color: #c0c4cc;
top: 52%;
}
&.vue-treeselect--focused .vue-treeselect__control-arrow-container:after, &.vue-treeselect--focused .vue-treeselect__control-arrow-container:before {
margin-top: -6px;
-webkit-transform: rotateZ(-90deg);
-moz-transform: rotateZ(-90deg);
-o-transform: rotateZ(-90deg);
transform: rotateZ(-90deg);
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
transition: transform .3s,-webkit-transform .3s;
}
&.vue-treeselect--focused .vue-treeselect__control-arrow-container:before {
border-left-color: #c0c4cc;
top: 47%;
}
.vue-treeselect--has-value .vue-treeselect__multi-value {
margin-bottom: 0;
}
}
.gic-select-wrap .el-input__inner {
/*border-width: 1px;*/
}
</style>
src/main.js 0 → 100644
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
webpack.config.js 0 → 100644
var path = require('path')
var webpack = require('webpack')
module.exports = {
// entry: './src/main.js',
entry: './src/lib/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js',
filename: 'vue-gic-people.js',
library: 'vue-gic-people',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
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