0b2/peiwan-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

项目初始化

Browse Source
This commit is contained in:
jerry
2025-01-21 01:46:34 +08:00
parent 364021b042
commit 48153e7761
962 changed files with 172070 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
pages/worker/levelList/components/layout.vue Normal file
View File

@@ -0,0 +1,109 @@
<!-- 虚拟列表演示(不使用内置列表)(vue) -->
<!-- 写法较简单，在页面中对当前需要渲染的虚拟列表数据进行for循环，在vue3中兼容性良好 -->
<!-- 在各平台兼容性请查阅https://z-paging.zxlee.cn/module/virtual-list.html -->
<template>
<view class="content">
<su-navbar :title="title" statusBar></su-navbar>
<view class="main-box">
<view class="title">当前等级：{{clerkLevel}}</view>
<level-list :dataList="tableList"></level-list>
</view>
<view class="bottom-box">
<view class="btn" @click="saveLevel">保存配置</view>
</view>
</view>
</template>
<script>
import LevelList from '@/pages/worker/levelList/components/levelList.vue';
import ClerkApi from '@/sheep/api/worker/clerk';
export default {
components: {
LevelList,
},
props: {
title: {
type: String,
default: '',
},
},
data() {
return {
tableList: [],
id: 0,
clerkLevel: '',
}
},
created() {
},
methods: {
initData(id) {
this.id = id;
ClerkApi.getGoodsList(id).then(res => {
this.tableList = res.data;
});
ClerkApi.getClerkLevel(id).then(res => {
this.clerkLevel = res.data;
});
},
saveLevel() {
var params = {
id: this.id,
categoryList: this.tableList
}
ClerkApi.saveGoodsList(params).then(res => {
});
},
}
}
</script>
<style lang="scss" scoped>
.main-box {
padding: 10px;
padding-bottom: 140rpx;
.title {
display: flex;
justify-content: center;
font-size: 28rpx;
font-weight: bold;
margin-bottom: 20px;
}
}
.bottom-box {
display: flex;
justify-content: center;
align-items: center;
padding: 7px 15px;
background-color: #fff;
box-shadow: 0 0 6px 0 #ccc;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
.btn {
background-color: var(--ui-BG-Main);;
padding: 10px;
border-radius: 40px;
color: #fff;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
font-size: 28rpx;
}
}
</style>

105
pages/worker/levelList/components/levelList.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<view>
<table-bd style="width: 100%;">
<table-tr>
<table-td :span="18" height="60" :fontSize="30" :bold="true" fontColor="#01BEFF" alignItems="center">技能列表</table-td>
<table-td :span="6" height="60" :fontSize="30" :bold="true" fontColor="#01BEFF" alignItems="center">开关</table-td>
</table-tr>
<block v-for="(tb,t) in dataList">
<table-tr>
<table-td :span="6" alignItems="center">{{tb.name}}</table-td>
<block v-if="tb.goodsList">
<table-td :span="12" :ellipsis="true" padding="0">
<block v-for="(tb2,t2) in tb.goodsList">
<table-tr :borderWidth="t2 == tb.goodsList.length-1 ? 0 : 1">
<table-td height="60" :span="24" :borderRight="false" alignItems="center">{{tb2.name}}</table-td>
</table-tr>
</block>
</table-td>
<table-td :span="6" :ellipsis="true" padding="0">
<block v-for="(tb2,t2) in tb.goodsList">
<table-tr :borderWidth="t2 == tb.goodsList.length-1 ? 0 : 1">
<table-td height="60" :span="24" borderWidth="1rpx" :borderRight="false" alignItems="center">
<view @click="changeLevel(tb2)"><u-switch active-color="var(--ui-BG-Main)" size="36" v-model="tb2.deleted"></u-switch></view>
</table-td>
</table-tr>
</block>
</table-td>
</block>
<block v-if="tb.categoryList">
<table-td :span="12" :ellipsis="true" padding="0">
<block v-for="(tb2,t2) in tb.categoryList">
<table-tr :borderWidth="t2 == tb.categoryList.length-1 ? 0 : 1">
<table-td :span="12" borderWidth="1rpx" alignItems="center">{{tb2.name}}</table-td>
<table-td :span="12" :ellipsis="true" :borderRight="false" padding="0">
<block v-for="(tb3,t3) in tb2.goodsList">
<table-tr :borderWidth="t3 == tb2.goodsList.length-1 ? 0 : 1">
<table-td height="60" :span="24" :borderRight="false" alignItems="center">{{tb3.name}}</table-td>
</table-tr>
</block>
</table-td>
</table-tr>
</block>
</table-td>
<table-td :span="6" :ellipsis="true" padding="0">
<block v-for="(tb2,t2) in tb.categoryList">
<block v-for="(tb3,t3) in tb2.goodsList">
<table-tr :borderWidth="t2 == tb.categoryList.length-1 && t3 == tb2.goodsList.length-1 ? 0 : 1">
<table-td height="60" :span="24" borderWidth="1rpx" :borderRight="false" alignItems="center">
<view @click="changeLevel(tb3)"><u-switch active-color="var(--ui-BG-Main)" size="36" v-model="tb3.deleted"></u-switch></view>
</table-td>
</table-tr>
</block>
</block>
</table-td>
</block>
</table-tr>
</block>
</table-bd>
</view>
</template>
<script>
import TableBd from '@/pages/worker/levelList/components/table-bd.vue';
import TableTd from '@/pages/worker/levelList/components/table-td.vue';
import TableTr from '@/pages/worker/levelList/components/table-tr.vue';
export default {
components: {
TableBd,
TableTd,
TableTr,
},
props: {
dataList: {
type: Array,
default: [],
},
},
data() {
return {
}
},
methods: {
changeLevel(e) {
if(e.deleted){
e.deleted = true;
}else{
e.deleted = false;
}
},
}
}
</script>
<style lang="scss" scoped>
</style>

