Files
tnb.server/apihost/Tnb.API.Entry/wwwroot/Template/appIndex.vue.vm
2023-03-13 15:00:34 +08:00

612 lines
21 KiB
Plaintext

<template>
<view class="dynamicModel-list-v">
<view class="head-warp com-dropdown">
<u-dropdown class="u-dropdown" ref="uDropdown">
<u-dropdown-item title="排序">
<view class="dropdown-slot-content">
<view class="dropdown-slot-content-main">
<u-cell-group>
<u-cell-item @@click="cellClick(item)" :arrow="false" :title="item.label" v-for="(item, index) in sortOptions" :key="index" :title-style="{ color: sortValue == item.value ? '#2979ff' : '#606266' }">
<u-icon v-if="sortValue == item.value" name="checkbox-mark" color="#2979ff" size="32"></u-icon>
</u-cell-item>
</u-cell-group>
</view>
<view class="dropdown-slot-bg" @@click="$refs.uDropdown.close()"></view>
</view>
</u-dropdown-item>
<u-dropdown-item title="筛选">
<view class="dropdown-slot-content">
<view class="dropdown-slot-content-main search-main">
<view class="u-p-l-32 u-p-r-32 search-form">
<u-form :model="searchForm" ref="searchForm" :errorType="['toast']" label-position="left" label-width="150">
@*循环查询条件*@
@foreach(var search in Model.SearchColumnDesign)
{
@switch(search.QueryControlsKey)
{
case "input":
<u-form-item label="@(@search.Label)" prop="@(@search.Name)">
<u-input v-model="searchForm.@(@search.Name)" placeholder="请输入@(@search.Label)" />
</u-form-item>
break;
case "numRange":
<u-form-item label="@(@search.Label)" prop="@(@search.Name)">
<jnpf-num-range v-model="searchForm.@(@search.Name)" />
</u-form-item>
break;
case "switch":
<u-form-item label="@(@search.Label)" prop="@(@search.Name)">
<view class="u-flex u-form-item-switch">
<jnpf-switch v-model="searchForm.@(@search.Name)" />
</view>
</u-form-item>
break;
case "select":
<u-form-item label="@(@search.Label)" prop="@(@search.Name)">
<jnpf-select v-model="searchForm.@(@search.Name)" placeholder="请选择@(@search.Label)" :options="@(@search.OriginalName)Options" :props="@(@search.OriginalName)Props" />
</u-form-item>
break;
case "cascader":
<u-form-item label="@(@search.Label)" prop="@(@search.Name)">
<jnpf-cascader v-model="searchForm.@(@search.Name)" placeholder="请选择@(@search.Label)" :options="@(@search.OriginalName)Options" :props="@(@search.OriginalName)Props" />
</u-form-item>
break;
case "time":
<u-form-item label="@(@search.Label)" prop="@(@search.Name)">
<jnpf-time-range v-model="searchForm.@(@search.Name)" />
</u-form-item>
break;
case "date":
<u-form-item label="@(@search.Label)" prop="@(@search.Name)">
<jnpf-date-range v-model="searchForm.@(@search.Name)" />
</u-form-item>
break;
case "comSelect":
<u-form-item label="@(@search.Label)" prop="@(@search.Name)">
<jnpf-com-select type="organize" v-model="searchForm.@(@search.Name)" placeholder="请选择@(@search.Label)" />
</u-form-item>
break;
case "depSelect":
<u-form-item label="@(@search.Label)" prop="@(@search.Name)">
<jnpf-postordep-select type="department" v-model="searchForm.@(@search.Name)" placeholder="请选择@(@search.Label)" @(@search.SelectType)@(@search.IsCustomSelect ? @search.AbleDepIds + @search.AblePosIds + @search.AbleUserIds + @search.AbleRoleIds + @search.AbleGroupIds : "")/>
</u-form-item>
break;
case "posSelect":
<u-form-item label="@(@search.Label)" prop="@(@search.Name)">
<jnpf-postordep-select type="position" v-model="searchForm.@(@search.Name)" placeholder="请选择@(@search.Label)" @(@search.SelectType)@(@search.IsCustomSelect ? @search.AbleDepIds + @search.AblePosIds + @search.AbleUserIds + @search.AbleRoleIds + @search.AbleGroupIds : "")/>
</u-form-item>
break;
case "userSelect":
<u-form-item label="@(@search.Label)" prop="@(@search.Name)">
<jnpf-user-select v-model="searchForm.@(@search.Name)" placeholder="请选择@(@search.Label)" @(@search.SelectType)@(@search.IsCustomSelect ? @search.AbleDepIds + @search.AblePosIds + @search.AbleUserIds + @search.AbleRoleIds + @search.AbleGroupIds : "")/>
</u-form-item>
break;
case "usersSelect":
<u-form-item label="@(@search.Label)" prop="@(@search.Name)">
<jnpf-user-choice v-model="searchForm.@(@search.Name)" placeholder="请选择@(@search.Label)" @(@search.SelectType)@(@search.IsCustomSelect ? @search.AbleDepIds + @search.AblePosIds + @search.AbleUserIds + @search.AbleRoleIds + @search.AbleGroupIds + search.AbleIds : "")/>
</u-form-item>
break;
case "treeSelect":
<u-form-item label="@(@search.Label)" prop="@(@search.Name)">
<jnpf-tree-select v-model="searchForm.@(@search.Name)" :options="@(@search.OriginalName)Options" :props="@(@search.OriginalName)Props" placeholder="请选择@(@search.Label)" />
</u-form-item>
break;
case "address":
<u-form-item label="@(@search.Label)" prop="@(@search.Name)">
<jnpf-city-select v-model="searchForm.@(@search.Name)" placeholder="请选择@(@search.Label)" :level="@(@search.Level)" />
</u-form-item>
break;
case "groupSelect":
<u-form-item label="@(@search.Label)" prop="@(@search.LowerName)">
<jnpf-group-select v-model="searchForm.@(@search.LowerName)" placeholder="请选择@(@search.Label)" />
</u-form-item>
break;
case "roleSelect":
<u-form-item label="@(@search.Label)" prop="@(@search.LowerName)">
<jnpf-role-select v-model="search.@(@search.LowerName)" placeholder="请选择@(@search.Label)" />
</u-form-item>
break;
}
}
</u-form>
</view>
<view class="buttom-actions">
<u-button class="buttom-btn" @@click="reset">重置</u-button>
<u-button class="buttom-btn" type="primary" @@click="closeDropdown">检索</u-button>
</view>
</view>
<view class="dropdown-slot-bg" @@click="$refs.uDropdown.close()"></view>
</view>
</u-dropdown-item>
</u-dropdown>
</view>
<view class="list-warp">
<mescroll-uni ref="mescrollRef" @@init="mescrollInit" @@down="downCallback" @@up="upCallback" :fixed="false" :down="downOption" :up="upOption">
<view class="list">
<view class="list-box">
<uni-swipe-action ref="swipeAction">
<uni-swipe-action-item v-for="(item, index) in list" :key="item.@(@Model.PrimaryKey)" :threshold="0" :right-options="options">
<view class="item" @@click="goDetail(item.@(@Model.PrimaryKey))">
<view class="u-line-1 item-cell" v-for="(column,i) in columnList" :key="i">
<view v-if="column.jnpfKey != 'table'">
<text class="listTit u-line-1">{{column.label}}:</text>
<text class="listContent">{{item[column.prop] | dynamicTreeText(column.option)}}</text>
</view>
<view class="collapse-box u-flex" v-else="">
<tableCell :label="column.label" :childList="item[column.prop]"
:children="column.children" ref="tableCell" :pageLen="3"></tableCell>
</view>
</view>
</view>
<template v-slot:right>
<view class="right-option-box">
<view class="right-option" v-for="(it,i) in options" @@click="handleClick(index)" :key="i">
<text>{{it.text}}</text>
</view>
</view>
</template>
</uni-swipe-action-item>
</uni-swipe-action>
</view>
</view>
</mescroll-uni>
</view>
@if(Model.IsAdd)
{
@if(Model.UseBtnPermission)
{
@:<view class="com-addBtn" @@click="addPage()" v-if="$setPermission.hasBtnP('btn_add',menuIds)">
}else{
@:<view class="com-addBtn" @@click="addPage()">
}
<u-icon name="plus" size="60" color="#fff" />
</view>
}
</view>
</template>
<script>
import {getDictionaryDataSelector,getDataInterfaceRes} from '@@/api/common'
import resources from '@@/libs/resources.js'
import MescrollMixin from "@@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import request from '@@/utils/request'
import columnList from './columnList'
@if(Model.IsChildTableShow)
{
@:import tableCell from '../dynamicModel/components/tableCell.vue'
}
export default {
mixins: [MescrollMixin],
components:{@(@Model.IsChildTableShow ? "tableCell" : "")},
data() {
return {
sortValue: '',
searchForm: {
@foreach(var search in Model.SearchColumnDesign)
{
@:@(@search.Name):undefined,
}
},
downOption: {
use: true,
auto: false
},
dataOptions: {
@foreach (var item in Model.ColumnDesign)
{
@if(item.IsChildTable)
{
@:@(@item.Name): {},
}
}
},
upOption: {
page: {
num: 0,
size: 20,
time: null
},
empty: {
use: true,
icon: resources.message.nodata,
tip: "暂无数据",
fixed: true,
top: "300rpx",
zIndex: 5
},
textNoMore: '没有更多数据',
toTop: {
bottom: 250
}
},
list: [],
appColumnList: columnList,
listQuery: {
sort: 'desc',
sidx: '@(@Model.DefaultSidx)',
keyword: '',
json: ''
},
options: [
@if(@Model.IsRemoveDel){
@foreach (var item in @Model.ColumnButtonDesign)
{
@if(item.Value == "remove")
{
@:{
@:text: '@(@item.Label)',
@:style: {
@:backgroundColor: '#dd524d'
@:}
@:}
}
}
}
],
sortOptions: [
@foreach(var sort in Model.SearchColumnDesign)
{
@:{
@:label: '@(@sort.Label)降序',
@:sidx: '@(@sort.Name)',
@:value: '@(@sort.Name)',
@:sort: 'desc'
@:},
}
],
menuIds:'',
columnList: [],
isTree: false,
@foreach(var item in @Model.OptionsList)
{
@if(item.IsIndex)
{
@:@item.Content
}
@if(item.IsProps)
{
@:@(@item.LowerName)Props:@(@item.Props),
}
@switch(item.jnpfKey)
{
case "posSelect":
case "userSelect":
case "depSelect":
@:@item.Content
break;
}
}
}
},
onLoad(e) {
this.menuIds = e.menuId
uni.$on('refresh', () => {
this.list = [];
this.mescroll.resetUpScroll();
})
this.getColumnList()
@foreach(var item in @Model.OptionsList)
{
@if(!item.IsStatic && item.IsIndex)
{
@:this.get@(@item.LowerName)Options();
}
}
},
onUnload() {
uni.$off('refresh')
},
methods: {
@foreach(var item in @Model.OptionsList)
{
@if(!item.IsStatic && item.IsIndex)
{
@:get@(@item.LowerName)Options(){
switch(@item.DataType)
{
case "dictionary":
@:getDictionaryDataSelector('@(@item.DictionaryType)').then(res => {
@:this.@(@item.LowerName)Options = res.data.list
break;
case "dynamic":
@:getDataInterfaceRes('@(@item.DictionaryType)').then(res => {
@:let data = res.data
@:this.@(@item.LowerName)Options = data
break;
}
@:});
@:},
}
}
upCallback(page) {
let query = {
currentPage: page.num,
pageSize: page.size,
...this.listQuery,
...this.searchForm,
menuId:this.menuIds
}
@foreach(var search in Model.SearchColumnDesign)
{
@switch(search.QueryControlsKey)
{
case "cascader":
case "numRange":
case "date":
case "time":
case "comSelect":
case "address":
case "createTime":
case "modifyTime":
@:query.@(@search.Name) = query.@(@search.Name) ? query.@(@search.Name).join() : null;
break;
}
}
request({
url: '/api/@(@Model.NameSpace)/@(@Model.ClassName)/List',
method: 'post',
data: query,
}).then(res => {
if (page.num == 1) this.list = [];
@if(Model.HasPage)
{
@:const list = res.data.list.map(o => {
}
else{
@:const list = res.data.map(o => {
}
@foreach(var item in Model.ColumnDesign)
{
@if(item.IsAutomatic)
{
@switch(item.jnpfKey)
{
case "table":
@:o.@(@item.Name).forEach(item =>{
@foreach(var table in item.ChildTableDesigns)
{
@if(table.IsAutomatic)
{
@switch(table.jnpfKey)
{
case "createTime":
case "modifyTime":
@:item.@(@item.Name) = this.$u.timeFormat(item.@(@table.Name), 'yyyy-mm-dd hh:MM')
break;
default:
@:item.@(@table.Name) = this.$u.timeFormat(item.@(@table.Name), '@(@table.Format)')
break;
}
}
}
@:});
break;
}
}
}
return {
show: false,
...o
}
});
@if(Model.HasPage)
{
@:this.mescroll.endSuccess(res.data.list.length);
}
else
{
@:this.mescroll.endSuccess(res.data.length, false);
}
this.list = this.list.concat(list);
}).catch(() => {
this.mescroll.endErr();
})
},
handleClick(index) {
const item = this.list[index]
request({
url: '/api/@(@Model.NameSpace)/@(@Model.ClassName)/' + item.@(@Model.PrimaryKey),
method: 'delete'
}).then(res => {
uni.showToast({
title: res.msg,
complete: () => {
this.$u.toast(res.msg)
this.list.splice(index, 1)
}
})
})
},
open(index) {
this.list[index].show = true;
this.list.map((val, idx) => {
if (index != idx) this.list[idx].show = false;
})
},
addPage() {
this.jumPage()
},
jumPage(id, btnType){
if (!id) btnType = 'btn_add'
let query = id ? id : ''
let url = './form?id='+ query+'&jurisdictionType='+btnType+'&menuIds='+this.menuIds
if(btnType == 'btn_detail')url = './Detail?id='+ query+'&jurisdictionType='+btnType+'&menuIds='+this.menuIds
uni.navigateTo({
url: url
})
},
search() {
if (this.isPreview == '1') return
this.searchTimer && clearTimeout(this.searchTimer)
this.searchTimer = setTimeout(() => {
this.list = [];
this.mescroll.resetUpScroll();
}, 300)
},
goDetail(id) {
@if(Model.IsEdit && Model.IsDetail){
@:let btnType = 'btn_detail';
}else if(Model.IsEdit && !Model.IsDetail){
@:let btnType = 'btn_edit';
}else if(!Model.IsEdit && Model.IsDetail){
@:let btnType = 'btn_detail';
}else{
@:let btnType = '';
}
if(!btnType) return
@if(Model.UseBtnPermission){
@if(Model.IsEdit && Model.IsDetail){
@:if (!this.$setPermission.hasBtnP('btn_edit', this.menuIds) && !this.$setPermission.hasBtnP('btn_detail', this.menuIds)) return
@:if (this.$setPermission.hasBtnP('btn_edit', this.menuIds) && this.$setPermission.hasBtnP('btn_detail', this.menuIds)) btnType = 'btn_detail'
@:if (this.$setPermission.hasBtnP('btn_edit', this.menuIds) && !this.$setPermission.hasBtnP('btn_detail', this.menuIds)) btnType = 'btn_edit'
}else if(Model.IsEdit && !Model.IsDetail){
@:if (!this.$setPermission.hasBtnP('btn_edit', this.menuIds) && !this.$setPermission.hasBtnP('', this.menuIds)) return
@:if (this.$setPermission.hasBtnP('btn_edit', this.menuIds)) btnType = 'btn_edit'
}
else if(!Model.IsEdit && Model.IsDetail){
@:if (!this.$setPermission.hasBtnP('btn_detail', this.menuIds) && !this.$setPermission.hasBtnP('', this.menuIds)) return
@:if (this.$setPermission.hasBtnP('btn_detail', this.menuIds)) btnType = 'btn_detail'
}
}
this.jumPage(id,btnType)
},
getColumnList() {
let columnPermissionList = []
let _appColumnList = this.appColumnList
@if(Model.UseColumnPermission)
{
@:let permissionList = uni.getStorageSync('permissionList')
@:let list = permissionList.filter(o => o.modelId === this.menuIds)
@:let _columnList = list[0] && list[0].column ? list[0].column : []
@:for (let i = 0; i < _appColumnList.length; i++) {
@:let _app = _appColumnList[i].prop
@:inner: for (let j = 0; j < _columnList.length; j++) {
@:let _encode = _columnList[j].enCode
@:if (_app == _encode) {
@:columnPermissionList.push(this.appColumnList[i])
@:break inner
@:}
@:}
@:}
@:this.columnList = this.transformColumnList(columnPermissionList, this.dataOptions)
}else{
@:this.columnList = this.transformColumnList(_appColumnList, this.dataOptions)
}
},
transformColumnList(columnList, dataOptions) {
let list = []
for (let i = 0; i < columnList.length; i++) {
let e = columnList[i]
let columProp = e.prop
let label = e.label
let option = null
let options = columProp + "Options"
if (!columProp.includes('-')) {
if (dataOptions[options]) {
option = dataOptions[options]
} else {
@if(Model.IsInlineEditor)
{
@:columProp = columProp + "_name"
}else{
@:columProp = columProp
}
}
if (label.length > 4) {
label = label.substring(0, 4)
}
e.label = label
e.prop = columProp
e.option = option
list.push(e)
} else {
e.vModel = columProp.split('-')[1]
e.childLabel = e.label.split('-')[1]
options = e.vModel + "Options"
let prop = columProp.split('-')[0]
let label = e.label.split('-')[0]
let newItem = {
align: "center",
jnpfKey: "table",
prop,
label,
children: []
}
if (!list.some(o => o.prop === prop)) list.push(newItem)
for (let i = 0; i < list.length; i++) {
if (list[i].prop === prop) {
if (dataOptions[prop][options]) {
option = dataOptions[prop][options]
}
e.option = option
list[i].children.push(e)
break
}
}
}
}
return list
},
cellClick(item) {
if (this.sortValue === item.value) return
this.listQuery.sort = item.sort
this.listQuery.sidx = item.sidx
this.sortValue = item.value
this.$refs.uDropdown.close();
this.$nextTick(() => {
this.list = [];
this.mescroll.resetUpScroll();
})
},
reset() {
this.$refs.searchForm.resetFields()
},
closeDropdown() {
this.$refs.uDropdown.close();
this.$nextTick(() => {
this.list = [];
this.mescroll.resetUpScroll();
})
}
}
}
</script>
<style lang="scss">
page {
background-color: #f0f2f6;
height: 100%;
/* #ifdef MP-ALIPAY */
position: absolute;
top: 0;
left: 0;
width: 100%;
/* #endif */
}
.right-option-box {
display: flex;
width: max-content;
.right-option {
width: 144rpx;
height: 100%;
font-size: 16px;
color: #fff;
background-color: #dd524d;
display: flex;
align-items: center;
justify-content: center;
}
.more-option {
background-color: #1890ff;
}
}
.item{
padding: 0 !important;
}
.list-warp{
padding: 20rpx 0 !important;
}
</style>