This commit is contained in:
2023-11-07 17:15:33 +08:00
commit fe37e2e1df
418 changed files with 53012 additions and 0 deletions
+119
View File
@@ -0,0 +1,119 @@
<template>
<view class="page-body">
<!-- 页面内容开始 -->
<!-- 表格搜索组件开始 -->
<vk-data-table-query
v-model="queryForm1.formData"
:columns="queryForm1.columns"
@search="search"
></vk-data-table-query>
<!-- 表格搜索组件结束 -->
<!-- 表格组件开始 -->
<vk-data-table
ref="table1"
:action="table1.action"
:columns="table1.columns"
:query-form-param="queryForm1"
:right-btns="['detail_auto']"
:row-no="true"
:pagination="true"
></vk-data-table>
<!-- 表格组件结束 -->
<!-- 页面内容结束 -->
</view>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
data() {
// 页面数据变量
return {
// 页面是否请求中或加载中
loading: false,
// init请求返回的数据
data: {},
// 表格相关开始 -----------------------------------------------------------
table1: {
// 表格数据请求地址
action: "admin/system_uni/admin-log/sys/getList",
// 表格字段显示规则
columns: [
{ key: "user_id", title: "操作者用户ID", type: "text", width: 120 },
{ key: "user_name", title: "操作者用户昵称", type: "text", width: 120 },
{ key: "title", title: "标题", type: "text", width: 140 },
{ key: "url", title: "url", type: "text", width: 280 },
{ key: "_add_time", title: "添加时间", type: "time", width: 140 },
{ key: "_add_time", title: "距离现在", type: "dateDiff", width: 120 },
{ key: "request_param", title: "请求参数", type: "json", width: 300 },
{ key: "response", title: "返回参数", type: "json", width: 300 },
{ key: "ip", title: "ip地址", type: "text", width: 140 },
{ key: "request_id", title: "请求id", type: "text", width: 280 }
],
// 多选框选中的值
multipleSelection: [],
// 当前高亮的记录
selectItem: ""
},
// 表格相关结束 -----------------------------------------------------------
// 表单相关开始 -----------------------------------------------------------
// 查询表单请求数据
queryForm1: {
// 查询表单数据源,可在此设置默认值
formData: {},
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
columns: [
{ key: "user_id", title: "用户ID", type: "text", mode: "=" },
{ key: "title", title: "标题", type: "text", mode: "%%" },
{ key: "ip", title: "ip地址", type: "text", mode: "%%" },
{ key: "_add_time", title: "添加时间", type: "datetimerange", width: 400, mode: "[]" }
]
}
// 表单相关结束 -----------------------------------------------------------
};
},
// 监听 - 页面每次【加载时】执行(如:前进)
onLoad(options = {}) {
that = this;
vk = that.vk;
that.options = options;
that.init(options);
},
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快,会在页面进入动画完成前触发
onReady() {},
// 监听 - 页面每次【显示时】执行(如:前进和返回) (页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面)
onShow() {},
// 监听 - 页面每次【隐藏时】执行(如:返回)
onHide() {},
// 函数
methods: {
// 页面数据初始化函数
init(options) {},
// 搜索
search(obj) {
that.$refs.table1.query(obj);
},
// 刷新
refresh() {
that.$refs.table1.refresh();
}
},
watch: {
},
// 过滤器
filters: {
},
// 计算属性
computed: {
}
};
</script>
<style lang="scss" scoped>
</style>
@@ -0,0 +1,128 @@
<template>
<vk-data-dialog
v-model="value.show"
:title="page.title"
:top="page.top"
:width="page.width"
:close-on-click-modal="true"
mode="form"
>
<!-- 页面主体内容开始 -->
<vk-data-form
ref="form1"
v-model="form1.data"
:form-type="value.mode"
:rules="form1.props.rules"
:action="form1.props.action"
:columns="form1.props.columns"
:loading.sync="form1.props.loading"
:labelWidth="form1.props.labelWidth"
:show-cancel="page.showCancel"
:cancel-text="page.cancelText"
:submit-text="page.submitText"
@success="onFormSuccess"
></vk-data-form>
<!-- 页面主体内容结束 -->
</vk-data-dialog>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
props: {
value: {
Type: Object,
default: function() {
return {
show: false,
mode: "",
item: {}
};
}
}
},
data: function() {
// 组件创建时,进行数据初始化
return {
page: {
title: "添加分组",
submitText: "确定",
cancelText: "关闭",
showCancel: true,
top: "14vh",
width: "450px"
},
form1: {
// 表单请求数据,此处可以设置默认值
data: {},
// 表单属性
props: {
// 表单请求地址
action: "admin/system_uni/uni-id-files/categories/sys/add",
// 表单字段显示规则
columns: [
// 常用字段类型
{ key: "name", title: "名称", type: "text" }
],
// 表单验证规则
rules: {
name: [
{ required: true, message: '名称不能为空', trigger: 'change' },
{ max: 16, message: '最多16字', trigger: 'change' }
],
},
labelWidth: "60px"
}
}
};
},
mounted() {
that = this;
that.init();
},
methods: {
// 初始化
init() {
let { value } = that;
that.$emit("input", value);
},
// 监听 - 页面打开
onOpen() {
that = this;
let { item } = that.value;
that.form1.data = {
_id: item._id,
name: item.name
};
},
// 监听 - 页面关闭
onClose() {
that.$refs.form1.resetForm(); // 关闭时,重置表单
},
// 监听 - 提交成功后
onFormSuccess() {
that.value.show = false; // 关闭页面
that.$emit("success");
}
},
watch: {
"value.show": {
handler(newValue, oldValue) {
let that = this;
if (newValue) {
that.onOpen();
} else {
that.onClose();
}
}
}
},
// 过滤器
filters: {},
// 计算属性
computed: {}
};
</script>
<style lang="scss" scoped></style>
@@ -0,0 +1,107 @@
<template>
<vk-data-dialog
v-model="value.show"
:title="page.title"
:top="page.top"
:width="page.width"
:close-on-click-modal="true"
:show-fullscreen="false"
:show-header="false"
:destroy-on-close="true"
mode="form"
>
<!-- 页面主体内容开始 -->
<image v-if="value.item.type === 'image'" :src="value.item.url" mode="widthFix" style="width: 100%;display: block;"></image>
<view v-else-if="value.item.type === 'video' && value.show" :style="styleCom" style="margin: auto;">
<video :src="value.item.url" autoplay object-fit="cover" style="width: 100%;height: 100%;display: block;"></video>
</view>
<!-- 页面主体内容结束 -->
</vk-data-dialog>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
props: {
value: {
Type: Object,
default: function() {
return {
show: false,
mode: "",
item: {}
};
}
}
},
data: function() {
// 组件创建时,进行数据初始化
return {
page: {
title: "预览",
submitText: "确定",
cancelText: "关闭",
showCancel: true,
top: "2vh",
width: "600px"
},
styleCom:{}
};
},
mounted() {
that = this;
that.init();
},
methods: {
// 初始化
init() {
let { value } = that;
that.$emit("input", value);
},
// 监听 - 页面打开
onOpen() {
that = this;
let { item } = that.value;
let { width, height=700, type } = item;
//if(type === "video"){
let showWidth = width;
let showHeight = height;
let maxHeight = 700;
if(height > maxHeight){
showHeight = maxHeight;
showWidth = width / height * maxHeight;
}
that.styleCom = {
width : `${showWidth}px`,
height : `${showHeight}px`
};
that.page.width = that.styleCom.width;
that.$set(that.value.item,"play",true);
//}
},
// 监听 - 页面关闭
onClose() {
that.$set(that.value.item,"play",false);
}
},
watch: {
"value.show": {
handler(newValue, oldValue) {
let that = this;
if (newValue) {
that.onOpen();
} else {
that.onClose();
}
}
}
},
// 过滤器
filters: {},
// 计算属性
computed: {}
};
</script>
<style lang="scss" scoped></style>
@@ -0,0 +1,130 @@
<template>
<vk-data-dialog
v-model="value.show"
:title="page.title"
:top="page.top"
:width="page.width"
:close-on-click-modal="true"
mode="form"
>
<!-- 页面主体内容开始 -->
<vk-data-form
ref="form1"
v-model="form1.data"
:form-type="value.mode"
:rules="form1.props.rules"
:action="form1.props.action"
:columns="form1.props.columns"
:loading.sync="form1.props.loading"
:labelWidth="form1.props.labelWidth"
:show-cancel="page.showCancel"
:cancel-text="page.cancelText"
:submit-text="page.submitText"
@success="onFormSuccess"
></vk-data-form>
<!-- 页面主体内容结束 -->
</vk-data-dialog>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
props: {
value: {
Type: Object,
default: function() {
return {
show: false,
mode: "",
item: {}
};
}
}
},
data: function() {
// 组件创建时,进行数据初始化
return {
page: {
title: "修改分组名称",
submitText: "确定",
cancelText: "关闭",
showCancel: true,
top: "14vh",
width: "450px"
},
form1: {
// 表单请求数据,此处可以设置默认值
data: {},
// 表单属性
props: {
// 表单请求地址
action: "admin/system_uni/uni-id-files/categories/sys/update",
// 表单字段显示规则
columns: [
// 常用字段类型
{ key: "name", title: "名称", type: "text" }
],
// 表单验证规则
rules: {
name: [
{ required: true, message: '名称不能为空', trigger: 'change' },
{ max: 16, message: '最多16字', trigger: 'change' }
],
},
labelWidth: "60px"
}
}
};
},
mounted() {
that = this;
that.init();
},
methods: {
// 初始化
init() {
let { value } = that;
that.$emit("input", value);
},
// 监听 - 页面打开
onOpen() {
that = this;
let { item } = that.value;
that.form1.data = {
_id: item._id,
name: item.name
};
},
// 监听 - 页面关闭
onClose() {
// that.$refs.form1.resetForm(); // 关闭时,重置表单
},
// 监听 - 提交成功后
onFormSuccess() {
// 此代码用处是直接将修改结果显示到页面上,而不需要进行数据库查询。
that.value.item.name = that.form1.data.name;
that.value.show = false; // 关闭页面
that.$emit("success");
}
},
watch: {
"value.show": {
handler(newValue, oldValue) {
let that = this;
if (newValue) {
that.onOpen();
} else {
that.onClose();
}
}
}
},
// 过滤器
filters: {},
// 计算属性
computed: {}
};
</script>
<style lang="scss" scoped></style>
@@ -0,0 +1,137 @@
<template>
<vk-data-dialog
v-model="value.show"
:title="page.title"
:top="page.top"
:width="page.width"
:close-on-click-modal="true"
mode="form"
>
<!-- 页面主体内容开始 -->
<vk-data-form
ref="form1"
v-model="form1.data"
:form-type="value.mode"
:rules="form1.props.rules"
:action="form1.props.action"
:columns="form1.props.columns"
:loading.sync="form1.props.loading"
:labelWidth="form1.props.labelWidth"
:show-cancel="page.showCancel"
:cancel-text="page.cancelText"
:submit-text="page.submitText"
@success="onFormSuccess"
>
<template v-slot:category_id="{ form, keyName }">
<vk-data-input-radio
width="100%"
v-model="form[keyName]"
:localdata="value.list"
:props="{ value:'_id', label:'name' }"
placeholder="请选择分组"
border
:item-width="300"
></vk-data-input-radio>
</template>
</vk-data-form>
<!-- 页面主体内容结束 -->
</vk-data-dialog>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
props: {
value: {
Type: Object,
default: function() {
return {
show: false,
mode: "",
item: {},
list:[]
};
}
}
},
data: function() {
// 组件创建时,进行数据初始化
return {
page: {
title: "修改分组",
submitText: "确定",
cancelText: "关闭",
showCancel: true,
top: "14vh",
width: "450px"
},
form1: {
// 表单请求数据,此处可以设置默认值
data: {},
// 表单属性
props: {
// 表单请求地址
action: "admin/system_uni/uni-id-files/files/kh/update",
// 表单字段显示规则
columns: [
{
key:"category_id", title:"分组", type:"select", placeholder:"请选择分组",
}
],
// 表单验证规则
rules: {},
labelWidth: "60px"
}
}
};
},
mounted() {
that = this;
that.init();
},
methods: {
// 初始化
init() {
let { value } = that;
that.$emit("input", value);
},
// 监听 - 页面打开
onOpen() {
that = this;
let { item } = that.value;
that.form1.data = {
_id: item._id,
category_id: item.category_id
};
},
// 监听 - 页面关闭
onClose() {
// that.$refs.form1.resetForm(); // 关闭时,重置表单
},
// 监听 - 提交成功后
onFormSuccess() {
that.value.show = false; // 关闭页面
that.$emit("success");
}
},
watch: {
"value.show": {
handler(newValue, oldValue) {
let that = this;
if (newValue) {
that.onOpen();
} else {
that.onClose();
}
}
}
},
// 过滤器
filters: {},
// 计算属性
computed: {}
};
</script>
<style lang="scss" scoped></style>
@@ -0,0 +1,128 @@
<template>
<vk-data-dialog
v-model="value.show"
:title="page.title"
:top="page.top"
:width="page.width"
:close-on-click-modal="true"
mode="form"
>
<!-- 页面主体内容开始 -->
<vk-data-form
ref="form1"
v-model="form1.data"
:form-type="value.mode"
:rules="form1.props.rules"
:action="form1.props.action"
:columns="form1.props.columns"
:loading.sync="form1.props.loading"
:labelWidth="form1.props.labelWidth"
:show-cancel="page.showCancel"
:cancel-text="page.cancelText"
:submit-text="page.submitText"
@success="onFormSuccess"
></vk-data-form>
<!-- 页面主体内容结束 -->
</vk-data-dialog>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
props: {
value: {
Type: Object,
default: function() {
return {
show: false,
mode: "",
item: {}
};
}
}
},
data: function() {
// 组件创建时,进行数据初始化
return {
page: {
title: "修改文件名称",
submitText: "确定",
cancelText: "关闭",
showCancel: true,
top: "14vh",
width: "450px"
},
form1: {
// 表单请求数据,此处可以设置默认值
data: {},
// 表单属性
props: {
// 表单请求地址
action: "admin/system_uni/uni-id-files/files/kh/update",
// 表单字段显示规则
columns: [
{ key: "display_name", title: "名称", type: "text" },
],
// 表单验证规则
rules: {
display_name: [
{ required: true, message: '名称不能为空', trigger: 'change' },
{ max: 32, message: '最多32字', trigger: 'change' }
],
},
labelWidth: "60px"
}
}
};
},
mounted() {
that = this;
that.init();
},
methods: {
// 初始化
init() {
let { value } = that;
that.$emit("input", value);
},
// 监听 - 页面打开
onOpen() {
that = this;
let { item } = that.value;
that.form1.data = {
_id: item._id,
display_name: item.display_name
};
},
// 监听 - 页面关闭
onClose() {
// that.$refs.form1.resetForm(); // 关闭时,重置表单
},
// 监听 - 提交成功后
onFormSuccess() {
that.value.item.display_name = that.form1.data.display_name;
that.value.show = false; // 关闭页面
that.$emit("success");
}
},
watch: {
"value.show": {
handler(newValue, oldValue) {
let that = this;
if (newValue) {
that.onOpen();
} else {
that.onClose();
}
}
}
},
// 过滤器
filters: {},
// 计算属性
computed: {}
};
</script>
<style lang="scss" scoped></style>
@@ -0,0 +1,131 @@
<template>
<vk-data-dialog
v-model="value.show"
:title="page.title"
:top="page.top"
:width="page.width"
:close-on-click-modal="true"
mode="form"
>
<!-- 页面主体内容开始 -->
<vk-data-form
ref="form1"
v-model="form1.data"
:form-type="value.mode"
:rules="form1.props.rules"
:action="form1.props.action"
:columns="form1.props.columns"
:loading.sync="form1.props.loading"
:labelWidth="form1.props.labelWidth"
:show-cancel="page.showCancel"
:cancel-text="page.cancelText"
:submit-text="page.submitText"
@success="onFormSuccess"
></vk-data-form>
<!-- 页面主体内容结束 -->
</vk-data-dialog>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
props: {
value: {
Type: Object,
default: function() {
return {
show: false,
mode: "",
item: {}
};
}
}
},
data: function() {
// 组件创建时,进行数据初始化
return {
page: {
title: "编辑视频信息",
submitText: "确定",
cancelText: "关闭",
showCancel: true,
top: "14vh",
width: "450px"
},
form1: {
// 表单请求数据,此处可以设置默认值
data: {},
// 表单属性
props: {
// 表单请求地址
action: "admin/system_uni/uni-id-files/files/kh/update",
// 表单字段显示规则
columns: [
{ key: "display_name", title: "名称", type: "text" },
{ key: "cover_image", title: "封面图", type: "image", limit:1 },
],
// 表单验证规则
rules: {
display_name: [
{ required: true, message: '名称不能为空', trigger: 'change' },
{ max: 32, message: '最多32字', trigger: 'change' }
],
},
labelWidth: "60px"
}
}
};
},
mounted() {
that = this;
that.init();
},
methods: {
// 初始化
init() {
let { value } = that;
that.$emit("input", value);
},
// 监听 - 页面打开
onOpen() {
that = this;
let { item } = that.value;
that.form1.data = {
_id: item._id,
display_name: item.display_name,
cover_image: item.cover_image
};
},
// 监听 - 页面关闭
onClose() {
// that.$refs.form1.resetForm(); // 关闭时,重置表单
},
// 监听 - 提交成功后
onFormSuccess() {
that.$set(that.value.item,"display_name",that.form1.data.display_name);
that.$set(that.value.item,"cover_image",that.form1.data.cover_image);
that.value.show = false; // 关闭页面
that.$emit("success");
}
},
watch: {
"value.show": {
handler(newValue, oldValue) {
let that = this;
if (newValue) {
that.onOpen();
} else {
that.onClose();
}
}
}
},
// 过滤器
filters: {},
// 计算属性
computed: {}
};
</script>
<style lang="scss" scoped></style>
@@ -0,0 +1,143 @@
<template>
<vk-data-dialog
v-model="value.show"
:title="page.title"
:top="page.top"
:width="page.width"
:close-on-click-modal="false"
:show-fullscreen="false"
:show-close="false"
:destroy-on-close="true"
mode="form"
>
<!-- 页面主体内容开始 -->
<view class="body" v-if="total>1">
<view>
<text>总进度:{{ currentIndex+1 }} / {{ total }}</text>
<el-progress :percentage="totalPercentage"></el-progress>
</view>
<view style="margin-top: 10px;">
<text>文件{{currentIndex+1}}进度:</text>
<el-progress :percentage="currentPercentage"></el-progress>
</view>
<view style="margin-top: 10px;text-align: center;">正在上传第 {{currentIndex+1}} 个文件</view>
</view>
<view class="body" v-else>
<view style="text-align: center;">
<el-progress :percentage="currentPercentage" type="circle"></el-progress>
</view>
</view>
<!-- 页面主体内容结束 -->
</vk-data-dialog>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
props: {
value: {
Type: Object,
default: function() {
return {
show: false,
mode: "",
item: {}
};
}
}
},
data: function() {
// 组件创建时,进行数据初始化
return {
page: {
title: "上传进度",
submitText: "确定",
cancelText: "关闭",
showCancel: true,
top: "40vh",
width: "500px"
},
total:0,
totalPercentage: 0, // 总进度
currentPercentage: 0, // 当前文件进度
currentIndex: 0,
};
},
mounted() {
that = this;
that.init();
},
methods: {
// 初始化
init() {
let { value } = that;
that.$emit("input", value);
},
// 监听 - 页面打开
onOpen() {
that = this;
let { item={} } = that.value;
that.upload(item);
},
// 监听 - 页面关闭
onClose() {
},
async upload(item){
let that = this;
let { vk } = that;
let { tempFilePaths, tempFiles, categoryId, fileType } = item;
that.total = tempFilePaths.length;
that.totalPercentage = 0;
for (let i = 0; i < tempFilePaths.length; i++) {
that.currentPercentage = 0;
that.currentIndex = i;
let percentage = vk.pubfn.toDecimal((i+1) / tempFilePaths.length * 100, 0);
try {
await vk.uploadFile({
filePath: tempFilePaths[i],
file: tempFiles[i],
needSave: true,
fileType,
category_id: categoryId,
onUploadProgress:(progressRes) => {
// 上传过程中
that.currentPercentage = progressRes.progress;
},
});
that.totalPercentage = percentage;
} catch(err){
console.error(err);
}
}
that.onSuccess();
},
// 监听 - 提交成功后
onSuccess() {
that.value.show = false; // 关闭页面
that.$emit("success");
}
},
watch: {
"value.show": {
handler(newValue, oldValue) {
let that = this;
if (newValue) {
that.onOpen();
} else {
that.onClose();
}
}
}
},
// 计算属性
computed: {}
};
</script>
<style lang="scss" scoped>
.body{
padding: 30px;
}
</style>
@@ -0,0 +1,704 @@
<template>
<view class="page-body">
<!-- 页面内容开始 -->
<view class="header">
<view class="header-item" style="margin-left:0;">
<el-button type="primary" :round="false" size="small" icon="el-icon-plus upload-btn" @click="uploadFile" > 上传 </el-button>
</view>
<view class="header-item">
<el-radio-group v-model="queryForm1.formData.type" size="small" @change="getList">
<el-radio-button label="image">图片</el-radio-button>
<el-radio-button label="video">视频</el-radio-button>
<el-radio-button label="other">其他</el-radio-button>
</el-radio-group>
</view>
<view class="header-item">
<el-input class="search-input input-border-radius-4004" size="small" type="text" clearable placeholder="请输入名称搜索..." v-model="queryForm1.formData.display_name" @keyup.enter.native="getList" @clear="getList" />
<el-button type="primary" :loading="loading.main" :round="false" size="small" icon="el-icon-search" @click.stop="getList" style="border-radius: 0 4px 4px 0;" ></el-button>
</view>
<view class="header-item">
<el-input class="search-input input-border-radius-4004" size="small" type="text" clearable placeholder="请输入URL搜索..." v-model="queryForm1.formData.url" @keyup.enter.native="getList" @clear="getList" />
<el-button type="primary" :loading="loading.main" :round="false" size="small" icon="el-icon-search" @click.stop="getList" style="border-radius: 0 4px 4px 0;" ></el-button>
</view>
</view>
<view class="nav" v-loading="loading.nav">
<view
class="nav-list"
v-for="(item, index) of data.navList" :key="index"
:class="queryForm1.formData.category_id == item._id ? 'selected-nav' : ''"
@click.stop="queryByCategory(item._id)"
>
<text class="nav-name text-one">{{ item.name }}</text>
<view class="nav-btn">
<view v-if="index > 1" class="btn el-icon-edit" @click.stop="vk.pubfn.openForm('updateCategory', { item })" ></view>
<el-popconfirm v-if="index > 1" title="确定删除该分组吗?(组内图片不会删除)" @confirm="deleteCategory(item._id, index)" >
<view slot="reference" class="btn el-icon-delete" @click.stop="stop"></view>
</el-popconfirm>
</view>
</view>
<view class="add-group" @click.stop="vk.pubfn.openForm('addCategory')">添加分组</view>
</view>
<view class="main" v-loading="loading.main">
<!-- 内容详情 -->
<view
class="content-item"
:class="[selectedIds.includes(item._id) ? 'choose-image' : '']"
v-for="(item, index) in data.content.rows" :key="index"
@click.stop="clickFile(item)"
>
<view class="item-file">
<image :src="item.url" mode="aspectFit" v-if="item.type === 'image'"></image>
<view class="vk-contents" v-else-if="item.type === 'video'">
<image :src="item | coverImageFilter" mode="aspectFit"></image>
<view class="duration">{{ item.duration | durationFilter }}</view>
<view class="size">{{ item.size | sizeFilter(["B","KB","MB","GB"],1024,1,"MB") }}</view>
<vk-data-icon :name="item.play ?'el-icon-video-pause':'el-icon-video-play'" size="40" color="#d9d9d9" class="video-play-btn" @click="preview(item)"></vk-data-icon>
</view>
<view :src="item.url" class="other-icon" v-else>
<vk-data-icon name="el-icon-document" size="80" color="#d5d5de"></vk-data-icon>
<view class="size">{{ item.size | sizeFilter(["B","KB","MB","GB"],1024,1) }}</view>
<view class="suffix">{{ item.original_name | suffixFilter }}</view>
</view>
</view>
<view class="tips">
<text class="title">{{ item.display_name }}</text>
<text class="operation" v-if="item.type === 'video'" @click="vk.pubfn.openForm('updateVideo', { item })">编辑</text>
<text class="operation" v-else @click="vk.pubfn.openForm('updateFileName', { item })">改名</text>
<el-tooltip class="operation" placement="bottom">
<text>链接</text>
<view slot="content">
<view style="text-align: center;">
<el-button type="text" @click="copyFileUrl(item.url)" style="margin-left: 0px;"> 复制 </el-button>
<el-button type="text" @click="preview(item)" style="margin-left: 30px;"> 预览 </el-button>
</view>
<view>{{ item.url }}</view>
</view>
</el-tooltip>
<text class="operation" @click="vk.pubfn.openForm('updateFileCategory', { item, list: data.navList })" > 分组 </text>
<el-popconfirm class="operation" title="确定删除吗?" @confirm="deleteFile(item._id)">
<text slot="reference" @click.stop="stop">删除</text>
</el-popconfirm>
</view>
</view>
<!-- 上传的按钮 -->
<view class="update-img" @click.stop="uploadFile"></view>
</view>
<view class="footer" :class="selectedIds.length ? '' : 'no-selected'">
<label :style="data.content.rows.length ? '' : 'pointer-events: none;'" class="footer-label" @click.stop="selectAll" >
<checkbox style="transform: scale(0.6);" class="checkbox" :checked="selectedIds.length ? true : false" />
<text>已选</text>
<text class="num">{{ selectedIds.length }} / {{ data.content.rows.length }}</text>
<text>项</text>
</label>
<text class="footer-item" @click.stop=" vk.pubfn.openForm('updateFileCategory', { item: { _id: selectedIds }, list: data.navList }) " >
保存到组
</text>
<el-popconfirm class="footer-item" title="确定删除吗?" @confirm="deleteFile(selectedIds)" >
<text slot="reference">删除</text>
</el-popconfirm>
<!-- 底部分页内容 -->
<el-pagination
class="paging"
background
:total="data.content.total"
:current-page="queryForm1.pageIndex"
:page-size="queryForm1.pageSize"
:page-sizes="[30, 50, 100]"
:pager-count="5"
layout="total, sizes, prev, pager, next, jumper"
@size-change=" val => { queryForm1.pageSize = val; getList(); } "
@current-change=" val => { queryForm1.pageIndex = val; getList(); } "
></el-pagination>
</view>
<!-- 页面内容结束 -->
<!-- 弹窗列表 -->
<addCategory v-model="formDatas.addCategory" @success="getNavList"></addCategory>
<updateCategory v-model="formDatas.updateCategory"></updateCategory>
<updateFileCategory v-model="formDatas.updateFileCategory" @success="getList();selectedIds = [];"></updateFileCategory>
<updateFileName v-model="formDatas.updateFileName"></updateFileName>
<updateVideo v-model="formDatas.updateVideo"></updateVideo>
<preview v-model="formDatas.preview"></preview>
<uploadProgress v-model="formDatas.uploadProgress" @success="getList();"></uploadProgress>
</view>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
import addCategory from "./form/addCategory";
import updateCategory from "./form/updateCategory";
import updateFileCategory from "./form/updateFileCategory";
import updateFileName from "./form/updateFileName";
import updateVideo from "./form/updateVideo";
import preview from "./form/preview";
import uploadProgress from "./form/uploadProgress";
export default {
components: {
addCategory,
updateCategory,
updateFileCategory,
updateFileName,
updateVideo,
preview,
uploadProgress
},
data() {
// 页面数据变量
return {
// 选中的
selectedIds: [],
// 页面是否请求中或加载中
loading: {
nav: false,
main: false
},
// init请求返回的数据
data: {
// 分组列表
navList: [],
// 文件数据
content: {
rows: [],
total: 0
}
},
// 查询表单
queryForm1: {
pageIndex: 1,
pageSize: 30,
formData: {
display_name: "",
category_id: "",
type: "image"
},
columns: [
{ key: "display_name", title: "名称", type: "text", mode: "%%" },
{ key: "url", title: "URL", type: "text", mode: "=" },
{ key: "category_id", title: "分类id", type: "text", mode: "=" },
{ key: "type", title: "文件类型", type: "text", mode: "=" }
]
},
formDatas: {}
// 表单相关开始 -----------------------------------------------------------
};
},
// 监听 - 页面每次【加载时】执行(如:前进)
onLoad(options = {}) {
that = this;
vk = that.vk;
that.options = options;
that.init(options);
},
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快,会在页面进入动画完成前触发
onReady() {},
// 监听 - 页面每次【显示时】执行(如:前进和返回) (页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面)
onShow() {},
// 监听 - 页面每次【隐藏时】执行(如:返回)
onHide() {},
// 函数
methods: {
// 页面数据初始化函数
init(options) {
that.getNavList();
that.getList();
},
// 获取文件列表
getList() {
let { queryForm1, selectedIds } = that;
vk.callFunction({
url: "admin/system_uni/uni-id-files/files/kh/getList",
loading: { that, name: "loading.main" },
data: queryForm1,
success: function(data) {
that.data.content = data;
selectedIds.length = 0;
}
});
},
// 获取分类列表
getNavList() {
vk.callFunction({
url: "admin/system_uni/uni-id-files/categories/kh/getList",
loading: { that, name: "loading.nav" },
data: {
pageIndex: 1,
pageSize: 100
},
success: function(data) {
that.data.navList = [
{ _id: "", name: "全部" },
{ _id: "null", name: "未分组" },
...data.rows
];
}
});
},
// 查询指定分类下的文件列表
queryByCategory(category_id) {
if (that.queryForm1.formData.category_id != category_id) {
that.queryForm1.formData.category_id = category_id;
that.getList();
}
},
// 删除分组
deleteCategory(_id, index) {
vk.callFunction({
url: "admin/system_uni/uni-id-files/categories/sys/delete",
loading: { that, name: "loading.nav" },
data: {
_id
},
success: function(data) {
that.data.navList.splice(index, 1);
}
});
},
// 删除
deleteFile(ids) {
vk.callFunction({
url: "admin/system_uni/uni-id-files/files/kh/delete",
title:"请求中...",
data: {
_id: ids
},
success: function(data) {
if(data.num>0){
if (typeof ids !== "object") ids = [ids];
ids.map(id => {
let index = vk.pubfn.getListIndex(that.data.content.rows, "_id", id);
if (index > -1) {
that.data.content.rows.splice(index, 1);
}
});
that.selectedIds = [];
}
}
});
},
uploadFile(){
let type = that.queryForm1.formData.type;
let fileType;
let extension = [];
if(type === "image"){
extension = ["png", "jpg", "jpeg", "gif", "bmp", "svg", "webp", "jfif", "dpg"];
fileType = "image";
}else if(type === "video"){
extension = ["avi", "mp3", "mp4", "3gp", "mov", "rmvb", "rm", "flv", "mkv", "wmv", "m3u8", "mpg", "mpeg", "dat", "asf"];
fileType = "video";
}else if(type === "other"){
extension = ["txt","pdf","xls","xlsx","ppt","pptx","doc","docx","rar","zip"];
}
uni.chooseFile({
extension,
success: async res => {
let item = {
tempFilePaths: res.tempFilePaths,
tempFiles: res.tempFiles,
categoryId: that.queryForm1.formData.category_id,
fileType,
};
vk.pubfn.openForm('uploadProgress', { item });
// vk.showLoading("上传中...");
// for (let i = 0; i < res.tempFilePaths.length; i++) {
// let percentage = vk.pubfn.toDecimal((i+1) / res.tempFilePaths.length * 100, 0);
// try {
// await vk.uploadFile({
// filePath: res.tempFilePaths[i],
// file: res.tempFiles[i],
// needSave: true,
// fileType,
// category_id: that.queryForm1.formData.category_id,
// onUploadProgress:function(progressRes){
// // 上传过程中
// vk.showLoading(`文件${i+1}:${progressRes.progress}%\n`);
// },
// });
// vk.showLoading(`总上传进度:${percentage}%`);
// } catch(err){
// console.error(err);
// }
// }
// vk.hideLoading();
// that.getList();
}
});
},
// 复制文件的URL
copyFileUrl(data) {
uni.setClipboardData({
data,
success: res => {
that.$message({
message: "URL已复制",
type: "success"
});
}
});
},
// 预览
preview(item){
let { type, url } = item;
if(type === "image"){
vk.pubfn.openForm('preview', { item })
}else if(type === "video"){
vk.pubfn.openForm('preview', { item })
}else{
vk.toast("暂不支持该类型文件的预览");
}
},
// 点击了文件
clickFile(item) {
let index = that.selectedIds.indexOf(item._id);
if (index > -1) {
that.selectedIds.splice(index, 1);
} else {
that.selectedIds.push(item._id);
}
},
// 全选
selectAll() {
if (that.selectedIds.length &&that.data.content.rows.length == that.selectedIds.length) {
that.selectedIds = [];
} else {
that.data.content.rows.forEach((value, index, arr) => {
if (!that.selectedIds.includes(value._id)) {
that.selectedIds.push(value._id);
}
});
}
},
stop() {}
},
watch: {},
// 过滤器
filters: {
suffixFilter(name=""){
let arr = name.split(".");
return arr[arr.length-1];
},
coverImageFilter(item){
let src = "";
let { cover_image, url, width=600, height=600 } = item;
if(cover_image){
src = cover_image;
}else{
src = `${url}?x-oss-process=video/snapshot,t_1000,f_jpg,w_${width},h_${height},m_fast`;
}
console.log('src: ', src)
return src;
},
durationFilter(value){
let result = parseInt(value);
let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
return `${h}:${m}:${s}`;
}
},
// 计算属性
computed: {}
};
</script>
<style lang="scss" scoped>
page,
.page-body {
width: 100%;
height: 100%;
}
// 页面主体内容区域
.page-body {
display: grid;
grid-template-columns: 180px auto;
grid-template-rows: 35px auto 40px;
grid-gap: 8px 0px;
position: relative;
}
.header {
display: flex;
align-items: center;
grid-column: 1 / -1;
font-size: 14px;
user-select: none;
.el-button {
height: 32px;
}
}
// 搜索
.header-item {
margin-left: 20px;
height: 100%;
display: flex;
border-radius: 4px;
overflow: hidden;
.search-input {
width: 200px;
}
.el-button {
height: 32px;
}
}
.nav {
height: 100%;
grid-row: 2 / -1;
border: 1px solid #e4e2e2;
display: grid;
grid-template-rows: repeat(auto-fill, 40px);
color: #59607b;
font-size: 12px;
overflow-y: auto;
box-sizing: border-box;
padding-bottom: 10px;
}
.nav-list {
cursor: pointer;
border-bottom: 1px solid #e4e2e2;
box-sizing: border-box;
height: 40px;
overflow: hidden;
transition: all 0.3s;
background-color: #f6f4f4;
padding-left: 10px;
display: flex;
align-items: center;
> i {
font-size: 13px;
place-self: center;
}
&:hover {
color: #108ee9;
}
.nav-name {
flex: 1;
}
.nav-btn {
width: 44px;
display: flex;
align-items: center;
.btn {
width: 22px;
display: block;
}
}
}
// 选中的分栏
.selected-nav {
background-color: #ecf6fd !important;
color: #108ee9 !important;
}
// 添加分组的按钮
.add-group {
width: 60%;
margin: 5px auto;
padding: 5px 0px;
text-align: center;
border: 1px dashed #108ee9;
color: #108ee9;
cursor: pointer;
}
.add-group:hover {
background-color: #108ee9;
color: #ffffff;
opacity: 0.9;
}
.add-group:active {
background-color: #108ee9;
color: #ffffff;
}
// 内容详情
.main {
display: grid;
grid-template-columns: repeat(auto-fill, 135px);
grid-template-rows: repeat(auto-fill, 180px);
grid-gap: 20px;
place-content: start center;
overflow-y: auto;
min-width: 700px;
}
.update-img,
.content-item {
width: 135px;
height: 180px;
border: 1px solid #e4e2e2;
cursor: pointer;
background-color: transparent;
transition: all 0.25s;
position: relative;
overflow: hidden;
}
// 被选中的
.choose-image {
background-color: #ecf6fd !important;
border: 1px solid #daedff;
.tips{
background-color: #ecf6fd;
}
}
.content-item:hover {
background-color: #ecf6fd;
border: 1px solid #daedff;
}
.item-file {
width: 100%;
height: 150px;
position: relative;
image {
width: 100%;
height: 100%;
}
.suffix{
position: absolute;
top:2px;
right: 6px;
font-size: 12px;
color: #a7a7a7;
}
.duration{
position: absolute;
bottom:0px;
left: 0px;
font-size: 12px;
color: #FFFFFF;
background-color: #b2b2b2;
padding: 0px 2px;
}
.size{
position: absolute;
bottom:0px;
right: 0px;
font-size: 12px;
color: #FFFFFF;
background-color: #b2b2b2;
padding: 0px 2px;
}
.video-play-btn{
position: absolute;
top:54px;
left:47px;
background-color: rgba(66,66,66,0.6);
border-radius: 50%;
}
.other-icon{
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
}
.content-item:hover > .tips {
transform: translateY(0%) !important;
}
// 上传按钮
.update-img {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #d5d5de;
&::before {
line-height: 1;
font-size: 45px;
content: "+";
}
&::after {
content: "上传";
font-size: 12px;
}
}
.tips {
position: absolute;
height: 60px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #fff;
transition: all 0.4s;
transform: translateY(50%);
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 5px 0px;
font-size: 13px;
place-items: center;
}
.title {
text-align: center;
grid-column: 1 / -1;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.operation {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
&:hover {
color: #108ee9;
}
}
// 保存到组、删除、下载链接
.footer {
background-color: #f4faff;
display: flex;
align-items: center;
font-size: 12px;
color: #3091f2;
}
.paging {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
}
.footer-item {
padding: 2px 9px;
border: 1px solid #3091f2;
margin-left: 8px;
cursor: pointer;
background-color: #ffffff;
}
.no-selected {
.footer-item {
pointer-events: none;
color: #ced0d5;
background-color: #fff;
border-color: #ebeef5 !important;
}
}
.footer-label {
display: flex;
align-items: center;
user-select: none;
color: #59607b;
.checkbox {
margin: 0;
padding: 0;
outline: none;
}
}
.num {
min-width: 50px;
text-align: center;
margin: 0 10px;
color: #3091f2;
}
::v-deep .input-border-radius-4004 .el-input__inner{
border-radius: 4px 0px 0px 4px;
}
</style>
+182
View File
@@ -0,0 +1,182 @@
<template>
<view class="page-body">
<!-- 页面内容开始 -->
<!-- 表格搜索组件开始 -->
<vk-data-table-query
v-model="queryForm1.formData"
:columns="queryForm1.columns"
@search="search"
></vk-data-table-query>
<!-- 表格搜索组件结束 -->
<!-- 表格组件开始 -->
<vk-data-table
ref="table1"
:action="table1.action"
:columns="table1.columns"
:query-form-param="queryForm1"
:right-btns="['detail_auto']"
:row-no="true"
:pagination="true"
></vk-data-table>
<!-- 表格组件结束 -->
<!-- 页面内容结束 -->
</view>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
var dcloudAppidData = [];
export default {
data() {
// 页面数据变量
return {
// 页面是否请求中或加载中
loading: false,
// init请求返回的数据
data: {},
// 表格相关开始 -----------------------------------------------------------
table1: {
// 表格数据请求地址
action: "admin/system_uni/uni-id-log/sys/getList",
// 表格字段显示规则
columns: [
{ key:"appList", title:"登录的应用", type:"html", width:220,
formatter: function(val, row, column, index) {
if(typeof row.dcloud_appid === "undefined") return "全部应用";
if(row.dcloud_appid.length === 0) return "未绑定任何应用";
if(val.length === 0 && row.dcloud_appid.length > 0) return row.dcloud_appid;
let str = "";
val.map((item, index) => {
str += `、${item.name}`;
});
if(str) str = str.substring(1);
return str;
}
},
{ key: "userInfo", title: "用户信息", type: "userInfo", width: 150 },
{ key: "ip", title: "ip地址", type: "text", width: 150 },
{ key: "type", title: "日志类型", type: "text", width: 120 },
{ key: "login_type", title: "登录类型", type: "select", width: 120,
data:[
{ value: "phone", label:"手机短信" },
{ value: "password", label:"账号密码" },
{ value: "weixin", label:"微信登录" },
{ value: "alipay", label:"支付宝登录" },
{ value: "weixinPhoneNumber", label:"微信手机号" },
{ value: "token", label:"token" }
]
},
{ key: "os", title: "操作系统", type: "text", width: 120 },
{ key: "platform", title: "平台信息", type: "text", width: 120 },
{ key: "device_id", title: "设备唯一标识", type: "text", width: 120 },
{ key: "_add_time", title: "添加时间", type: "time", width: 160 },
{ key: "_add_time", title: "距离现在", type: "dateDiff", width: 120 },
{ key: "ua", title: "userAgent", type: "text", width: 400 },
{ key: "user_id", title: "用户ID", type: "text", width: 220 },
],
// 多选框选中的值
multipleSelection: [],
// 当前高亮的记录
selectItem: ""
},
// 表格相关结束 -----------------------------------------------------------
// 表单相关开始 -----------------------------------------------------------
// 查询表单请求数据
queryForm1: {
// 查询表单数据源,可在此设置默认值
formData: {
dcloud_appid:""
},
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
columns: [
{ key:"dcloud_appid", title:"所属应用", type:"select", width:160, mode:"custom",
data:[],
props:{ value:"appid", label:"name" }
},
{ key: "user_id", title: "用户ID", type: "text", width:140, mode: "=" },
{ key: "ip", title: "ip地址", type: "text", width:140, mode: "%%" },
{ key: "device_id", title: "设备唯一标识", type: "text", width:180, mode: "%%" },
{ key: "_add_time", title: "添加时间", type: "datetimerange", width: 380, mode: "[]" }
]
},
// 表单相关结束 -----------------------------------------------------------
};
},
// 监听 - 页面每次【加载时】执行(如:前进)
onLoad(options = {}) {
that = this;
vk = that.vk;
that.options = options;
that.init(options);
},
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快,会在页面进入动画完成前触发
onReady() {},
// 监听 - 页面每次【显示时】执行(如:前进和返回) (页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面)
onShow() {},
// 监听 - 页面每次【隐藏时】执行(如:返回)
onHide() {},
// 函数
methods: {
// 页面数据初始化函数
init(options) {
that.getAppList();
},
// 获取应用列表
getAppList(obj){
// 请在store/modules/$app.js文件里增加代码 appList: lifeData.$app.appList || []
vk.callFunction({
url: 'admin/system/app/sys/getList',
data:{},
success:function(data){
dcloudAppidData = data.rows;
let dcloudAppidData2 = vk.pubfn.copyObject(data.rows);
dcloudAppidData2.unshift({
appid:"___error___",
name:"不存在的应用"
});
dcloudAppidData2.unshift({
appid:"___empty-array___",
name:"未绑定应用"
});
dcloudAppidData2.unshift({
appid:"___non-existent___",
name:"全部应用"
});
let index2 = vk.pubfn.getListIndex(that.queryForm1.columns, "key", "dcloud_appid");
that.queryForm1.columns[index2].data = dcloudAppidData2;
let appids = [];
dcloudAppidData.map((item, index) => {
appids.push(item.appid);
});
that.queryForm1.formData.appids = appids;
}
});
},
// 搜索
search(obj) {
that.$refs.table1.query(obj);
},
// 刷新
refresh() {
that.$refs.table1.refresh();
}
},
watch: {
},
// 过滤器
filters: {
},
// 计算属性
computed: {
}
};
</script>
<style lang="scss" scoped>
</style>
@@ -0,0 +1,289 @@
<template>
<view class="page-body">
<!-- 页面内容开始 -->
<!-- 表格搜索组件开始 -->
<vk-data-table-query
v-model="queryForm1.formData"
:columns="queryForm1.columns"
@search="search"
>
<template slot="right-btns">
<el-button type="success" icon="el-icon-circle-plus-outline" @click="addBtn">
添加
</el-button>
</template>
</vk-data-table-query>
<!-- 表格搜索组件结束 -->
<!-- 表格组件开始 -->
<vk-data-table
ref="table1"
:action="table1.action"
:columns="table1.columns"
:query-form-param="queryForm1"
:right-btns="['detail_auto', 'update', 'delete']"
:row-no="true"
:pagination="true"
@update="updateBtn"
@delete="deleteBtn"
@current-change="currentChange"
@selection-change="selectionChange"
>
<!-- 排序值 -->
<template v-slot:sort="{ row, column, index }">
<el-input v-model="row.sort" size="mini" @change="sortChange($event, row)"/>
</template>
</vk-data-table>
<!-- 表格组件结束 -->
<!-- 添加或编辑的弹窗开始 -->
<vk-data-dialog
v-model="form1.props.show"
:title="form1.props.title"
width="800px"
mode="form"
>
<vk-data-form
ref="form1"
v-model="form1.data"
:rules="form1.props.rules"
:action="form1.props.action"
:form-type="form1.props.formType"
:columns='form1.props.columns'
label-width="100px"
@success="form1.props.show = false;refresh();"
></vk-data-form>
</vk-data-dialog>
<!-- 添加或编辑的弹窗结束 -->
<!-- 页面内容结束 -->
</view>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
var originalForms = {}; // 表单初始化数据
var typeData = [
{ value: "image", label: "图片" },
{ value: "swiper", label: "图片轮播" },
{ value: "grid-btn", label: "宫格按钮" },
{ value: "notice", label: "通知" },
{ value: "text", label: "文本" },
{ value: "rich-text", label: "富文本" },
{ value: "button", label: "按钮" },
{ value: "custom", label: "自定义" }
];
export default {
data() {
// 页面数据变量
return {
// 页面是否请求中或加载中
loading: false,
// init请求返回的数据
data: {},
// 表格相关开始 -----------------------------------------------------------
table1: {
// 表格数据请求地址
action: "admin/system_uni/components-dynamic/sys/getList",
// 表格字段显示规则
columns: [
{ key: "sort", title: "排序值", type: "number", width: 100, sortable: "custom" },
{ key: "data_id", title: "组件数据id", type: "text", width: 200 },
{ key: "title", title: "数据标题", type: "text", width: 200 },
{ key: "description", title: "数据描述", type: "textarea" },
{ key: "data", title: "组件数据", type: "json", width: 200 },
{
key: "show", title: "是否显示", type: "switch",
activeValue: true,
inactiveValue: false,
width: 80,
watch: (res) => {
let { value, row, change } = res;
vk.callFunction({
url: "admin/system_uni/components-dynamic/sys/update",
title: "请求中...",
data: {
_id: row._id,
show: value
},
success: data => {
change(value); // 这一步是让表格行内的开关改变显示状态
}
});
}
},
{
key: "type", title: "type", type: "select", width: 120,
data: typeData
},
{ key: "name", title: "name", type: "text", width: 120 },
{ key: "_add_time", title: "添加时间", type: "time", width: 200 },
{ key: "_add_time", title: "距离现在", type: "dateDiff", width: 120 }
],
// 多选框选中的值
multipleSelection: [],
// 当前高亮的记录
selectItem: ""
},
// 表格相关结束 -----------------------------------------------------------
// 表单相关开始 -----------------------------------------------------------
// 查询表单请求数据
queryForm1: {
// 查询表单数据源,可在此设置默认值
formData: {},
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
columns: [
{ key: "data_id", title: "组件数据ID", type: "text", width: 180, mode: "%%" },
{ key: "title", title: "数据标题", type: "text", width: 180, mode: "%%" },
{
key: "type", title: "type", type: "select", width: 160, mode: "=",
data: [
{ value: "", label: "全部" },
...typeData
]
},
{ key: "name", title: "name", type: "text", width: 160, mode: "%%" },
{ key: "_add_time", title: "添加时间", type: "datetimerange", width: 380, mode: "[]" }
]
},
form1: {
// 表单请求数据,此处可以设置默认值
data: {
sort: 0,
show: true
},
// 表单属性
props: {
// 表单请求地址
action: "",
// 表单字段显示规则
columns: [
{ key:"", title:"基础", type:"bar-title" },
{ key: "data_id", title: "组件数据id", type: "text", show: ["add"] },
{ key: "title", title: "数据标题", type: "text" },
{ key: "data", title: "组件数据", type: "json" },
{ key: "description", title: "数据描述", type: "textarea" },
{ key:"", title:"扩展", type:"bar-title" },
{ key: "sort", title: "排序值", type: "number" },
{ key: "show", title: "是否显示", type: "switch", activeValue: true, inactiveValue: false },
{
key: "type", title: "type", type: "select",
data: typeData
},
{ key: "name", title: "name", type: "text", tips:"同一页面可以设置相同的name" },
],
// 表单验证规则
rules: {
title: [{ required: true, message: "数据标题不能为空", trigger: "blur" }],
data_id: [{ required: true, message: "组件数据id不能为空", trigger: "change" }]
},
// add 代表添加 update 代表修改
formType: "",
// 是否显示表单的弹窗
show: false
}
},
// 表单相关结束 -----------------------------------------------------------
};
},
// 监听 - 页面每次【加载时】执行(如:前进)
onLoad(options = {}) {
that = this;
vk = that.vk;
that.options = options;
that.init(options);
},
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快,会在页面进入动画完成前触发
onReady() {},
// 监听 - 页面每次【显示时】执行(如:前进和返回) (页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面)
onShow() {},
// 监听 - 页面每次【隐藏时】执行(如:返回)
onHide() {},
// 函数
methods: {
// 页面数据初始化函数
init(options) {
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
},
// 页面跳转
pageTo(path) {
vk.navigateTo(path);
},
// 表单重置
resetForm() {
vk.pubfn.resetForm(originalForms, that);
},
// 搜索
search(obj) {
that.$refs.table1.query(obj);
},
// 刷新
refresh() {
that.$refs.table1.refresh();
},
// 获取当前选中的行的数据
getCurrentRow() {
return that.$refs.table1.getCurrentRow();
},
// 监听 - 行的选中高亮事件
currentChange(val) {
that.table1.selectItem = val;
},
// 当选择项发生变化时会触发该事件
selectionChange(list) {
that.table1.multipleSelection = list;
},
// 显示添加页面
addBtn() {
that.resetForm();
that.form1.props.action = "admin/system_uni/components-dynamic/sys/add";
that.form1.props.formType = "add";
that.form1.props.title = "添加";
that.form1.props.show = true;
},
// 显示修改页面
updateBtn({ item }) {
that.form1.props.action = "admin/system_uni/components-dynamic/sys/update";
that.form1.props.formType = "update";
that.form1.props.title = "编辑";
that.form1.props.show = true;
that.form1.data = item;
},
// 删除按钮
deleteBtn({ item, deleteFn }) {
deleteFn({
action: "admin/system_uni/components-dynamic/sys/delete",
data: {
_id: item._id
}
});
},
// 修改排序值
sortChange(sort, item){
vk.callFunction({
url: 'admin/system_uni/components-dynamic/sys/update',
data: {
_id: item._id,
sort: Number(sort)
},
success: (data) => {
}
});
},
},
watch: {
},
// 计算属性
computed: {
}
};
</script>
<style lang="scss" scoped>
</style>
+221
View File
@@ -0,0 +1,221 @@
<template>
<view class="page-body">
<!-- 页面内容开始 -->
<!-- 表格搜索组件开始 -->
<vk-data-table-query
v-model="queryForm1.formData"
:columns="queryForm1.columns"
@search="search"
>
<template slot="right-btns">
<el-button type="success" icon="el-icon-circle-plus-outline" @click="addBtn">
添加
</el-button>
</template>
</vk-data-table-query>
<!-- 表格搜索组件结束 -->
<!-- 表格组件开始 -->
<vk-data-table
ref="table1"
:action="table1.action"
:columns="table1.columns"
:query-form-param="queryForm1"
:right-btns="['detail_auto', 'update', 'delete']"
:row-no="true"
:pagination="true"
@update="updateBtn"
@delete="deleteBtn"
@current-change="currentChange"
@selection-change="selectionChange"
></vk-data-table>
<!-- 表格组件结束 -->
<!-- 添加或编辑的弹窗开始 -->
<vk-data-dialog
v-model="form1.props.show"
:title="form1.props.title"
width="800px"
mode="form"
>
<vk-data-form
ref="form1"
v-model="form1.data"
:rules="form1.props.rules"
:action="form1.props.action"
:form-type="form1.props.formType"
:columns='form1.props.columns'
label-width="80px"
@success="form1.props.show = false;refresh();"
></vk-data-form>
</vk-data-dialog>
<!-- 添加或编辑的弹窗结束 -->
<!-- 页面内容结束 -->
</view>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
var originalForms = {}; // 表单初始化数据
export default {
data() {
// 页面数据变量
return {
// 页面是否请求中或加载中
loading: false,
// init请求返回的数据
data: {},
// 表格相关开始 -----------------------------------------------------------
table1: {
// 表格数据请求地址
action: "admin/system_uni/global-data/sys/getList",
// 表格字段显示规则
columns: [
{ key: "key", title: "键名", type: "text", width: 200 },
{ key: "value", title: "键值", type: "json", width: 200 },
{ key: "_add_time", title: "添加时间", type: "time", width: 160 },
{ key: "_add_time", title: "距离现在", type: "dateDiff", width: 120 },
{ key: "expired_at", title: "过期时间", type: "time", width: 160, defaultValue: "无" },
{ key: "comment", title: "备注", type: "text", width: 300 }
],
// 多选框选中的值
multipleSelection: [],
// 当前高亮的记录
selectItem: ""
},
// 表格相关结束 -----------------------------------------------------------
// 表单相关开始 -----------------------------------------------------------
// 查询表单请求数据
queryForm1: {
// 查询表单数据源,可在此设置默认值
formData: {},
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
columns: [
{ key: "key", type: "text", title: "键名搜索", mode: "%%" },
{ key: "value", type: "text", title: "键值搜索", mode: "%%" },
{ key: "_add_time", type: "datetimerange", title: "添加时间", width: 400, mode: "[]" }
]
},
form1: {
// 表单请求数据,此处可以设置默认值
data: {
},
// 表单属性
props: {
// 表单请求地址
action: "",
// 表单字段显示规则
columns: [
{ key: "key", title: "键名", type: "text", placeholder: "请输入键名", disabled:["update"], tips: "键名唯一,且不能修改" },
{ key: "value", title: "键值", type: "json", placeholder: "请输入键值" },
{ key: "expired_at", title: "过期时间", type: "date", dateType: "datetime", placeholder: "请选择过期时间", tips: "若不设置过期时间则代表永不过期" },
{ key: "comment", title: "备注", type: "textarea", placeholder: "请输入备注" }
],
// 表单验证规则
rules: {
key: [{ required: true, message: "键名不能为空", trigger: "blur" }],
value: [{ required: true, message: "键值不能为空", trigger: "change" }]
},
// add 代表添加 update 代表修改
formType: "",
// 是否显示表单的弹窗
show: false
}
},
// 表单相关结束 -----------------------------------------------------------
};
},
// 监听 - 页面每次【加载时】执行(如:前进)
onLoad(options = {}) {
that = this;
vk = that.vk;
that.options = options;
that.init(options);
},
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快,会在页面进入动画完成前触发
onReady() {},
// 监听 - 页面每次【显示时】执行(如:前进和返回) (页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面)
onShow() {},
// 监听 - 页面每次【隐藏时】执行(如:返回)
onHide() {},
// 函数
methods: {
// 页面数据初始化函数
init(options) {
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
},
// 页面跳转
pageTo(path) {
vk.navigateTo(path);
},
// 表单重置
resetForm() {
vk.pubfn.resetForm(originalForms, that);
},
// 搜索
search(obj) {
that.$refs.table1.query(obj);
},
// 刷新
refresh() {
that.$refs.table1.refresh();
},
// 获取当前选中的行的数据
getCurrentRow() {
return that.$refs.table1.getCurrentRow();
},
// 监听 - 行的选中高亮事件
currentChange(val) {
that.table1.selectItem = val;
},
// 当选择项发生变化时会触发该事件
selectionChange(list) {
that.table1.multipleSelection = list;
},
// 显示添加页面
addBtn() {
that.resetForm();
that.form1.props.action = "admin/system_uni/global-data/sys/add";
that.form1.props.formType = "add";
that.form1.props.title = "添加";
that.form1.props.show = true;
},
// 显示修改页面
updateBtn({ item }) {
that.form1.props.action = "admin/system_uni/global-data/sys/update";
that.form1.props.formType = "update";
that.form1.props.title = "编辑";
that.form1.props.show = true;
that.form1.data = item;
},
// 删除按钮
deleteBtn({ item, deleteFn }) {
deleteFn({
action: "admin/system_uni/global-data/sys/delete",
data: {
_id: item._id
}
});
}
},
watch: {
},
// 过滤器
filters: {
},
// 计算属性
computed: {
}
};
</script>
<style lang="scss" scoped>
</style>
+227
View File
@@ -0,0 +1,227 @@
<template>
<view class="page-body">
<!-- 页面内容开始 -->
<!-- 表格搜索组件开始 -->
<vk-data-table-query
v-model="queryForm1.formData"
:columns="queryForm1.columns"
:main-columns="['out_trade_no', 'transaction_id', 'type', 'status', '_add_time']"
@search="search"
></vk-data-table-query>
<!-- 表格搜索组件结束 -->
<!-- 表格组件开始 -->
<vk-data-table
ref="table1"
:action="table1.action"
:columns="table1.columns"
:query-form-param="queryForm1"
:right-btns="['detail_auto']"
:row-no="false"
:pagination="true"
@current-change="currentChange"
@selection-change="selectionChange"
>
<template v-slot:button1="{ row }">
<view v-if="row.status <= 0">-</view>
<el-tag type="success" effect="dark" v-else-if="row.user_order_success">成功</el-tag>
<el-button type="danger" size="mini" v-else-if="row.status === 1" @click="afreshNotice(row)">重新推送</el-button>
<view v-else-if="row.refund_fee>0">失败,但已退款</view>
<view v-else>未知</view>
</template>
</vk-data-table>
<!-- 表格组件结束 -->
<!-- 页面内容结束 -->
</view>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
var originalForms = {}; // 表单初始化数据
const payTypeData = [
{ label: "官方渠道 - 微信 - 小程序", value: "wxpay_mp-weixin", tagType: "success" },
{ label: "官方渠道 - 微信 - APP", value: "wxpay_app-plus", tagType: "success" },
{ label: "官方渠道 - 微信 - H5", value: "wxpay_h5", tagType: "success" },
{ label: "官方渠道 - 微信 - MWEB", value: "wxpay_mweb", tagType: "success" },
{ label: "官方渠道 - 微信 - 公众号", value: "wxpay_h5-weixin", tagType: "success" },
{ label: "官方渠道 - 支付宝 - 小程序", value: "alipay_mp-alipay", tagType: "primary" },
{ label: "官方渠道 - 支付宝 - APP", value: "alipay_app-plus", tagType: "primary" },
{ label: "官方渠道 - 支付宝 - H5", value: "alipay_h5", tagType: "primary" },
{ label: "VksPay - 微信 - 小程序", value: "vkspay_mp-weixin", tagType: "success" },
{ label: "VksPay - 微信 - APP", value: "vkspay_app-plus", tagType: "success" },
{ label: "VksPay - 微信 - H5", value: "vkspay_h5", tagType: "success" }, // 收银台接口 公众号、H5、MWEB、PC扫码均为H5
{ label: "VksPay - 微信 - MWEB", value: "vkspay_mweb", tagType: "success" },
{ label: "VksPay - 微信 - 公众号", value: "vkspay_h5-weixin", tagType: "success" },
{ label: "VksPay - 支付宝 - 小程序", value: "vkspay_mp-alipay", tagType: "primary" },
{ label: "VksPay - 支付宝 - APP", value: "vkspay_app-plus", tagType: "primary" },
{ label: "VksPay - 支付宝 - H5", value: "vkspay_h5", tagType: "primary" },
];
const orderTypeData = [
{ label: "商品订单", value: "goods" },
{ label: "充值订单", value: "recharge" },
{ label: "VIP购买订单", value: "vip" },
{ label: "其他订单", value: "other" }
];
const statusData = [
{ label: "已关闭", value: -1, tagType: "info" },
{ label: "未支付", value: 0, tagType: "info" },
{ label: "已支付", value: 1, tagType: "success" },
{ label: "已部分退款", value: 2, tagType: "warning" },
{ label: "已全额退款", value: 3, tagType: "danger" },
];
export default {
data() {
// 页面数据变量
return {
// 页面是否请求中或加载中
loading: false,
// init请求返回的数据
data: {},
// 表格相关开始 -----------------------------------------------------------
table1: {
// 表格数据请求地址
action: "admin/system_uni/pay-orders/sys/getList",
// 表格字段显示规则
columns: [
{ key: "button1", title: "回调通知状态", type: "text", width: 120, fixed:"right" },
{ key: "out_trade_no", title: "商户订单号", type: "text", width: 200 },
{ key: "type", title: "订单类型", type: "select", width: 100,
data: orderTypeData
},
{
key: "pay_type", title: "支付类型", type: "tag", width: 180,
data: payTypeData
},
{ key: "status", title: "订单状态", type: "tag", width: 110,
data: statusData
},
{ key: "create_date", title: "创建时间", type: "time", width: 160 },
{ key: "pay_date", title: "支付时间", type: "time", width: 160 },
{ key: "total_fee", title: "总金额", type: "money", width: 110 },
{ key: "refund_fee", title: "总退款金额", type: "money", width: 110, defaultValue:"-" },
{ key: "refund_num", title: "退款次数", type: "number", width: 80, defaultValue:"-" },
{ key: "transaction_id", title: "支付平台订单号", type: "text", width: 260, defaultValue:"-" },
{ key: "openid", title: "用户openid", type: "text", width: 280, show: ["detail"] },
{
key: "refund_list", title: "退款详情", type: "table", width: 360, show: ["detail"],
columns:[
{ key: "out_refund_no", title: "退款单号", type: "text", minWidth: 200 },
{ key: "refund_date", title: "退款时间", type: "time", width: 180 },
{ key: "refund_fee", title: "退款金额", type: "money", width: 140 },
{ key: "refund_desc", title: "退款备注", type: "text", minWidth: 180 },
]
},
{ key: "original_data", title: "原始数据", type: "json", width: 300, show: ["detail"] },
//{ key: "wxpay_info", title: "微信支付特有数据", type: "json", width: 360, show: ["detail"] },
//{ key: "alipay_info", title: "支付宝支付特有数据", type: "json", width: 300, show: ["detail"] },
],
// 多选框选中的值
multipleSelection: [],
// 当前高亮的记录
selectItem: ""
},
// 表格相关结束 -----------------------------------------------------------
// 表单相关开始 -----------------------------------------------------------
// 查询表单请求数据
queryForm1: {
// 查询表单数据源,可在此设置默认值
formData: {},
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
columns: [
{ key: "out_trade_no", title: "商户订单号", type: "text", width:150, mode: "%%", },
{ key: "transaction_id", title: "支付平台订单号", type: "text", width:150, mode: "%%", },
{
key: "type", title: "订单类型", type: "select", width:150, mode: "=",
data: orderTypeData
},
{ key: "status", title: "订单状态", type: "select", width: 150, mode: "=",
data: statusData
},
{ key: "_add_time", title: "添加时间", type: "datetimerange", width:340, mode: "[]" },
{
key: "pay_type", title: "支付类型", type: "select", mode: "=",
data: payTypeData
},
{ key: "total_fee_min", title: "金额范围", type: "money", mode: ">=", fieldName:"total_fee" },
{ key: "total_fee_max", title: "-", type: "money", mode: "<=", fieldName:"total_fee" }
]
}
// 表单相关结束 -----------------------------------------------------------
};
},
// 监听 - 页面每次【加载时】执行(如:前进)
onLoad(options = {}) {
that = this;
vk = that.vk;
that.options = options;
that.init(options);
},
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快,会在页面进入动画完成前触发
onReady() {},
// 监听 - 页面每次【显示时】执行(如:前进和返回) (页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面)
onShow() {},
// 监听 - 页面每次【隐藏时】执行(如:返回)
onHide() {},
// 函数
methods: {
// 页面数据初始化函数
init(options) {
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
},
// 页面跳转
pageTo(path) {
vk.navigateTo(path);
},
// 表单重置
resetForm() {
vk.pubfn.resetForm(originalForms, that);
},
// 搜索
search(obj) {
that.$refs.table1.query(obj);
},
// 刷新
refresh() {
that.$refs.table1.refresh();
},
// 获取当前选中的行的数据
getCurrentRow() {
return that.$refs.table1.getCurrentRow();
},
// 监听 - 行的选中高亮事件
currentChange(val) {
that.table1.selectItem = val;
},
// 当选择项发生变化时会触发该事件
selectionChange(list) {
that.table1.multipleSelection = list;
},
// 重新推送
afreshNotice(row){
vk.callFunction({
url: 'admin/system_uni/pay-orders/sys/afreshNotice',
title: '请求中...',
data: {
_id: row._id
},
success: (data) => {
// 刷新数据
that.refresh();
}
});
}
},
watch: {},
// 计算属性
computed: {}
};
</script>
<style lang="scss" scoped>
</style>