100
pages/worker/levelList/components/table-bd.vue Normal file
View File

@@ -0,0 +1,100 @@
<template>
<view class="tn-table-class tn-table" :class="[tableClass]" :style="[tableStyle]">
<slot></slot>
</view>
</template>
<script>
export default {
name: 'table-bd',
props: {
// 边框宽度
borderWidth: {
type: [String, Number],
default: ''
},
// 边框颜色
borderColor: {
type: String,
default: ''
},
// 显示上边框
borderTop: {
type: Boolean,
default: true
},
// 显示右边框
borderRight: {
type: Boolean,
default: false
},
// 显示下边框
borderBottom: {
type: Boolean,
default: false
},
// 显示左边框
borderLeft: {
type: Boolean,
default: true
}
},
computed: {
parentData() {
return [this.borderWidth, this.borderColor]
},
tableClass() {
let clazz = ''
return clazz
},
tableStyle() {
let style = {}
if (this.borderWidth !== '') {
style.borderWidth = this.borderWidth + 'rpx'
}
if (this.borderColor) {
style.borderColor = this.borderColor
}
if (this.borderLeft) {
style.borderLeftStyle = 'solid'
}
if (this.borderRight) {
style.borderRightStyle = 'solid'
}
if (this.borderTop) {
style.borderTopStyle = 'solid'
}
if (this.borderBottom) {
style.borderBottomStyle = 'solid'
}
return style
}
},
data() {
return {}
},
created() {
this.children = []
},
watch: {
parentData() {
// 更新子组件的数据
if (this.children.length) {
this.children.map((child) => {
typeof(child.updateParentData) === 'function' && child.updateParentData()
})
}
}
}
}
</script>
<style lang="scss" scoped>
.tn-table {
box-sizing: border-box;
width: 100%;
border-width: 1rpx;
border-style: none;
border-color: var(--ui-BG-Main);;
}
</style>

305
pages/worker/levelList/components/table-td.vue Normal file
View File

