You've already forked guangan-mp
1.0.0
This commit is contained in:
File diff suppressed because one or more lines are too long
@ -0,0 +1,622 @@
|
||||
export default {
|
||||
props: {
|
||||
localdata: {
|
||||
type: [Array, Object],
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
spaceInfo: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
collection: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
action: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
field: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
orderby: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
where: {
|
||||
type: [String, Object],
|
||||
default: ''
|
||||
},
|
||||
pageData: {
|
||||
type: String,
|
||||
default: 'add'
|
||||
},
|
||||
pageCurrent: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 500
|
||||
},
|
||||
getcount: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
getone: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
gettree: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
manual: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: [Array, String, Number],
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
modelValue: {
|
||||
type: [Array, String, Number],
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
preload: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
stepSearh: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
selfField: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
parentField: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
map: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
text: "text",
|
||||
value: "value"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
errorMessage: '',
|
||||
loadMore: {
|
||||
contentdown: '',
|
||||
contentrefresh: '',
|
||||
contentnomore: ''
|
||||
},
|
||||
dataList: [],
|
||||
selected: [],
|
||||
selectedIndex: 0,
|
||||
page: {
|
||||
current: this.pageCurrent,
|
||||
size: this.pageSize,
|
||||
count: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isLocalData() {
|
||||
return !this.collection.length;
|
||||
},
|
||||
isCloudData() {
|
||||
return this.collection.length > 0;
|
||||
},
|
||||
isCloudDataList() {
|
||||
return (this.isCloudData && (!this.parentField && !this.selfField));
|
||||
},
|
||||
isCloudDataTree() {
|
||||
return (this.isCloudData && this.parentField && this.selfField);
|
||||
},
|
||||
dataValue() {
|
||||
let isModelValue = Array.isArray(this.modelValue) ? (this.modelValue.length > 0) : (this.modelValue !== null ||
|
||||
this.modelValue !== undefined);
|
||||
return isModelValue ? this.modelValue : this.value;
|
||||
},
|
||||
hasValue() {
|
||||
if (typeof this.dataValue === 'number') {
|
||||
return true
|
||||
}
|
||||
return (this.dataValue != null) && (this.dataValue.length > 0)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$watch(() => {
|
||||
var al = [];
|
||||
['pageCurrent',
|
||||
'pageSize',
|
||||
'spaceInfo',
|
||||
'value',
|
||||
'modelValue',
|
||||
'localdata',
|
||||
'collection',
|
||||
'action',
|
||||
'field',
|
||||
'orderby',
|
||||
'where',
|
||||
'getont',
|
||||
'getcount',
|
||||
'gettree'
|
||||
].forEach(key => {
|
||||
al.push(this[key])
|
||||
});
|
||||
return al
|
||||
}, (newValue, oldValue) => {
|
||||
let needReset = false
|
||||
for (let i = 2; i < newValue.length; i++) {
|
||||
if (newValue[i] != oldValue[i]) {
|
||||
needReset = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (newValue[0] != oldValue[0]) {
|
||||
this.page.current = this.pageCurrent
|
||||
}
|
||||
this.page.size = this.pageSize
|
||||
|
||||
this.onPropsChange()
|
||||
})
|
||||
this._treeData = []
|
||||
},
|
||||
methods: {
|
||||
onPropsChange() {
|
||||
this._treeData = [];
|
||||
},
|
||||
|
||||
// 填充 pickview 数据
|
||||
async loadData() {
|
||||
if (this.isLocalData) {
|
||||
this.loadLocalData();
|
||||
} else if (this.isCloudDataList) {
|
||||
this.loadCloudDataList();
|
||||
} else if (this.isCloudDataTree) {
|
||||
this.loadCloudDataTree();
|
||||
}
|
||||
},
|
||||
|
||||
// 加载本地数据
|
||||
async loadLocalData() {
|
||||
this._treeData = [];
|
||||
this._extractTree(this.localdata, this._treeData);
|
||||
|
||||
let inputValue = this.dataValue;
|
||||
if (inputValue === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (Array.isArray(inputValue)) {
|
||||
inputValue = inputValue[inputValue.length - 1];
|
||||
if (typeof inputValue === 'object' && inputValue[this.map.value]) {
|
||||
inputValue = inputValue[this.map.value];
|
||||
}
|
||||
}
|
||||
|
||||
this.selected = this._findNodePath(inputValue, this.localdata);
|
||||
},
|
||||
|
||||
// 加载 Cloud 数据 (单列)
|
||||
async loadCloudDataList() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
let response = await this.getCommand();
|
||||
let responseData = response.result.data;
|
||||
|
||||
this._treeData = responseData;
|
||||
|
||||
this._updateBindData();
|
||||
this._updateSelected();
|
||||
|
||||
this.onDataChange();
|
||||
} catch (e) {
|
||||
this.errorMessage = e;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 加载 Cloud 数据 (树形)
|
||||
async loadCloudDataTree() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
let commandOptions = {
|
||||
field: this._cloudDataPostField(),
|
||||
where: this._cloudDataTreeWhere()
|
||||
};
|
||||
if (this.gettree) {
|
||||
commandOptions.startwith = `${this.selfField}=='${this.dataValue}'`;
|
||||
}
|
||||
|
||||
let response = await this.getCommand(commandOptions);
|
||||
let responseData = response.result.data;
|
||||
|
||||
this._treeData = responseData;
|
||||
this._updateBindData();
|
||||
this._updateSelected();
|
||||
|
||||
this.onDataChange();
|
||||
} catch (e) {
|
||||
this.errorMessage = e;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 加载 Cloud 数据 (节点)
|
||||
async loadCloudDataNode(callback) {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
let commandOptions = {
|
||||
field: this._cloudDataPostField(),
|
||||
where: this._cloudDataNodeWhere()
|
||||
};
|
||||
|
||||
let response = await this.getCommand(commandOptions);
|
||||
let responseData = response.result.data;
|
||||
|
||||
callback(responseData);
|
||||
} catch (e) {
|
||||
this.errorMessage = e;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 回显 Cloud 数据
|
||||
getCloudDataValue() {
|
||||
if (this.isCloudDataList) {
|
||||
return this.getCloudDataListValue();
|
||||
}
|
||||
|
||||
if (this.isCloudDataTree) {
|
||||
return this.getCloudDataTreeValue();
|
||||
}
|
||||
},
|
||||
|
||||
// 回显 Cloud 数据 (单列)
|
||||
getCloudDataListValue() {
|
||||
// 根据 field's as value标识匹配 where 条件
|
||||
let where = [];
|
||||
let whereField = this._getForeignKeyByField();
|
||||
if (whereField) {
|
||||
where.push(`${whereField} == '${this.dataValue}'`)
|
||||
}
|
||||
|
||||
where = where.join(' || ');
|
||||
|
||||
if (this.where) {
|
||||
where = `(${this.where}) && (${where})`
|
||||
}
|
||||
|
||||
return this.getCommand({
|
||||
field: this._cloudDataPostField(),
|
||||
where
|
||||
}).then((res) => {
|
||||
this.selected = res.result.data;
|
||||
return res.result.data;
|
||||
});
|
||||
},
|
||||
|
||||
// 回显 Cloud 数据 (树形)
|
||||
getCloudDataTreeValue() {
|
||||
return this.getCommand({
|
||||
field: this._cloudDataPostField(),
|
||||
getTreePath: {
|
||||
startWith: `${this.selfField}=='${this.dataValue}'`
|
||||
}
|
||||
}).then((res) => {
|
||||
let treePath = [];
|
||||
this._extractTreePath(res.result.data, treePath);
|
||||
this.selected = treePath;
|
||||
return treePath;
|
||||
});
|
||||
},
|
||||
|
||||
getCommand(options = {}) {
|
||||
/* eslint-disable no-undef */
|
||||
let db = uniCloud.database(this.spaceInfo)
|
||||
|
||||
const action = options.action || this.action
|
||||
if (action) {
|
||||
db = db.action(action)
|
||||
}
|
||||
|
||||
const collection = options.collection || this.collection
|
||||
db = db.collection(collection)
|
||||
|
||||
const where = options.where || this.where
|
||||
if (!(!where || !Object.keys(where).length)) {
|
||||
db = db.where(where)
|
||||
}
|
||||
|
||||
const field = options.field || this.field
|
||||
if (field) {
|
||||
db = db.field(field)
|
||||
}
|
||||
|
||||
const orderby = options.orderby || this.orderby
|
||||
if (orderby) {
|
||||
db = db.orderBy(orderby)
|
||||
}
|
||||
|
||||
const current = options.pageCurrent !== undefined ? options.pageCurrent : this.page.current
|
||||
const size = options.pageSize !== undefined ? options.pageSize : this.page.size
|
||||
const getCount = options.getcount !== undefined ? options.getcount : this.getcount
|
||||
const getTree = options.gettree !== undefined ? options.gettree : this.gettree
|
||||
|
||||
const getOptions = {
|
||||
getCount,
|
||||
getTree
|
||||
}
|
||||
if (options.getTreePath) {
|
||||
getOptions.getTreePath = options.getTreePath
|
||||
}
|
||||
|
||||
db = db.skip(size * (current - 1)).limit(size).get(getOptions)
|
||||
|
||||
return db
|
||||
},
|
||||
|
||||
_cloudDataPostField() {
|
||||
let fields = [this.field];
|
||||
if (this.parentField) {
|
||||
fields.push(`${this.parentField} as parent_value`);
|
||||
}
|
||||
return fields.join(',');
|
||||
},
|
||||
|
||||
_cloudDataTreeWhere() {
|
||||
let result = []
|
||||
let selected = this.selected
|
||||
let parentField = this.parentField
|
||||
if (parentField) {
|
||||
result.push(`${parentField} == null || ${parentField} == ""`)
|
||||
}
|
||||
if (selected.length) {
|
||||
for (var i = 0; i < selected.length - 1; i++) {
|
||||
result.push(`${parentField} == '${selected[i].value}'`)
|
||||
}
|
||||
}
|
||||
|
||||
let where = []
|
||||
if (this.where) {
|
||||
where.push(`(${this.where})`)
|
||||
}
|
||||
|
||||
if (result.length) {
|
||||
where.push(`(${result.join(' || ')})`)
|
||||
}
|
||||
|
||||
return where.join(' && ')
|
||||
},
|
||||
|
||||
_cloudDataNodeWhere() {
|
||||
let where = []
|
||||
let selected = this.selected;
|
||||
if (selected.length) {
|
||||
where.push(`${this.parentField} == '${selected[selected.length - 1].value}'`);
|
||||
}
|
||||
|
||||
where = where.join(' || ');
|
||||
|
||||
if (this.where) {
|
||||
return `(${this.where}) && (${where})`
|
||||
}
|
||||
|
||||
return where
|
||||
},
|
||||
|
||||
_getWhereByForeignKey() {
|
||||
let result = []
|
||||
let whereField = this._getForeignKeyByField();
|
||||
if (whereField) {
|
||||
result.push(`${whereField} == '${this.dataValue}'`)
|
||||
}
|
||||
|
||||
if (this.where) {
|
||||
return `(${this.where}) && (${result.join(' || ')})`
|
||||
}
|
||||
|
||||
return result.join(' || ')
|
||||
},
|
||||
|
||||
_getForeignKeyByField() {
|
||||
let fields = this.field.split(',');
|
||||
let whereField = null;
|
||||
for (let i = 0; i < fields.length; i++) {
|
||||
const items = fields[i].split('as');
|
||||
if (items.length < 2) {
|
||||
continue;
|
||||
}
|
||||
if (items[1].trim() === 'value') {
|
||||
whereField = items[0].trim();
|
||||
break;
|
||||
}
|
||||
}
|
||||
return whereField;
|
||||
},
|
||||
|
||||
_updateBindData(node) {
|
||||
const {
|
||||
dataList,
|
||||
hasNodes
|
||||
} = this._filterData(this._treeData, this.selected)
|
||||
|
||||
let isleaf = this._stepSearh === false && !hasNodes
|
||||
|
||||
if (node) {
|
||||
node.isleaf = isleaf
|
||||
}
|
||||
|
||||
this.dataList = dataList
|
||||
this.selectedIndex = dataList.length - 1
|
||||
|
||||
if (!isleaf && this.selected.length < dataList.length) {
|
||||
this.selected.push({
|
||||
value: null,
|
||||
text: "请选择"
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
isleaf,
|
||||
hasNodes
|
||||
}
|
||||
},
|
||||
|
||||
_updateSelected() {
|
||||
let dl = this.dataList
|
||||
let sl = this.selected
|
||||
let textField = this.map.text
|
||||
let valueField = this.map.value
|
||||
for (let i = 0; i < sl.length; i++) {
|
||||
let value = sl[i].value
|
||||
let dl2 = dl[i]
|
||||
for (let j = 0; j < dl2.length; j++) {
|
||||
let item2 = dl2[j]
|
||||
if (item2[valueField] === value) {
|
||||
sl[i].text = item2[textField]
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_filterData(data, paths) {
|
||||
let dataList = []
|
||||
let hasNodes = true
|
||||
|
||||
dataList.push(data.filter((item) => {
|
||||
return (item.parent_value === null || item.parent_value === undefined || item.parent_value === '')
|
||||
}))
|
||||
for (let i = 0; i < paths.length; i++) {
|
||||
let value = paths[i].value
|
||||
let nodes = data.filter((item) => {
|
||||
return item.parent_value === value
|
||||
})
|
||||
|
||||
if (nodes.length) {
|
||||
dataList.push(nodes)
|
||||
} else {
|
||||
hasNodes = false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
dataList,
|
||||
hasNodes
|
||||
}
|
||||
},
|
||||
|
||||
_extractTree(nodes, result, parent_value) {
|
||||
let list = result || []
|
||||
let valueField = this.map.value
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
let node = nodes[i]
|
||||
|
||||
let child = {}
|
||||
for (let key in node) {
|
||||
if (key !== 'children') {
|
||||
child[key] = node[key]
|
||||
}
|
||||
}
|
||||
if (parent_value !== null && parent_value !== undefined && parent_value !== '') {
|
||||
child.parent_value = parent_value
|
||||
}
|
||||
result.push(child)
|
||||
|
||||
let children = node.children
|
||||
if (children) {
|
||||
this._extractTree(children, result, node[valueField])
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_extractTreePath(nodes, result) {
|
||||
let list = result || []
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
let node = nodes[i]
|
||||
|
||||
let child = {}
|
||||
for (let key in node) {
|
||||
if (key !== 'children') {
|
||||
child[key] = node[key]
|
||||
}
|
||||
}
|
||||
result.push(child)
|
||||
|
||||
let children = node.children
|
||||
if (children) {
|
||||
this._extractTreePath(children, result)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_findNodePath(key, nodes, path = []) {
|
||||
let textField = this.map.text
|
||||
let valueField = this.map.value
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
let node = nodes[i]
|
||||
let children = node.children
|
||||
let text = node[textField]
|
||||
let value = node[valueField]
|
||||
|
||||
path.push({
|
||||
value,
|
||||
text
|
||||
})
|
||||
|
||||
if (value === key) {
|
||||
return path
|
||||
}
|
||||
|
||||
if (children) {
|
||||
const p = this._findNodePath(key, children, path)
|
||||
if (p.length) {
|
||||
return p
|
||||
}
|
||||
}
|
||||
|
||||
path.pop()
|
||||
}
|
||||
return []
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,693 @@
|
||||
export type PaginationType = {
|
||||
current : number,
|
||||
size : number,
|
||||
count : number
|
||||
}
|
||||
|
||||
export type LoadMoreType = {
|
||||
contentdown : string,
|
||||
contentrefresh : string,
|
||||
contentnomore : string
|
||||
}
|
||||
|
||||
export type SelectedItemType = {
|
||||
name : string,
|
||||
value : string,
|
||||
}
|
||||
|
||||
export type GetCommandOptions = {
|
||||
collection ?: UTSJSONObject,
|
||||
field ?: string,
|
||||
orderby ?: string,
|
||||
where ?: any,
|
||||
pageData ?: string,
|
||||
pageCurrent ?: number,
|
||||
pageSize ?: number,
|
||||
getCount ?: boolean,
|
||||
getTree ?: any,
|
||||
getTreePath ?: UTSJSONObject,
|
||||
startwith ?: string,
|
||||
limitlevel ?: number,
|
||||
groupby ?: string,
|
||||
groupField ?: string,
|
||||
distinct ?: boolean,
|
||||
pageIndistinct ?: boolean,
|
||||
foreignKey ?: string,
|
||||
loadtime ?: string,
|
||||
manual ?: boolean
|
||||
}
|
||||
|
||||
const DefaultSelectedNode = {
|
||||
text: '请选择',
|
||||
value: ''
|
||||
}
|
||||
|
||||
export const dataPicker = defineMixin({
|
||||
props: {
|
||||
localdata: {
|
||||
type: Array as PropType<Array<UTSJSONObject>>,
|
||||
default: [] as Array<UTSJSONObject>
|
||||
},
|
||||
collection: {
|
||||
type: Object,
|
||||
default: ''
|
||||
},
|
||||
field: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
orderby: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
where: {
|
||||
type: Object,
|
||||
default: ''
|
||||
},
|
||||
pageData: {
|
||||
type: String,
|
||||
default: 'add'
|
||||
},
|
||||
pageCurrent: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
getcount: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
gettree: {
|
||||
type: Object,
|
||||
default: ''
|
||||
},
|
||||
gettreepath: {
|
||||
type: Object,
|
||||
default: ''
|
||||
},
|
||||
startwith: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
limitlevel: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
groupby: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
groupField: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
distinct: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
pageIndistinct: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
foreignKey: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
loadtime: {
|
||||
type: String,
|
||||
default: 'auto'
|
||||
},
|
||||
manual: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
preload: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
stepSearh: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
selfField: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
parentField: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: Object,
|
||||
default: ''
|
||||
},
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: ''
|
||||
},
|
||||
defaultProps: {
|
||||
type: Object as PropType<UTSJSONObject>,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
error: null as UniCloudError | null,
|
||||
treeData: [] as Array<UTSJSONObject>,
|
||||
selectedIndex: 0,
|
||||
selectedNodes: [] as Array<UTSJSONObject>,
|
||||
selectedPages: [] as Array<UTSJSONObject>[],
|
||||
selectedValue: '',
|
||||
selectedPaths: [] as Array<UTSJSONObject>,
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 20,
|
||||
count: 0
|
||||
} as PaginationType
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
mappingTextName() : string {
|
||||
// TODO
|
||||
return (this.defaultProps != null) ? this.defaultProps!.getString('text', 'text') : 'text'
|
||||
},
|
||||
mappingValueName() : string {
|
||||
// TODO
|
||||
return (this.defaultProps != null) ? this.defaultProps!.getString('value', 'value') : 'value'
|
||||
},
|
||||
currentDataList() : Array<UTSJSONObject> {
|
||||
if (this.selectedIndex > this.selectedPages.length - 1) {
|
||||
return [] as Array<UTSJSONObject>
|
||||
}
|
||||
return this.selectedPages[this.selectedIndex]
|
||||
},
|
||||
isLocalData() : boolean {
|
||||
return this.localdata.length > 0
|
||||
},
|
||||
isCloudData() : boolean {
|
||||
return this._checkIsNotNull(this.collection)
|
||||
},
|
||||
isCloudDataList() : boolean {
|
||||
return (this.isCloudData && (this.parentField.length == 0 && this.selfField.length == 0))
|
||||
},
|
||||
isCloudDataTree() : boolean {
|
||||
return (this.isCloudData && this.parentField.length > 0 && this.selfField.length > 0)
|
||||
},
|
||||
dataValue() : any {
|
||||
return this.hasModelValue ? this.modelValue : this.value
|
||||
},
|
||||
hasCloudTreeData() : boolean {
|
||||
return this.treeData.length > 0
|
||||
},
|
||||
hasModelValue() : boolean {
|
||||
if (typeof this.modelValue == 'string') {
|
||||
const valueString = this.modelValue as string
|
||||
return (valueString.length > 0)
|
||||
} else if (Array.isArray(this.modelValue)) {
|
||||
const valueArray = this.modelValue as Array<string>
|
||||
return (valueArray.length > 0)
|
||||
}
|
||||
return false
|
||||
},
|
||||
hasCloudDataValue() : boolean {
|
||||
if (typeof this.dataValue == 'string') {
|
||||
const valueString = this.dataValue as string
|
||||
return (valueString.length > 0)
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.pagination.current = this.pageCurrent
|
||||
this.pagination.size = this.pageSize
|
||||
|
||||
this.$watch(
|
||||
() : any => [
|
||||
this.pageCurrent,
|
||||
this.pageSize,
|
||||
this.localdata,
|
||||
this.value,
|
||||
this.collection,
|
||||
this.field,
|
||||
this.getcount,
|
||||
this.orderby,
|
||||
this.where,
|
||||
this.groupby,
|
||||
this.groupField,
|
||||
this.distinct
|
||||
],
|
||||
(newValue : Array<any>, oldValue : Array<any>) => {
|
||||
this.pagination.size = this.pageSize
|
||||
if (newValue[0] !== oldValue[0]) {
|
||||
this.pagination.current = this.pageCurrent
|
||||
}
|
||||
|
||||
this.onPropsChange()
|
||||
}
|
||||
)
|
||||
},
|
||||
methods: {
|
||||
onPropsChange() {
|
||||
this.selectedIndex = 0
|
||||
this.treeData.length = 0
|
||||
this.selectedNodes.length = 0
|
||||
this.selectedPages.length = 0
|
||||
this.selectedPaths.length = 0
|
||||
|
||||
// 加载数据
|
||||
this.$nextTick(() => {
|
||||
this.loadData()
|
||||
})
|
||||
},
|
||||
|
||||
onTabSelect(index : number) {
|
||||
this.selectedIndex = index
|
||||
},
|
||||
|
||||
onNodeClick(nodeData : UTSJSONObject) {
|
||||
if (nodeData.getBoolean('disable', false)) {
|
||||
return
|
||||
}
|
||||
|
||||
const isLeaf = this._checkIsLeafNode(nodeData)
|
||||
|
||||
this._trimSelectedNodes(nodeData)
|
||||
|
||||
this.$emit('nodeclick', nodeData)
|
||||
|
||||
if (this.isLocalData) {
|
||||
if (isLeaf || !this._checkHasChildren(nodeData)) {
|
||||
this.onFinish()
|
||||
}
|
||||
} else if (this.isCloudDataList) {
|
||||
this.onFinish()
|
||||
} else if (this.isCloudDataTree) {
|
||||
if (isLeaf) {
|
||||
this.onFinish()
|
||||
} else if (!this._checkHasChildren(nodeData)) {
|
||||
// 尝试请求一次，如果没有返回数据标记为叶子节点
|
||||
this.loadCloudDataNode(nodeData)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getChangeNodes(): Array<UTSJSONObject> {
|
||||
const nodes: Array<UTSJSONObject> = []
|
||||
this.selectedNodes.forEach((node : UTSJSONObject) => {
|
||||
const newNode: UTSJSONObject = {}
|
||||
newNode[this.mappingTextName] = node.getString(this.mappingTextName)
|
||||
newNode[this.mappingValueName] = node.getString(this.mappingValueName)
|
||||
nodes.push(newNode)
|
||||
})
|
||||
return nodes
|
||||
},
|
||||
|
||||
onFinish() { },
|
||||
|
||||
// 加载数据(自动判定环境)
|
||||
loadData() {
|
||||
if (this.isLocalData) {
|
||||
this.loadLocalData()
|
||||
} else if (this.isCloudDataList) {
|
||||
this.loadCloudDataList()
|
||||
} else if (this.isCloudDataTree) {
|
||||
this.loadCloudDataTree()
|
||||
}
|
||||
},
|
||||
|
||||
// 加载本地数据
|
||||
loadLocalData() {
|
||||
this.treeData = this.localdata
|
||||
if (Array.isArray(this.dataValue)) {
|
||||
const value = this.dataValue as Array<UTSJSONObject>
|
||||
this.selectedPaths = value.slice(0)
|
||||
this._pushSelectedTreeNodes(value, this.localdata)
|
||||
} else {
|
||||
this._pushSelectedNodes(this.localdata)
|
||||
}
|
||||
},
|
||||
|
||||
// 加载 Cloud 数据 (单列)
|
||||
loadCloudDataList() {
|
||||
this._loadCloudData(null, (data : Array<UTSJSONObject>) => {
|
||||
this.treeData = data
|
||||
this._pushSelectedNodes(data)
|
||||
})
|
||||
},
|
||||
|
||||
// 加载 Cloud 数据 (树形)
|
||||
loadCloudDataTree() {
|
||||
let commandOptions = {
|
||||
field: this._cloudDataPostField(),
|
||||
where: this._cloudDataTreeWhere(),
|
||||
getTree: true
|
||||
} as GetCommandOptions
|
||||
if (this._checkIsNotNull(this.gettree)) {
|
||||
commandOptions.startwith = `${this.selfField}=='${this.dataValue as string}'`
|
||||
}
|
||||
this._loadCloudData(commandOptions, (data : Array<UTSJSONObject>) => {
|
||||
this.treeData = data
|
||||
if (this.selectedPaths.length > 0) {
|
||||
this._pushSelectedTreeNodes(this.selectedPaths, data)
|
||||
} else {
|
||||
this._pushSelectedNodes(data)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 加载 Cloud 数据 (节点)
|
||||
loadCloudDataNode(nodeData : UTSJSONObject) {
|
||||
const commandOptions = {
|
||||
field: this._cloudDataPostField(),
|
||||
where: this._cloudDataNodeWhere()
|
||||
} as GetCommandOptions
|
||||
this._loadCloudData(commandOptions, (data : Array<UTSJSONObject>) => {
|
||||
nodeData['children'] = data
|
||||
if (data.length == 0) {
|
||||
nodeData['isleaf'] = true
|
||||
this.onFinish()
|
||||
} else {
|
||||
this._pushSelectedNodes(data)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 回显 Cloud Tree Path
|
||||
loadCloudDataPath() {
|
||||
if (!this.hasCloudDataValue) {
|
||||
return
|
||||
}
|
||||
|
||||
const command : GetCommandOptions = {}
|
||||
|
||||
// 单列
|
||||
if (this.isCloudDataList) {
|
||||
// 根据 field's as value标识匹配 where 条件
|
||||
let where : Array<string> = [];
|
||||
let whereField = this._getForeignKeyByField();
|
||||
if (whereField.length > 0) {
|
||||
where.push(`${whereField} == '${this.dataValue as string}'`)
|
||||
}
|
||||
|
||||
let whereString = where.join(' || ')
|
||||
if (this._checkIsNotNull(this.where)) {
|
||||
whereString = `(${this.where}) && (${whereString})`
|
||||
}
|
||||
|
||||
command.field = this._cloudDataPostField()
|
||||
command.where = whereString
|
||||
}
|
||||
|
||||
// 树形
|
||||
if (this.isCloudDataTree) {
|
||||
command.field = this._cloudDataPostField()
|
||||
command.getTreePath = {
|
||||
startWith: `${this.selfField}=='${this.dataValue as string}'`
|
||||
}
|
||||
}
|
||||
|
||||
this._loadCloudData(command, (data : Array<UTSJSONObject>) => {
|
||||
this._extractTreePath(data, this.selectedPaths)
|
||||
})
|
||||
},
|
||||
|
||||
_loadCloudData(options ?: GetCommandOptions, callback ?: ((data : Array<UTSJSONObject>) => void)) {
|
||||
if (this.loading) {
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
|
||||
this.error = null
|
||||
|
||||
this._getCommand(options).then((response : UniCloudDBGetResult) => {
|
||||
callback?.(response.data)
|
||||
}).catch((err : any | null) => {
|
||||
this.error = err as UniCloudError
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
_cloudDataPostField() : string {
|
||||
let fields = [this.field];
|
||||
if (this.parentField.length > 0) {
|
||||
fields.push(`${this.parentField} as parent_value`)
|
||||
}
|
||||
return fields.join(',')
|
||||
},
|
||||
|
||||
_cloudDataTreeWhere() : string {
|
||||
let result : Array<string> = []
|
||||
let selectedNodes = this.selectedNodes.length > 0 ? this.selectedNodes : this.selectedPaths
|
||||
let parentField = this.parentField
|
||||
if (parentField.length > 0) {
|
||||
result.push(`${parentField} == null || ${parentField} == ""`)
|
||||
}
|
||||
if (selectedNodes.length > 0) {
|
||||
for (var i = 0; i < selectedNodes.length - 1; i++) {
|
||||
const parentFieldValue = selectedNodes[i].getString('value', '')
|
||||
result.push(`${parentField} == '${parentFieldValue}'`)
|
||||
}
|
||||
}
|
||||
|
||||
let where : Array<string> = []
|
||||
if (this._checkIsNotNull(this.where)) {
|
||||
where.push(`(${this.where as string})`)
|
||||
}
|
||||
|
||||
if (result.length > 0) {
|
||||
where.push(`(${result.join(' || ')})`)
|
||||
}
|
||||
|
||||
return where.join(' && ')
|
||||
},
|
||||
|
||||
_cloudDataNodeWhere() : string {
|
||||
const where : Array<string> = []
|
||||
if (this.selectedNodes.length > 0) {
|
||||
const value = this.selectedNodes[this.selectedNodes.length - 1].getString('value', '')
|
||||
where.push(`${this.parentField} == '${value}'`)
|
||||
}
|
||||
|
||||
let whereString = where.join(' || ')
|
||||
if (this._checkIsNotNull(this.where)) {
|
||||
return `(${this.where as string}) && (${whereString})`
|
||||
}
|
||||
|
||||
return whereString
|
||||
},
|
||||
|
||||
_getWhereByForeignKey() : string {
|
||||
let result : Array<string> = []
|
||||
let whereField = this._getForeignKeyByField();
|
||||
if (whereField.length > 0) {
|
||||
result.push(`${whereField} == '${this.dataValue as string}'`)
|
||||
}
|
||||
|
||||
if (this._checkIsNotNull(this.where)) {
|
||||
return `(${this.where}) && (${result.join(' || ')})`
|
||||
}
|
||||
|
||||
return result.join(' || ')
|
||||
},
|
||||
|
||||
_getForeignKeyByField() : string {
|
||||
const fields = this.field.split(',')
|
||||
let whereField = ''
|
||||
for (let i = 0; i < fields.length; i++) {
|
||||
const items = fields[i].split('as')
|
||||
if (items.length < 2) {
|
||||
continue
|
||||
}
|
||||
if (items[1].trim() === 'value') {
|
||||
whereField = items[0].trim()
|
||||
break
|
||||
}
|
||||
}
|
||||
return whereField
|
||||
},
|
||||
|
||||
_getCommand(options ?: GetCommandOptions) : Promise<UniCloudDBGetResult> {
|
||||
let db = uniCloud.databaseForJQL()
|
||||
|
||||
let collection = Array.isArray(this.collection) ? db.collection(...(this.collection as Array<any>)) : db.collection(this.collection)
|
||||
|
||||
let filter : UniCloudDBFilter | null = null
|
||||
if (this.foreignKey.length > 0) {
|
||||
filter = collection.foreignKey(this.foreignKey)
|
||||
}
|
||||
|
||||
const where : any = options?.where ?? this.where
|
||||
if (typeof where == 'string') {
|
||||
const whereString = where as string
|
||||
if (whereString.length > 0) {
|
||||
filter = (filter != null) ? filter.where(where) : collection.where(where)
|
||||
}
|
||||
} else {
|
||||
filter = (filter != null) ? filter.where(where) : collection.where(where)
|
||||
}
|
||||
|
||||
let query : UniCloudDBQuery | null = null
|
||||
if (this.field.length > 0) {
|
||||
query = (filter != null) ? filter.field(this.field) : collection.field(this.field)
|
||||
}
|
||||
if (this.groupby.length > 0) {
|
||||
if (query != null) {
|
||||
query = query.groupBy(this.groupby)
|
||||
} else if (filter != null) {
|
||||
query = filter.groupBy(this.groupby)
|
||||
}
|
||||
}
|
||||
if (this.groupField.length > 0) {
|
||||
if (query != null) {
|
||||
query = query.groupField(this.groupField)
|
||||
} else if (filter != null) {
|
||||
query = filter.groupField(this.groupField)
|
||||
}
|
||||
}
|
||||
if (this.distinct == true) {
|
||||
if (query != null) {
|
||||
query = query.distinct(this.field)
|
||||
} else if (filter != null) {
|
||||
query = filter.distinct(this.field)
|
||||
}
|
||||
}
|
||||
if (this.orderby.length > 0) {
|
||||
if (query != null) {
|
||||
query = query.orderBy(this.orderby)
|
||||
} else if (filter != null) {
|
||||
query = filter.orderBy(this.orderby)
|
||||
}
|
||||
}
|
||||
|
||||
const size = this.pagination.size
|
||||
const current = this.pagination.current
|
||||
if (query != null) {
|
||||
query = query.skip(size * (current - 1)).limit(size)
|
||||
} else if (filter != null) {
|
||||
query = filter.skip(size * (current - 1)).limit(size)
|
||||
} else {
|
||||
query = collection.skip(size * (current - 1)).limit(size)
|
||||
}
|
||||
|
||||
const getOptions = {}
|
||||
const treeOptions = {
|
||||
limitLevel: this.limitlevel,
|
||||
startWith: this.startwith
|
||||
}
|
||||
if (this.getcount == true) {
|
||||
getOptions['getCount'] = this.getcount
|
||||
}
|
||||
|
||||
const getTree : any = options?.getTree ?? this.gettree
|
||||
if (typeof getTree == 'string') {
|
||||
const getTreeString = getTree as string
|
||||
if (getTreeString.length > 0) {
|
||||
getOptions['getTree'] = treeOptions
|
||||
}
|
||||
} else if (typeof getTree == 'object') {
|
||||
getOptions['getTree'] = treeOptions
|
||||
} else {
|
||||
getOptions['getTree'] = getTree
|
||||
}
|
||||
|
||||
const getTreePath = options?.getTreePath ?? this.gettreepath
|
||||
if (typeof getTreePath == 'string') {
|
||||
const getTreePathString = getTreePath as string
|
||||
if (getTreePathString.length > 0) {
|
||||
getOptions['getTreePath'] = getTreePath
|
||||
}
|
||||
} else {
|
||||
getOptions['getTreePath'] = getTreePath
|
||||
}
|
||||
|
||||
return query.get(getOptions)
|
||||
},
|
||||
|
||||
_checkIsNotNull(value : any) : boolean {
|
||||
if (typeof value == 'string') {
|
||||
const valueString = value as string
|
||||
return (valueString.length > 0)
|
||||
} else if (value instanceof UTSJSONObject) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
|
||||
_checkIsLeafNode(nodeData : UTSJSONObject) : boolean {
|
||||
if (this.selectedIndex >= this.limitlevel) {
|
||||
return true
|
||||
}
|
||||
|
||||
if (nodeData.getBoolean('isleaf', false)) {
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
|
||||
_checkHasChildren(nodeData : UTSJSONObject) : boolean {
|
||||
const children = nodeData.getArray('children') ?? ([] as Array<any>)
|
||||
return children.length > 0
|
||||
},
|
||||
|
||||
_pushSelectedNodes(nodes : Array<UTSJSONObject>) {
|
||||
this.selectedNodes.push(DefaultSelectedNode)
|
||||
this.selectedPages.push(nodes)
|
||||
this.selectedIndex = this.selectedPages.length - 1
|
||||
},
|
||||
|
||||
_trimSelectedNodes(nodeData : UTSJSONObject) {
|
||||
this.selectedNodes.splice(this.selectedIndex)
|
||||
this.selectedNodes.push(nodeData)
|
||||
|
||||
if (this.selectedPages.length > 0) {
|
||||
this.selectedPages.splice(this.selectedIndex + 1)
|
||||
}
|
||||
|
||||
const children = nodeData.getArray<UTSJSONObject>('children') ?? ([] as Array<UTSJSONObject>)
|
||||
if (children.length > 0) {
|
||||
this.selectedNodes.push(DefaultSelectedNode)
|
||||
this.selectedPages.push(children)
|
||||
}
|
||||
|
||||
this.selectedIndex = this.selectedPages.length - 1
|
||||
},
|
||||
|
||||
_pushSelectedTreeNodes(paths : Array<UTSJSONObject>, nodes : Array<UTSJSONObject>) {
|
||||
let children : Array<UTSJSONObject> = nodes
|
||||
paths.forEach((node : UTSJSONObject) => {
|
||||
const findNode = children.find((item : UTSJSONObject) : boolean => {
|
||||
return (item.getString(this.mappingValueName) == node.getString(this.mappingValueName))
|
||||
})
|
||||
if (findNode != null) {
|
||||
this.selectedPages.push(children)
|
||||
this.selectedNodes.push(node)
|
||||
children = findNode.getArray<UTSJSONObject>('children') ?? ([] as Array<UTSJSONObject>)
|
||||
}
|
||||
})
|
||||
this.selectedIndex = this.selectedPages.length - 1
|
||||
},
|
||||
|
||||
_extractTreePath(nodes : Array<UTSJSONObject>, result : Array<UTSJSONObject>) {
|
||||
if (nodes.length == 0) {
|
||||
return
|
||||
}
|
||||
|
||||
const node = nodes[0]
|
||||
result.push(node)
|
||||
|
||||
const children = node.getArray<UTSJSONObject>('children')
|
||||
if (Array.isArray(children) && children!.length > 0) {
|
||||
this._extractTreePath(children, result)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,76 @@
|
||||
.uni-data-pickerview {
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loading-cover {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(150, 150, 150, .1);
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #DD524D;
|
||||
}
|
||||
|
||||
.selected-node-list {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.selected-node-item {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
padding: 8px 10px 8px 10px;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.selected-node-item-active {
|
||||
color: #007aff;
|
||||
border-bottom-color: #007aff;
|
||||
}
|
||||
|
||||
.list-view {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.item-text-disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.item-text-overflow {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.check {
|
||||
margin-right: 5px;
|
||||
border: 2px solid #007aff;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 12px;
|
||||
width: 6px;
|
||||
transform-origin: center;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<view class="uni-data-pickerview">
|
||||
<view v-if="error!=null" class="error">
|
||||
<text class="error-text">{{error!.errMsg}}</text>
|
||||
</view>
|
||||
<scroll-view v-if="!isCloudDataList" :scroll-x="true">
|
||||
<view class="selected-node-list">
|
||||
<template v-for="(item, index) in selectedNodes">
|
||||
<text class="selected-node-item" :class="{'selected-node-item-active':index==selectedIndex}"
|
||||
@click="onTabSelect(index)">
|
||||
{{item[mappingTextName]}}
|
||||
</text>
|
||||
</template>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<list-view class="list-view" :scroll-y="true">
|
||||
<list-item class="list-item" v-for="(item, _) in currentDataList" @click="onNodeClick(item)">
|
||||
<text class="item-text" :class="{'item-text-disabled': item['disable']}">{{item[mappingTextName]}}</text>
|
||||
<text class="check" v-if="item[mappingValueName] == selectedNodes[selectedIndex][mappingValueName]"></text>
|
||||
</list-item>
|
||||
</list-view>
|
||||
<view class="loading-cover" v-if="loading">
|
||||
<slot name="pickerview-loading" :loading="loading"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { dataPicker } from "./uni-data-picker.uts"
|
||||
|
||||
/**
|
||||
* DataPickerview
|
||||
* @description uni-data-pickerview
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=3796
|
||||
* @property {Array} localdata 本地数据，参考
|
||||
* @property {Boolean} step-searh = [true|false] 是否分布查询
|
||||
* @value true 启用分布查询，仅查询当前选中节点
|
||||
* @value false 关闭分布查询，一次查询出所有数据
|
||||
* @property {String|DBFieldString} self-field 分布查询当前字段名称
|
||||
* @property {String|DBFieldString} parent-field 分布查询父字段名称
|
||||
* @property {String|DBCollectionString} collection 表名
|
||||
* @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
|
||||
* @property {String} orderby 排序字段及正序倒叙设置
|
||||
* @property {String|JQLString} where 查询条件
|
||||
*/
|
||||
export default {
|
||||
name: 'UniDataPickerView',
|
||||
emits: ['nodeclick', 'change', 'update:modelValue'],
|
||||
mixins: [dataPicker],
|
||||
props: {
|
||||
ellipsis: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
onFinish() {
|
||||
this.$emit('change', this.getChangeNodes())
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("uni-data-pickerview.css");
|
||||
</style>
|
||||
@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<view class="uni-data-pickerview">
|
||||
<scroll-view v-if="!isCloudDataList" class="selected-area" scroll-x="true">
|
||||
<view class="selected-list">
|
||||
<view
|
||||
class="selected-item"
|
||||
v-for="(item,index) in selected"
|
||||
:key="index"
|
||||
:class="{
|
||||
'selected-item-active':index == selectedIndex
|
||||
}"
|
||||
@click="handleSelect(index)"
|
||||
>
|
||||
<text>{{item.text || ''}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="tab-c">
|
||||
<scroll-view class="list" :scroll-y="true">
|
||||
<view class="item" :class="{'is-disabled': !!item.disable}" v-for="(item, j) in dataList[selectedIndex]" :key="j"
|
||||
@click="handleNodeClick(item, selectedIndex, j)">
|
||||
<text class="item-text">{{item[map.text]}}</text>
|
||||
<view class="check" v-if="selected.length > selectedIndex && item[map.value] == selected[selectedIndex].value"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="loading-cover" v-if="loading">
|
||||
<uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
|
||||
</view>
|
||||
<view class="error-message" v-if="errorMessage">
|
||||
<text class="error-text">{{errorMessage}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dataPicker from "./uni-data-picker.js"
|
||||
|
||||
/**
|
||||
* DataPickerview
|
||||
* @description uni-data-pickerview
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=3796
|
||||
* @property {Array} localdata 本地数据，参考
|
||||
* @property {Boolean} step-searh = [true|false] 是否分布查询
|
||||
* @value true 启用分布查询，仅查询当前选中节点
|
||||
* @value false 关闭分布查询，一次查询出所有数据
|
||||
* @property {String|DBFieldString} self-field 分布查询当前字段名称
|
||||
* @property {String|DBFieldString} parent-field 分布查询父字段名称
|
||||
* @property {String|DBCollectionString} collection 表名
|
||||
* @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
|
||||
* @property {String} orderby 排序字段及正序倒叙设置
|
||||
* @property {String|JQLString} where 查询条件
|
||||
*/
|
||||
export default {
|
||||
name: 'UniDataPickerView',
|
||||
emits: ['nodeclick', 'change', 'datachange', 'update:modelValue'],
|
||||
mixins: [dataPicker],
|
||||
props: {
|
||||
managedMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
ellipsis: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!this.managedMode) {
|
||||
this.$nextTick(() => {
|
||||
this.loadData();
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onPropsChange() {
|
||||
this._treeData = [];
|
||||
this.selectedIndex = 0;
|
||||
this.$nextTick(() => {
|
||||
this.loadData();
|
||||
})
|
||||
},
|
||||
handleSelect(index) {
|
||||
this.selectedIndex = index;
|
||||
},
|
||||
handleNodeClick(item, i, j) {
|
||||
if (item.disable) {
|
||||
return;
|
||||
}
|
||||
|
||||
const node = this.dataList[i][j];
|
||||
const text = node[this.map.text];
|
||||
const value = node[this.map.value];
|
||||
|
||||
if (i < this.selected.length - 1) {
|
||||
this.selected.splice(i, this.selected.length - i)
|
||||
this.selected.push({
|
||||
text,
|
||||
value
|
||||
})
|
||||
} else if (i === this.selected.length - 1) {
|
||||
this.selected.splice(i, 1, {
|
||||
text,
|
||||
value
|
||||
})
|
||||
}
|
||||
|
||||
if (node.isleaf) {
|
||||
this.onSelectedChange(node, node.isleaf)
|
||||
return
|
||||
}
|
||||
|
||||
const {
|
||||
isleaf,
|
||||
hasNodes
|
||||
} = this._updateBindData()
|
||||
|
||||
// 本地数据
|
||||
if (this.isLocalData) {
|
||||
this.onSelectedChange(node, (!hasNodes || isleaf))
|
||||
} else if (this.isCloudDataList) { // Cloud 数据 (单列)
|
||||
this.onSelectedChange(node, true)
|
||||
} else if (this.isCloudDataTree) { // Cloud 数据 (树形)
|
||||
if (isleaf) {
|
||||
this.onSelectedChange(node, node.isleaf)
|
||||
} else if (!hasNodes) { // 请求一次服务器以确定是否为叶子节点
|
||||
this.loadCloudDataNode((data) => {
|
||||
if (!data.length) {
|
||||
node.isleaf = true
|
||||
} else {
|
||||
this._treeData.push(...data)
|
||||
this._updateBindData(node)
|
||||
}
|
||||
this.onSelectedChange(node, node.isleaf)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
updateData(data) {
|
||||
this._treeData = data.treeData
|
||||
this.selected = data.selected
|
||||
if (!this._treeData.length) {
|
||||
this.loadData()
|
||||
} else {
|
||||
//this.selected = data.selected
|
||||
this._updateBindData()
|
||||
}
|
||||
},
|
||||
onDataChange() {
|
||||
this.$emit('datachange');
|
||||
},
|
||||
onSelectedChange(node, isleaf) {
|
||||
if (isleaf) {
|
||||
this._dispatchEvent()
|
||||
}
|
||||
|
||||
if (node) {
|
||||
this.$emit('nodeclick', node)
|
||||
}
|
||||
},
|
||||
_dispatchEvent() {
|
||||
this.$emit('change', this.selected.slice(0))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-primary: #007aff !default;
|
||||
|
||||
.uni-data-pickerview {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #DD524D;
|
||||
}
|
||||
|
||||
.loading-cover {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
/* #ifndef APP-NVUE */
|
||||
margin: auto;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 15px;
|
||||
opacity: .9;
|
||||
z-index: 102;
|
||||
}
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
.selected-area {
|
||||
width: 750rpx;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.selected-list {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
padding: 0 5px;
|
||||
border-bottom: 1px solid #f8f8f8;
|
||||
}
|
||||
|
||||
.selected-item {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
padding: 12px 0;
|
||||
text-align: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
white-space: nowrap;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.selected-item-text-overflow {
|
||||
width: 168px;
|
||||
/* fix nvue */
|
||||
overflow: hidden;
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 6em;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.selected-item-active {
|
||||
border-bottom: 2px solid $uni-primary;
|
||||
}
|
||||
|
||||
.selected-item-text {
|
||||
color: $uni-primary;
|
||||
}
|
||||
|
||||
.tab-c {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 12px 15px;
|
||||
/* border-bottom: 1px solid #f0f0f0; */
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.is-disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
/* flex: 1; */
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.item-text-overflow {
|
||||
width: 280px;
|
||||
/* fix nvue */
|
||||
overflow: hidden;
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 20em;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.check {
|
||||
margin-right: 5px;
|
||||
border: 2px solid $uni-primary;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 12px;
|
||||
width: 6px;
|
||||
transform-origin: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
transition: all 0.3s;
|
||||
/* #endif */
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user