Commit e9d96da5 authored by 赵茹林's avatar 赵茹林

修复标签页弹窗bug

更新静态文件CDN链接
parent d0797f22
......@@ -4,17 +4,16 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="referrer" content="never">
<link rel="stylesheet" href="https:////at.alicdn.com/t/font_746649_x1rivf5f5.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_746649_x1rivf5f5.css">
<link rel="stylesheet" href="https://lib.baomitu.com/element-ui/2.11.1/theme-chalk/index.css">
<title>唱唱启蒙-后台</title>
</head>
<body>
<!-- 先引入 Vue -->
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
<!-- <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script> -->
<script src="https://unpkg.com/vuex@3.0.1"></script>
<script src="https://lib.baomitu.com/vue/2.5.17/vue.min.js"></script>
<script src="https://lib.baomitu.com/vuex/3.0.1/vuex.min.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://lib.baomitu.com/axios/0.18.0/axios.min.js"></script>
<script src="https://lib.baomitu.com/element-ui/2.7.2/index.js"></script>
<div id="app"></div>
</body>
......
<template>
<div class="address">
<section style="width:100%; height: 100%;">
<el-form :model='form' class='demo-ruleForm' ref='form' label-width="100px" :rules='rules'>
<el-row :gutter='20'>
<el-col :span='20'>
<el-form-item prop='name' label="收货人">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter='20'>
<el-col :span='20'>
<el-form-item prop='mobile' label="手机号">
<el-input v-model="form.mobile"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter='20' class='address'>
<el-col :span='20'>
<el-form-item prop='province' label="省">
<el-select v-model='form.province' placeholder='请选择省' @change='proChange'>
<el-option v-for='item in provinces' :key='item.value' :value='item.value' :label="item.label">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter='20' class='address'>
<el-col :span='20'>
<el-form-item prop='city' label="市">
<el-select v-model='form.city' placeholder='请选择市' @change='cityChange'>
<el-option v-for='item in cities' :key='item.value' :value='item.value' :label="item.label">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter='20' class='address'>
<el-col :span='20'>
<el-form-item prop='district' label="县/区">
<el-select v-model='form.district' placeholder='请选择区/县' @change='districtChange'>
<el-option v-for='item in districts' :key='item.value' :value='item.value' :label="item.label">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter='20' class='address'>
<el-col :span='20'>
<el-form-item prop='detail' label="详细地址">
<el-input placeholder='请填写详细地址' :number='true' v-model='form.detail'>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</section>
<section style="width:100%; height: 100%;">
<el-form :model='form' class='demo-ruleForm' ref='form' label-width="100px" :rules='rules'>
<el-form-item prop='name' label="收货人">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item prop='mobile' label="手机号">
<el-input v-model="form.mobile"></el-input>
</el-form-item>
<el-form-item prop='province' label="省">
<el-select v-model='form.province' placeholder='请选择省' @change='proChange'>
<el-option v-for='item in provinces' :key='item.value' :value='item.value' :label="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item prop='city' label="市">
<el-select v-model='form.city' placeholder='请选择市' @change='cityChange'>
<el-option v-for='item in cities' :key='item.value' :value='item.value' :label="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item prop='district' label="县/区">
<el-select v-model='form.district' placeholder='请选择区/县' @change='districtChange'>
<el-option v-for='item in districts' :key='item.value' :value='item.value' :label="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item prop='detail' label="详细地址">
<el-input placeholder='请填写详细地址' :number='true' v-model='form.detail'>
</el-input>
</el-form-item>
</el-form>
</section>
</div>
</template>
<script>
import Address from './addr.js'
let type = 1
// let provinceValue = 2
// let cityValue = 52
// let provinceValue = 2
// let cityValue = 52
//根据apid查找对象
function findcity(item) {
return item.type == type;
}
function findChildren(list, value) {
let filtered = list.filter((item) => {
return item.value === value
......@@ -77,6 +55,7 @@
// console.log(filtered)
return filtered[0].children
}
//筛选出各省级对象
let pObj = Address.filter(findcity)
......@@ -91,111 +70,111 @@
console.log(this.form)
},
computed: {
cities: function () {
if(this.form.province){
return findChildren(pObj, this.form.province)
} else {
return []
}
},
districts: function () {
if(this.form.city){
return findChildren(this.cities, this.form.city)
} else {
return []
}
cities: function () {
if (this.form.province) {
return findChildren(pObj, this.form.province)
} else {
return []
}
},
districts: function () {
if (this.form.city) {
return findChildren(this.cities, this.form.city)
} else {
return []
}
}
},
data() {
return {
rules: {
province: [{ required: true, message: '请选择省份', trigger: 'change' }],
city: [{ required: true, message: '请选择城市', trigger: 'change' }],
district: [{ required: true, message: '请选择区/县', trigger: 'change' }],
detail: [{ required: true, message: '请填写详细地址', trigger: 'change' }],
name: [{ required: true, message: '请填写收货人', trigger: 'change' }],
mobile: [{ required: true, message: '请填写手机号', trigger: 'change' }]
},
form: {
province: this.province,
city: this.city,
district: this.district,
detail: this.detail,
name: this.name,
mobile: this.mobile
},
provinces: pObj
rules: {
province: [{required: true, message: '请选择省份', trigger: 'change'}],
city: [{required: true, message: '请选择城市', trigger: 'change'}],
district: [{required: true, message: '请选择区/县', trigger: 'change'}],
detail: [{required: true, message: '请填写详细地址', trigger: 'change'}],
name: [{required: true, message: '请填写收货人', trigger: 'change'}],
mobile: [{required: true, message: '请填写手机号', trigger: 'change'}]
},
form: {
province: this.province,
city: this.city,
district: this.district,
detail: this.detail,
name: this.name,
mobile: this.mobile
},
provinces: pObj
}
},
watch: {
form: {
handler: function (val) {
this.$emit('change', val);
console.log(this.form)
},
deep: true
form: {
handler: function (val) {
this.$emit('change', val);
console.log(this.form)
},
name: {
handler: function (val) {
console.log(val)
// this.$emit('change', val);
// console.log(this.city)
// if(this.province){
// this.form.province = this.province
// }
// if(this.city){
// this.form.city = this.city
// }
// if(this.district){
// this.form.district = this.district
// }
// if(this.detail){
// this.form.detail = this.detail
// }
// if(this.name){
// this.form.name = this.name
// }
// if(this.mobile){
// this.form.mobile = this.mobile
// }
// console.log(this.form)
this.form={
province: this.province,
city: this.city,
district: this.district,
detail: this.detail,
name: this.name,
mobile: this.mobile
}
console.log(this.form)
},
deep: true
}
deep: true
},
name: {
handler: function (val) {
console.log(val)
// this.$emit('change', val);
// console.log(this.city)
// if(this.province){
// this.form.province = this.province
// }
// if(this.city){
// this.form.city = this.city
// }
// if(this.district){
// this.form.district = this.district
// }
// if(this.detail){
// this.form.detail = this.detail
// }
// if(this.name){
// this.form.name = this.name
// }
// if(this.mobile){
// this.form.mobile = this.mobile
// }
// console.log(this.form)
this.form = {
province: this.province,
city: this.city,
district: this.district,
detail: this.detail,
name: this.name,
mobile: this.mobile
}
console.log(this.form)
},
deep: true
}
},
methods: {
proChange: function (val, oldVal) {
if (oldVal) {
this.form.city = '';
this.form.district = '';
}
// console.log(this.val)
// console.log(this.oldVal)
// console.log(this.form)
this.form.city = this.cities[0].value;
this.form.district = this.districts[0].value;
console.log(this.province)
},
cityChange: function (val, oldVal) {
this.form.district = this.districts[0].value;
},
districtChange: function (val, oldVal) {
if (oldVal) {
this.form.detail = '';
}
},
detailChange: function (val) {
console.log(val);
proChange: function (val, oldVal) {
if (oldVal) {
this.form.city = '';
this.form.district = '';
}
// console.log(this.val)
// console.log(this.oldVal)
// console.log(this.form)
this.form.city = this.cities[0].value;
this.form.district = this.districts[0].value;
console.log(this.province)
},
cityChange: function (val, oldVal) {
this.form.district = this.districts[0].value;
},
districtChange: function (val, oldVal) {
if (oldVal) {
this.form.detail = '';
}
},
detailChange: function (val) {
console.log(val);
}
}
}
......
......@@ -5,119 +5,96 @@
append-to-body
:visible.sync="newdialogObj.show"
width="70%">
<el-form ref="form" :model="form" label-width="120px" :rules="rules">
<el-row>
<el-col :span="10">
<el-form-item label="商品名称" prop="goods_id">
<el-select v-model="form.goods_id" placeholder="请选择" @change="onOptionChange">
<el-option
v-for="(data,index) in goodsList"
:key="index"
:label="data | filterGoods"
:value="data.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<!-- <el-col :span="10">
<el-form-item label="期数名称" prop="periods_id">
<el-select v-model="form.periods_id" placeholder="请选择">
<el-option
v-for="(data,index) in periodsList"
:key="index"
:label="data.title"
:value="data.id">
</el-option>
</el-select>
</el-form-item>
</el-col> -->
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="用户ID" prop="user_id" >
<el-input width='100' v-model="form.user_id"></el-input>
<el-button type="success" @click="onAddUser">+添加用户</el-button>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="添加推广人" >
<!-- <el-input v-model="form.invite_id"></el-input> -->
<el-select
v-model="form.invite_id"
filterable
clearable
placeholder="请输入名称"
:remote-method="remoteMethod"
>
<el-option
v-for="item in teacherList"
:key="item.id"
:label="item.name"
:value="item.user_id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="支付类型" prop="order_type">
<el-select v-model="form.order_type" placeholder="请选择">
<el-option
v-for="item in buyWayOptioms"
:key="item.id"
:label="item.name"
:value="item.id"
:disabled="item.disabled">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="实付金额(元)" prop="money" >
<el-input-number v-model="form.money"></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="支付时间" prop="pay_at" >
<el-date-picker
v-model="form.pay_at"
type="datetime"
:picker-options="pickerOptions1"
default-time="12:00:00"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="备注">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
</el-col>
<el-col :span="10" v-if="form.order_type!=2">
<el-form-item label="订单号">
<el-input v-model="form.out_trade_no"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<vue-address :province="form.province" :city="form.city" :district="form.district" :detail="form.address" :mobile="form.receive_mobile" :name="form.receive_name" @change="handlerAddressChange">
</vue-address>
</el-col>
</el-row>
</el-form>
<el-form ref="form" :model="form" label-width="120px" :rules="rules">
<el-form-item label="商品名称" prop="goods_id">
<el-select v-model="form.goods_id" placeholder="请选择" @change="onOptionChange">
<el-option
v-for="(data,index) in goodsList"
:key="index"
:label="data | filterGoods"
:value="data.id">
</el-option>
</el-select>
</el-form-item>
<!-- <el-col :span="10">
<el-form-item label="期数名称" prop="periods_id">
<el-select v-model="form.periods_id" placeholder="请选择">
<el-option
v-for="(data,index) in periodsList"
:key="index"
:label="data.title"
:value="data.id">
</el-option>
</el-select>
</el-form-item>
</el-col> -->
<el-form-item label="用户ID" prop="user_id">
<el-input width='100' v-model="form.user_id"></el-input>
<el-button type="success" @click="onAddUser">+添加用户</el-button>
</el-form-item>
<el-form-item label="添加推广人">
<!-- <el-input v-model="form.invite_id"></el-input> -->
<el-select
v-model="form.invite_id"
filterable
clearable
placeholder="请输入名称"
:remote-method="remoteMethod"
>
<el-option
v-for="item in teacherList"
:key="item.id"
:label="item.name"
:value="item.user_id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="支付类型" prop="order_type">
<el-select v-model="form.order_type" placeholder="请选择">
<el-option
v-for="item in buyWayOptioms"
:key="item.id"
:label="item.name"
:value="item.id"
:disabled="item.disabled">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="实付金额(元)" prop="money">
<el-input-number v-model="form.money"></el-input-number>
</el-form-item>
<el-form-item label="支付时间" prop="pay_at">
<el-date-picker
v-model="form.pay_at"
type="datetime"
:picker-options="pickerOptions1"
default-time="12:00:00"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item label="订单号">
<el-input v-model="form.out_trade_no"></el-input>
</el-form-item>
<vue-address :province="form.province" :city="form.city" :district="form.district" :detail="form.address" :mobile="form.receive_mobile" :name="form.receive_name" @change="handlerAddressChange">
</vue-address>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="newdialogObj.show = false">取 消</el-button>
<el-button type="primary" @click="saveAddOrder(form)">确定</el-button>
</div>
<el-dialog :modal="false" :visible.sync="addShow" >
<el-dialog :modal="false" :visible.sync="addShow">
<el-form label-width="90px">
<!--<el-form-item label="用户id">-->
<!--<el-input v-model="addId"></el-input>-->
<!--<el-input v-model="addId"></el-input>-->
<!--</el-form-item>-->
<el-row>
<el-col :span="8">
......
......@@ -2,19 +2,15 @@
<div class="admin-refresh" v-loading="loading">
<div class="section-search search-single">
<el-form ref="searchFrom" :model="searchFrom" label-width="80px" inline>
<el-form label-width="80px" inline>
<el-form-item>
<!--<el-cascader
style="width: 280px" placeholder="选择标签"
:props="searchProps" clearable></el-cascader>-->
<el-input placeholder="输入标签名搜索" v-model="filterText"></el-input>
</el-form-item>
<el-form-item>
<div class="search-btn-wrapper">
<!--<el-button @click="onSearch" type="primary" plain>搜索</el-button>-->
<el-button @click="dialogToggle" type="warning" plain>高级搜索</el-button>
<el-button @click="dialogUser.show = !dialogUser.show;" type="warning" plain>高级搜索</el-button>
<!--<el-button v-if="!$store.state.readonly" @click="onAdd" type="success" plain>新增标签</el-button>-->
</div>
</el-form-item>
......@@ -25,7 +21,7 @@
<el-tree
:data="treeData"
node-key="id" ref="tagTree"
:props="tagProps"
:props="{children: 'children', label: 'name'}"
:indent="40"
@node-expand="tagExpand"
@node-collapse="tagCollapse"
......@@ -52,38 +48,46 @@
</el-tree>
</div>
<el-dialog :title="dialog.title" :visible.sync="dialog.show" width="800px" title="高级搜索">
<el-dialog :title="dialog.title" :visible.sync="dialog.show" width="500px">
<el-form ref="dialogForm" :rules="dialog.form.rules" :model="dialog.form" label-width="100px">
<el-form-item label="ID:" prop="id" style="display: none;">
<el-input v-model="dialog.form.id" maxlength="10" type="text"></el-input>
</el-form-item>
<el-form-item label="PID:" prop="pid" style="display: none;">
<el-input v-model="dialog.form.pid" maxlength="10" type="text"></el-input>
</el-form-item>
<el-form-item label="标签名称:" prop="name">
<el-input v-model="dialog.form.name" maxlength="10" type="text"></el-input>
</el-form-item>
<el-form-item label="标签备注:" prop="cover">
<el-input v-model="dialog.form.cover" maxlength="50" type="textarea" :rows="3"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogToggle">取消</el-button>
<el-button type="primary" @click="dialogSave">确定</el-button>
</span>
</el-dialog>
<el-dialog :visible.sync="dialogUser.show" width="800px" title="高级搜索">
<div style="display: flex;margin-bottom: 20px;">
<el-button style="margin-right: 20px; width: 70px;" type="primary" v-if="!$store.state.readonly && $store.state.export" plain :disabled="!tableData.length" @click="exportExcel">导出</el-button>
<el-cascader
style="width: calc(100% - 90px)" placeholder="选择标签" clearable @change="conditionsChange"
:options="treeDataOrigin" :props="{ value: 'id', label: 'name', multiple: true, checkStrictly: true }"></el-cascader>
</div>
<el-table :data="tableData" border>
<el-table-column className="f-c" label="用户">
<template slot-scope="scope">
<img class="avatar" :src="scope.row.avatar">{{scope.row.nickname}}<br>(ID:{{scope.row.user_id}})
</template>
</el-table-column>
<el-table-column prop="baby_name" label="宝宝名称"></el-table-column>
<el-table-column prop="birthday" label="宝宝生日"></el-table-column>
<el-table-column prop="sex" label="宝宝性别" :formatter="sexFormatter"></el-table-column>
<el-table-column prop="mobile" label="手机号码"></el-table-column>
<!--<el-table-column label="操作" v-if="!$store.state.readonly" width="100">
<template slot-scope="scope">
<el-button size="mini" plain type="primary" @click="onEdit(scope.row)">编辑</el-button>
</template>
</el-table-column>-->
</el-table>
<page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
<!--<span slot="footer" class="dialog-footer">
<el-button @click="dialogToggle">取消</el-button>
<el-button type="primary" @click="dialogSave">确定</el-button>
</span>-->
</el-dialog>
</div>
</template>
......@@ -99,28 +103,15 @@
conditions: [],
filterText: '',
tagProps: {
children: 'children',
label: 'name'
},
tagExpanded: [0],
tagExpandedWait: '',
searchFrom: {
id: '',
name: '',
mobile: '',
id_card: '',
type: '',
status: '',
start_in: '',
over_in: ''
},
startTime: [],
tableData: [],
treeData: [],
treeDataOrigin: [],
dialogUser: {
show: false
},
dialog: {
title: '',
show: false,
......@@ -173,19 +164,18 @@
this.getUserData()
},
getUserData(){
getUserData(){ // 搜索用户
let json = {
conditions: JSON.stringify(this.conditions),
limit: this.limit,
page: this.nowPage
}
getTagUserApi(json).then(res=>{
this.tableData = res.list
})
},
filterNode(value, data) {
filterNode(value, data) { // 搜索标签
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
......@@ -239,21 +229,20 @@
});
},
tagExpand(data, node, el) {
tagExpand(data, node, el) { // 标签展开(记录树的状态)
//console.log(node)
if (node.expanded) {
this.tagExpanded.push(node.data.id)
}
},
tagCollapse(data, node, el) {
tagCollapse(data, node, el) { // 标签收起(记录树的状态)
//console.log(node)
if (node.expanded) {
this.tagExpanded.splice(this.tagExpanded.findIndex(item => item == node.data.id), 1)
}
},
getData() {
getData() { // 获取标签
getTagApi().then(res => {
this.treeDataOrigin = res;
this.treeData = [{
......@@ -266,7 +255,6 @@
weight: 0,
}]
});
},
onAdd(node) {
......@@ -281,10 +269,9 @@
});
},
onEdit(node,data) {
console.log(el)
console.log(node)
console.log(data)
onEdit(node, data) {
//console.log(node)
//console.log(data)
let item = node.data;
this.dialogToggle();
this.dialogReset();
......@@ -302,7 +289,7 @@
},
conditionsChange(val){
console.log(val);
//console.log(val);
let arr = [];
if(val.length) {
val.forEach(v => {
......
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