开放注册
This commit is contained in:
Marmot
@@ -1,14 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import MaterialSelect from '@/components/MaterialSelect/MaterialSelect.vue'
|
||||
import useForm from '@/hooks/form'
|
||||
import { configStore, userStore } from '@/stores'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { userStore } from '@/stores'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { ApiDomainEnableList } from '@/api/domain'
|
||||
import { ApiAppList } from '@/api/app'
|
||||
import type { linkConfig } from '@/models/link'
|
||||
import OssImage from '@/components/OssImage.vue'
|
||||
import UploadImage from '@/components/uploadImage.vue'
|
||||
import { getNextMonth } from '@/utils/dateTime'
|
||||
|
||||
const formRef = ref()
|
||||
const { formData, formLoading } = useForm({
|
||||
@@ -55,6 +54,10 @@ const selectMin = (value: any) => {
|
||||
}
|
||||
})
|
||||
}
|
||||
watch(()=>formData.value.config.url,()=>{
|
||||
//把url 进行编码
|
||||
formData.value.config.url = encodeURIComponent(formData.value.config.url)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,221 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import useForm from '@/hooks/form'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import OssImage from '@/components/OssImage.vue'
|
||||
import MaterialSelect from '@/components/MaterialSelect/MaterialSelect.vue'
|
||||
import TailorUpload from '@/components/tailorUpload.vue'
|
||||
import UploadImage from '@/components/uploadImage.vue'
|
||||
import { ApiDomainEnableList } from '@/api/domain'
|
||||
|
||||
const formRef = ref()
|
||||
const { formData, formLoading } = useForm({
|
||||
formRef,
|
||||
defVal(detail) {
|
||||
return {
|
||||
id: detail?.id,
|
||||
type: 6, // 类型
|
||||
title: detail?.title,
|
||||
icon: detail?.icon,
|
||||
remark: detail?.remark, // 备注
|
||||
description: detail?.description, //描述
|
||||
config: detail?.config
|
||||
? detail?.config
|
||||
: ({
|
||||
version: 1, // 1是号码，2是二维码,
|
||||
nickname: '',
|
||||
number: '',
|
||||
qr: ''
|
||||
} as any)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const rules = {
|
||||
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
|
||||
icon: [{ required: true, message: '请上传卡片封面图', trigger: 'blur' }],
|
||||
'config.number': [{ required: true, message: '请输入QQ号码', trigger: 'blur' }],
|
||||
'config.qr': [{ required: true, message: '请上传QQ二维码', trigger: 'blur' }],
|
||||
'config.nickname': [{ required: true, message: '请输入QQ昵称', trigger: 'blur' }],
|
||||
'config.domain_id': [{ required: true, message: '请选择域名', trigger: 'blur' }],
|
||||
}
|
||||
// 获取域名列表
|
||||
const domainList = ref()
|
||||
const getDomainList = async () => {
|
||||
domainList.value = await ApiDomainEnableList()
|
||||
}
|
||||
onMounted(() => {
|
||||
getDomainList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<el-form
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
v-loading="formLoading"
|
||||
class="form-box margin-right-40"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item prop="title" label="标题">
|
||||
<el-input style="width: 100%" v-model="formData.title" placeholder="请输入标题"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="description" label="描述">
|
||||
<el-input style="width: 100%" v-model="formData.description" placeholder="请输入描述"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="formData.remark" placeholder="请输入备注"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="卡片封面图" prop="icon">
|
||||
<div class="item-box">
|
||||
<oss-image
|
||||
class="margin-right-20"
|
||||
:paths="formData.icon ? [formData.icon] : []"
|
||||
:width="100"
|
||||
:height="100"
|
||||
></oss-image>
|
||||
<div>
|
||||
<div class="function-img">
|
||||
<div class="m-r-20">
|
||||
<TailorUpload v-model="formData.icon"></TailorUpload>
|
||||
</div>
|
||||
<material-select v-model="formData.icon" class="margin-right-20"></material-select>
|
||||
</div>
|
||||
<span class="tip">只能上传jpg/png，建议大小100*100，且不超过1Mb</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item prop="config.nickname" label="QQ昵称">
|
||||
<el-input style="width: 100%" v-model="formData.config.nickname" placeholder="请输QQ昵称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item required class="m-t-20">
|
||||
<el-radio-group v-model="formData.config.version">
|
||||
<el-radio :value="1" :label="1">旧版</el-radio>
|
||||
<el-radio :value="2" :label="2">新版</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="QQ号码" prop="config.number" v-if="formData.config.version === 1">
|
||||
<el-input v-model="formData.config.number" placeholder="请输入QQ号码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="QQ二维码" prop="config.qr" v-if="formData.config.version === 2">
|
||||
<div class="item-box">
|
||||
<oss-image
|
||||
class="margin-right-20"
|
||||
:paths="formData.config.qr ? [formData.config.qr] : []"
|
||||
:width="100"
|
||||
:height="100"
|
||||
></oss-image>
|
||||
<div>
|
||||
<div class="function-img">
|
||||
<div class="m-r-20">
|
||||
<upload-image
|
||||
:type="['image/jpg', 'image/jpeg', 'image/png']"
|
||||
:size="1"
|
||||
v-model="formData.config.qr"
|
||||
></upload-image>
|
||||
<!-- <TailorUpload v-model="formData.config.qr"></TailorUpload>-->
|
||||
</div>
|
||||
<material-select v-model="formData.config.qr" class="margin-right-20"></material-select>
|
||||
</div>
|
||||
<span class="tip">只能上传jpg/png，建议大小100*100，且不超过1Mb</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item prop="config.domain_id" label="无风险域名">
|
||||
<el-select v-model="formData.config.domain_id" placeholder="请选择" style="width: 100%">
|
||||
<el-option v-for="item in domainList" :key="item.id" :label="item.title" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="show hidden-md-and-down">
|
||||
<el-divider>
|
||||
<span>预览</span>
|
||||
</el-divider>
|
||||
<div class="show-box">
|
||||
<img class="show-box" src="@/assets/link/qqluodi.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main {
|
||||
display: flex;
|
||||
.form-box {
|
||||
flex: 2;
|
||||
}
|
||||
.show {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.tip {
|
||||
color: #999;
|
||||
}
|
||||
.show-box {
|
||||
height: 400px;
|
||||
margin: 0 auto;
|
||||
width: 200px;
|
||||
}
|
||||
.show-des {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.show-des-t {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
}
|
||||
.show-des-b {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.wx-box {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
border: 2px solid #f1f1f1;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.wx-img {
|
||||
width: 100%;
|
||||
}
|
||||
.wx-main {
|
||||
padding: 100px 0 0 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
.wx-header {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
width: 200px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.add-qr {
|
||||
width: 100%;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.qr-tip {
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
color: var(--el-color-primary);
|
||||
background-color: #eff5ff;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.function-img {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,116 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import useCurd from '@/hooks/curd'
|
||||
import FormModal from '@/components/FormModal.vue'
|
||||
import CreateOrLook from './create-or-look.vue'
|
||||
import OssImage from '@/components/OssImage.vue'
|
||||
import { copyLink } from '@/utils'
|
||||
import useUserStore from '@/stores/modules/user'
|
||||
|
||||
const user = useUserStore()
|
||||
const props = defineProps<{
|
||||
type: any
|
||||
}>()
|
||||
const { state, sizeChangeHandle, currentChangeHandle, showForm, submitForm, research, deleteHandle } = useCurd({
|
||||
url: '/links',
|
||||
queryForm: {
|
||||
type: props.type,
|
||||
username: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="8" :md="8" :lg="6" class="m-b-20">
|
||||
<el-input style="width: 100%" v-model="state.queryForm.title" placeholder="请输入标题" clearable></el-input>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="8" :md="8" :lg="6" class="m-b-20" v-if="user.userInfo.type === 3">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
placeholder="请输入用户名"
|
||||
v-model="state.queryForm.username"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="8" :md="8" :lg="6" class="m-b-20">
|
||||
<el-button type="primary" @click="research">搜索</el-button>
|
||||
<el-button type="primary" :plain="true" @click="showForm">创建卡片</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.listLoading"
|
||||
:header-cell-style="{
|
||||
'text-align': 'center',
|
||||
'background-color': '#F1F1F1',
|
||||
height: '50px',
|
||||
color: '#333'
|
||||
}"
|
||||
:cell-style="{ padding: '0', 'text-align': 'center', height: '80px', color: '#333' }"
|
||||
:row-key="state.primaryKey"
|
||||
>
|
||||
<el-table-column prop="id" label="序号"></el-table-column>
|
||||
<el-table-column label="图片">
|
||||
<template #default="{ row }">
|
||||
<oss-image :paths="row.icon ? [row.icon] : []" :width="60" :height="60" style="margin: 0 auto"></oss-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="卡片标题"></el-table-column>
|
||||
<el-table-column prop="description" label="卡片描述"></el-table-column>
|
||||
<el-table-column prop="" label="链接状态">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.status == 1">可用</span>
|
||||
<span v-else style="color: red">不可用</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="visit_uv_count" label="浏览量UV"></el-table-column>
|
||||
<el-table-column prop="expired_at" label="到期时间"></el-table-column>
|
||||
<el-table-column prop="user.username" label="所属用户"></el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="copyLink(row)">复制链接</el-button>
|
||||
<el-button type="primary" link @click="showForm(row.id)">编辑</el-button>
|
||||
<el-button type="primary" link @click="deleteHandle(row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
:current-page="state.page"
|
||||
:total="state.total"
|
||||
:page-sizes="state.pageSizes"
|
||||
:page-size="state.limit"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
/>
|
||||
<!-- 弹窗 -->
|
||||
<form-modal
|
||||
v-if="state.formVisible === true"
|
||||
v-model:visible="state.formVisible"
|
||||
width="1200"
|
||||
:style="{
|
||||
minWidth: '700px'
|
||||
}"
|
||||
type="dialog"
|
||||
:title="state.detailData?.id ? '编辑' : '新增'"
|
||||
:loading="state.formLoading"
|
||||
:detail="state.detailData"
|
||||
@submit="submitForm"
|
||||
cancelBtnName="取消"
|
||||
okBtnName="确定"
|
||||
>
|
||||
<create-or-look></create-or-look>
|
||||
</form-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header-right {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
@@ -1,221 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import useForm from '@/hooks/form'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import OssImage from '@/components/OssImage.vue'
|
||||
import MaterialSelect from '@/components/MaterialSelect/MaterialSelect.vue'
|
||||
import TailorUpload from '@/components/tailorUpload.vue'
|
||||
import UploadImage from '@/components/uploadImage.vue'
|
||||
import { ApiDomainEnableList } from '@/api/domain'
|
||||
|
||||
const formRef = ref()
|
||||
const { formData, formLoading } = useForm({
|
||||
formRef,
|
||||
defVal(detail) {
|
||||
return {
|
||||
id: detail?.id,
|
||||
type: 7, // 类型
|
||||
title: detail?.title,
|
||||
icon: detail?.icon,
|
||||
remark: detail?.remark, // 备注
|
||||
description: detail?.description, //描述
|
||||
config: detail?.config
|
||||
? detail?.config
|
||||
: ({
|
||||
version: 1, // 1是号码，2是二维码,
|
||||
nickname: '',
|
||||
number: '',
|
||||
qr: ''
|
||||
} as any)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const rules = {
|
||||
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
|
||||
icon: [{ required: true, message: '请上传卡片封面图', trigger: 'blur' }],
|
||||
'config.number': [{ required: true, message: '请输入QQ群号码', trigger: 'blur' }],
|
||||
'config.qr': [{ required: true, message: '请上传QQ群二维码', trigger: 'blur' }],
|
||||
'config.nickname': [{ required: true, message: '请输入QQ群昵称', trigger: 'blur' }],
|
||||
'config.domain_id': [{ required: true, message: '请选择域名', trigger: 'blur' }],
|
||||
}
|
||||
// 获取域名列表
|
||||
const domainList = ref()
|
||||
const getDomainList = async () => {
|
||||
domainList.value = await ApiDomainEnableList()
|
||||
}
|
||||
onMounted(() => {
|
||||
getDomainList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<el-form
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
v-loading="formLoading"
|
||||
class="form-box margin-right-40"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item prop="title" label="标题">
|
||||
<el-input style="width: 100%" v-model="formData.title" placeholder="请输入标题"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="description" label="描述">
|
||||
<el-input style="width: 100%" v-model="formData.description" placeholder="请输入描述"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="formData.remark" placeholder="请输入备注"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="卡片封面图" prop="icon">
|
||||
<div class="item-box">
|
||||
<oss-image
|
||||
class="margin-right-20"
|
||||
:paths="formData.icon ? [formData.icon] : []"
|
||||
:width="100"
|
||||
:height="100"
|
||||
></oss-image>
|
||||
<div>
|
||||
<div class="function-img">
|
||||
<div class="m-r-20">
|
||||
<TailorUpload v-model="formData.icon"></TailorUpload>
|
||||
</div>
|
||||
<material-select v-model="formData.icon" class="margin-right-20"></material-select>
|
||||
</div>
|
||||
<span class="tip">只能上传jpg/png，建议大小100*100，且不超过1Mb</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item prop="config.nickname" label="QQ群昵称">
|
||||
<el-input style="width: 100%" v-model="formData.config.nickname" placeholder="请输QQ群昵称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item required class="m-t-20">
|
||||
<el-radio-group v-model="formData.config.version">
|
||||
<el-radio :value="1" :label="1">旧版</el-radio>
|
||||
<el-radio :value="2" :label="2">新版</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="QQ群号码" prop="config.number" v-if="formData.config.version === 1">
|
||||
<el-input v-model="formData.config.number" placeholder="请输入QQ群号码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="QQ群二维码" prop="config.qr" v-if="formData.config.version === 2">
|
||||
<div class="item-box">
|
||||
<oss-image
|
||||
class="margin-right-20"
|
||||
:paths="formData.config.qr ? [formData.config.qr] : []"
|
||||
:width="100"
|
||||
:height="100"
|
||||
></oss-image>
|
||||
<div>
|
||||
<div class="function-img">
|
||||
<div class="m-r-20">
|
||||
<upload-image
|
||||
:type="['image/jpg', 'image/jpeg', 'image/png']"
|
||||
:size="1"
|
||||
v-model="formData.config.qr"
|
||||
></upload-image>
|
||||
<!-- <TailorUpload v-model="formData.config.qr"></TailorUpload>-->
|
||||
</div>
|
||||
<material-select v-model="formData.config.qr" class="margin-right-20"></material-select>
|
||||
</div>
|
||||
<span class="tip">只能上传jpg/png，建议大小100*100，且不超过1Mb</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item prop="config.domain_id" label="无风险域名">
|
||||
<el-select v-model="formData.config.domain_id" placeholder="请选择" style="width: 100%">
|
||||
<el-option v-for="item in domainList" :key="item.id" :label="item.title" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="show hidden-md-and-down">
|
||||
<el-divider>
|
||||
<span>预览</span>
|
||||
</el-divider>
|
||||
<div class="show-box">
|
||||
<img class="show-box" src="@/assets/link/qqluodi.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main {
|
||||
display: flex;
|
||||
.form-box {
|
||||
flex: 2;
|
||||
}
|
||||
.show {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.tip {
|
||||
color: #999;
|
||||
}
|
||||
.show-box {
|
||||
height: 400px;
|
||||
margin: 0 auto;
|
||||
width: 200px;
|
||||
}
|
||||
.show-des {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.show-des-t {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
}
|
||||
.show-des-b {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.wx-box {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
border: 2px solid #f1f1f1;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.wx-img {
|
||||
width: 100%;
|
||||
}
|
||||
.wx-main {
|
||||
padding: 100px 0 0 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
.wx-header {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
width: 200px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.add-qr {
|
||||
width: 100%;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.qr-tip {
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
color: var(--el-color-primary);
|
||||
background-color: #eff5ff;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.function-img {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,116 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import useCurd from '@/hooks/curd'
|
||||
import FormModal from '@/components/FormModal.vue'
|
||||
import CreateOrLook from './create-or-look.vue'
|
||||
import OssImage from '@/components/OssImage.vue'
|
||||
import { copyLink } from '@/utils'
|
||||
import useUserStore from '@/stores/modules/user'
|
||||
|
||||
const user = useUserStore()
|
||||
const props = defineProps<{
|
||||
type: any
|
||||
}>()
|
||||
const { state, sizeChangeHandle, currentChangeHandle, showForm, submitForm, research, deleteHandle } = useCurd({
|
||||
url: '/links',
|
||||
queryForm: {
|
||||
type: props.type,
|
||||
username: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="8" :md="8" :lg="6" class="m-b-20">
|
||||
<el-input style="width: 100%" v-model="state.queryForm.title" placeholder="请输入标题" clearable></el-input>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="8" :md="8" :lg="6" class="m-b-20" v-if="user.userInfo.type === 3">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
placeholder="请输入用户名"
|
||||
v-model="state.queryForm.username"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="8" :md="8" :lg="6" class="m-b-20">
|
||||
<el-button type="primary" @click="research">搜索</el-button>
|
||||
<el-button type="primary" :plain="true" @click="showForm">创建卡片</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.listLoading"
|
||||
:header-cell-style="{
|
||||
'text-align': 'center',
|
||||
'background-color': '#F1F1F1',
|
||||
height: '50px',
|
||||
color: '#333'
|
||||
}"
|
||||
:cell-style="{ padding: '0', 'text-align': 'center', height: '80px', color: '#333' }"
|
||||
:row-key="state.primaryKey"
|
||||
>
|
||||
<el-table-column prop="id" label="序号"></el-table-column>
|
||||
<el-table-column label="图片">
|
||||
<template #default="{ row }">
|
||||
<oss-image :paths="row.icon ? [row.icon] : []" :width="60" :height="60" style="margin: 0 auto"></oss-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="卡片标题"></el-table-column>
|
||||
<el-table-column prop="description" label="卡片描述"></el-table-column>
|
||||
<el-table-column prop="" label="链接状态">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.status == 1">可用</span>
|
||||
<span v-else style="color: red">不可用</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="visit_uv_count" label="浏览量UV"></el-table-column>
|
||||
<el-table-column prop="expired_at" label="到期时间"></el-table-column>
|
||||
<el-table-column prop="user.username" label="所属用户"></el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="copyLink(row)">复制链接</el-button>
|
||||
<el-button type="primary" link @click="showForm(row.id)">编辑</el-button>
|
||||
<el-button type="primary" link @click="deleteHandle(row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
:current-page="state.page"
|
||||
:total="state.total"
|
||||
:page-sizes="state.pageSizes"
|
||||
:page-size="state.limit"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
/>
|
||||
<!-- 弹窗 -->
|
||||
<form-modal
|
||||
v-if="state.formVisible === true"
|
||||
v-model:visible="state.formVisible"
|
||||
width="1200"
|
||||
:style="{
|
||||
minWidth: '700px'
|
||||
}"
|
||||
type="dialog"
|
||||
:title="state.detailData?.id ? '编辑' : '新增'"
|
||||
:loading="state.formLoading"
|
||||
:detail="state.detailData"
|
||||
@submit="submitForm"
|
||||
cancelBtnName="取消"
|
||||
okBtnName="确定"
|
||||
>
|
||||
<create-or-look></create-or-look>
|
||||
</form-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header-right {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user