@@ -0,0 +1,305 @@
<template>
<view class="tn-td-class tn-td" :class="[tdClass]" :style="[tdStyle]" @tap.stop="handleClick">
<slot></slot>
</view>
</template>
<script>
export default {
name: 'table-td',
options: {
// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
virtualHost: true
},
props: {
// 占整个表格的宽度跨度
// [1-24]
span: {
type: Number,
default: 24
},
// 宽度
// 优先级比span高
width: {
type: [String, Number],
default: ''
},
// 高度
height: {
type: [String, Number],
default: ''
},
// 字体加粗
bold: {
type: Boolean,
default: false
},
// 格内边距
padding: {
type: String,
default: ''
},
// 边框颜色
borderColor: {
type: String,
default: ''
},
// 边框宽度
borderWidth: {
type: [String, Number],
default: ''
},
// 左边框
borderLeft: {
type: Boolean,
default: false
},
// 下边框
borderBottom: {
type: Boolean,
default: false
},
// 右边框
borderRight: {
type: Boolean,
default: true
},
// 文字超出隐藏
ellipsis: {
type: Boolean,
default: false
},
// 文本对齐方式
// left center right
textAlign: {
type: String,
default: 'left'
},
// 排列方式
// left center right
alignItems: {
type: String,
default: 'left'
},
// 收缩表格
shrink: {
type: Boolean,
default: true
},
// 铺满剩余空间
grow: {
type: Boolean,
default: false
},
// 隐藏
hidden: {
type: Boolean,
default: false
},
// 固定列数据
fixed: {
type: Boolean,
default: false
},
// zIndex
zIndex: {
type: Number,
default: 0
},
// 列数
index: {
type: [String, Number],
default: 0
},
// keys
keys: {
type: [String, Number],
default: ''
}
},
computed: {
tdClass() {
let clazz = ''
clazz += `${this.ellipsis ? 'tn-td--ellipsis' : 'tn-td--normal'}`
/* if (this.backgroundColorClass) {
clazz += ` ${this.backgroundColorClass}`
}
if (this.fontColorClass) {
clazz += ` ${this.fontColorClass}`
} */
if (this.alignItems) {
clazz += ` tn-td--${this.alignItems}`
}
if (this.textAlign) {
clazz += ` tn-td__text--${this.textAlign}`
}
if (!this.shrink) {
clazz += ' tn-td--shrink'
}
if (this.grow) {
clazz += ' tn-td--grow'
}
if (this.hidden) {
clazz += ' tn-td--hidden'
}
return clazz
},
tdStyle() {
let style = {}
/* if (this.backgroundColorStyle) {
style.backgroundColor = this.backgroundColorStyle
} */
/* if (this.fontColorStyle) {
style.color = this.fontColorStyle
} */
/* if (this.fontSizeStyle) {
style.fontSize = this.fontSizeStyle
} */
style.width = this.getWidth()
if (this.height) {
style.height = this.height + 'rpx';
}
style.fontWeight = this.bold ? 'bold' : 'normal'
if (this.padding) {
style.padding = this.padding
}
if (this.borderWidth !== '' || this.parentData.borderWidthValue !== '') {
style.borderWidth = this.borderWidth !== '' ? this.borderWidth+'rpx' : this.parentData.borderWidthValue + 'rpx'
}
if (this.borderColor || this.parentData.borderColorValue) {
style.borderColor = this.borderColor || this.parentData.borderColorValue
}
if (this.borderLeft) {
style.borderLeftStyle = 'solid'
}
if (this.borderRight) {
style.borderRightStyle = 'solid'
}
if (this.borderBottom) {
style.borderBottomStyle = 'solid'
}
if (this.fixed) {
style.zIndex = this.zIndex ? this.zIndex : 1000
}
return style
}
},
data() {
return {
parentData: {
borderColorValue: null,
borderWidthValue: null
}
}
},
created() {
this.parent = false
this.updateParentData()
this.parent && this.parent.children.push(this)
},
methods: {
// 获取表格宽度
getWidth() {
if (this.width) {
return this.width + 'rpx'
}
return [
'4.16666667%',
'8.33333333%',
'12.5%',
'16.66666667%',
'20.83333333%',
'25%',
'29.16666667%',
'33.33333333%',
'37.5%',
'41.66666667%',
'45.83333333%',
'50%',
'54.16666667%',
'58.33333333%',
'62.5%',
'66.66666667%',
'70.83333333%',
'75%',
'79.16666667%',
'83.33333333%',
'87.5%',
'91.66666667%',
'95.83333333%',
'100%'
][this.span - 1]
},
// 点击事件
handleClick() {
this.$emit('click', {
index: this.index,
key: this.keys
})
},
// 更新父组件信息
updateParentData() {
this.getParentData('tn-tr')
}
}
}
</script>
<style lang="scss" scoped>
.tn-td {
box-sizing: border-box;
position: relative;
word-break: break-all;
background-color: transparent;
height: auto;
padding: 12rpx;
border-width: 1rpx;
border-style: none;
border-color: var(--ui-BG-Main);
&--normal {
display: inline-flex;
align-items: center;
}
&--ellipsis {
display: inline-block;
overflow: hidden;
white-space: nowrap !important;
text-overflow: ellipsis;
}
&--shrink {
flex-shrink: 0;
}
&--grow {
flex-grow: 1;
}
&--left {
justify-content: flex-start;
}
&--center {
justify-content: center;
}
&--right {
justify-content: flex-end;
}
&__text {
&--left {
text-align: left;
}
&--center {
text-align: center;
}
&--right {
text-align: right;
}
}
&--hidden {
visibility: hidden;
}
}
</style>

208
pages/worker/levelList/components/table-tr.vue Normal file
View File

@@ -0,0 +1,208 @@
<template>
<view class="tn-tr-class tn-tr" :class="[trClass]" :style="[trStyle]">
<slot></slot>
</view>
</template>
<script>
export default {
name: 'table-tr',
options: {
// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
virtualHost: true
},
props: {
// 宽度
width: {
type: [String, Number],
default: ''
},
// 边框颜色
borderColor: {
type: String,
default: ''
},
// 边框宽度
borderWidth: {
type: [String, Number],
default: ''
},
// 左边框
borderLeft: {
type: Boolean,
default: false
},
// 上边框
borderTop: {
type: Boolean,
default: false
},
// 换行显示
wrap: {
type: Boolean,
default: false
},
// 固定表格
fixed: {
type: Boolean,
default: false
},
// left偏移值
left: {
type: [String, Number],
default: 0
},
// right偏移值
right: {
type: [String, Number],
default: 0
},
// top偏移值(自定义顶部导航栏时用到)
top: {
type: [String, Number],
default: 0
},
// 外边距
margin: {
type: String,
default: ''
},
// zIndex
zIndex: {
type: Number,
default: 0
},
// 行数索引
index: {
type: [String, Number],
default: 0
},
// 参数
params: {
type: String,
default: ''
}
},
computed: {
borderWidthValue() {
return this.borderWidth || this.parentData.borderWidth || ''
},
borderColorValue() {
return this.borderColor || this.parentData.borderColor || ''
},
trClass() {
let clazz = ''
/* if (this.backgroundColorClass) {
clazz += ` ${this.backgroundColorClass}`
}
if (this.fontColorClass) {
clazz += ` ${this.fontColorClass}`
} */
if (this.wrap) {
clazz += ' tn-tr--wrap'
}
if (this.fixed) {
clazz += ' tn-tr--fixed'
}
return clazz
},
trStyle() {
let style = {}
if (this.width) {
style.width = this.width + 'rpx'
}
/* if (this.backgroundColorStyle) {
style.backgroundColor = this.backgroundColorStyle
}
if (this.fontColorStyle) {
style.color = this.fontColorStyle
}
if (this.fontSizeStyle) {
style.fontSize = this.fontSizeStyle
} */
if (this.borderWidth !== '' || this.parentData.borderWidth !== '') {
style.borderWidth = this.borderWidth !== '' ? this.borderWidth + 'rpx' : this.parentData.borderWidth + 'rpx'
}
if (this.borderColor || this.parentData.borderColor) {
style.borderColor = this.borderColor || this.parentData.borderColor
}
if (this.borderLeft) {
style.borderLeftStyle = 'solid'
}
if (this.borderTop) {
style.borderTopStyle = 'solid'
}
if (this.fixed) {
style.left = this.left ? this.left + 'rpx' : 'auto'
style.right = this.right ? this.right + 'rpx' : 'auto'
style.top = this.top ? this.top + 'rpx' : 'auto'
}
if (this.margin) {
style.margin = this.margin
}
style.zIndex = this.zIndex ? this.zIndex : 1000
return style
}
},
data() {
return {
parentData: {
borderColor: null,
borderWidth: null
}
}
},
watch: {
parentData: {
handler() {
// 更新子组件的数据
if (this.children.length) {
this.children.map((child) => {
typeof(child.updateParentData) === 'function' && child.updateParentData()
})
}
},
deep: true
}
},
created() {
this.children = []
this.parent = false
this.updateParentData()
this.parent && this.parent.children.push(this)
},
methods: {
handleClick() {
this.$emit('click', {
index: this.index,
params: this.params
})
},
// 更新父组件信息
updateParentData() {
this.getParentData('tn-table')
}
}
}
</script>
<style lang="scss" scoped>
.tn-tr {
width: 100%;
display: flex;
box-sizing: border-box;
background-color: #FFFFFF;
border-width: 1rpx;
border-style: none none solid none;
border-color: var(--ui-BG-Main);;
&--wrap {
flex-wrap: wrap;
}
&--fixed {
position: fixed;
}
}
</style>

45
pages/worker/levelList/index.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<view class="page-app theme-light main-green font-1">
<layout ref="skill" title="技能管理"></layout>
<s-menu-tools />
</view>
</template>
<script>
import layout from '@/pages/worker/levelList/components/layout.vue';
export default {
components: {
layout,
},
props: {
},
data() {
return {
}
},
onLoad(options) {
var id = options.id;
this.$nextTick(() => {
this.$refs.skill.initData(id);
});
},
created() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.page-app {
background-color: #fff;
padding-bottom: 140rpx;
height: calc(100vh);
padding-bottom: env(safe-area-inset-bottom);
}
</style>