init
This commit is contained in:
274
src/views/lowTemplate/generalPage/album/albumForm.vue
Normal file
274
src/views/lowTemplate/generalPage/album/albumForm.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<div class="w-100%">
|
||||
<div class="xc_box">
|
||||
<FormView
|
||||
:ref="(el) => (formViewRef[formTopData.refKey] = el)"
|
||||
formType="add"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="formTopData.defaultData"
|
||||
:showButton="false"
|
||||
:enhanceData="{isShowFun}"
|
||||
:formId="formTopData.formId"
|
||||
></FormView>
|
||||
<div class="Tips">
|
||||
<div style="display: flex;align-items: center;" v-if="is_show">
|
||||
<span class="span"></span>
|
||||
<span>图片列表</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-checkbox v-model="checked" label="全选" size="large" style="margin-right:10px;font-size: 16px;" @click="toggleAllSelection()"/>
|
||||
<el-button @click="uploadFun(true)">移动图片</el-button>
|
||||
<el-button @click="delFun()">删除图片</el-button>
|
||||
<el-button @click="isShowFun()">退出操作</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-select v-model="value" placeholder="Select" style="width: 120px">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<LowTable :ref="(el)=>(ref1 = el)" :tableId="tableDate.tableId" :enhanceData="tableDate.enhanceData" > </LowTable>
|
||||
</div>
|
||||
<el-dialog v-model="upload" title="选择相册" width="728px" :close-on-click-modal="false">
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<div class="checkbox-box">
|
||||
<div class="list" v-for="(item,index) in listData" :key="index">
|
||||
<img class="img" :src="item.url" alt=""/>
|
||||
<div class="radio">
|
||||
<el-checkbox label="" :value="index" />
|
||||
<p>{{item.title}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
<div class="btn">
|
||||
<el-button class="qx" @click="uploadFun(false)">取消</el-button>
|
||||
<el-button class="bc" type="primary" @click="uploadFun(false)">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { messageConfig ,ElMessage, ElMessageBox} from 'element-plus';
|
||||
|
||||
const ref1 = ref()
|
||||
const formViewRef = ref({})
|
||||
const value = ref('1')
|
||||
const upload = ref(false)
|
||||
const radio = ref('selected and disabled')
|
||||
|
||||
const formTopData = ref({
|
||||
type:'table',
|
||||
refKey: 'xcgl',
|
||||
formId: '1852223511034294274',
|
||||
defaultData: {},
|
||||
enhanceData: { hideHeader: 'disabled'}
|
||||
})
|
||||
|
||||
|
||||
const tableDate = ref({
|
||||
label:'图片列表',
|
||||
name:'fourth',
|
||||
defaultData:{},
|
||||
tableId:'1852241979997646849',
|
||||
type:'table',
|
||||
enhanceData: { hideHeader: 'disabled',}
|
||||
})
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: '1',
|
||||
label: '文件名称',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '文件大小',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '更新时间',
|
||||
},
|
||||
]
|
||||
|
||||
const checked = ref()
|
||||
const is_show = ref(true)
|
||||
const isShowFun = () =>{
|
||||
ref1.value.crudRef.tableOption.selection=is_show.value
|
||||
is_show.value = !is_show.value
|
||||
checked.value = !is_show.value ? '' : true
|
||||
ref1.value.crudRef.refreshTable()
|
||||
|
||||
}
|
||||
|
||||
//全选
|
||||
const toggleAllSelection = ()=> {
|
||||
ref1.value.crudRef.toggleAllSelection()
|
||||
}
|
||||
//删除图片
|
||||
const delFun = () =>{
|
||||
ElMessageBox.confirm(
|
||||
'是否确定删除数据？',
|
||||
'操作确认',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '数据删除成功',
|
||||
})
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
//上传图片
|
||||
const checkList = ref([])
|
||||
const listData = ref([
|
||||
{title:'相册名称',url:'../../../../../public/img/xc.png'},
|
||||
{title:'相册名称',url:'../../../../../public/img/xc.png'},
|
||||
{title:'相册名称',url:'../../../../../public/img/xc.png'},
|
||||
{title:'相册名称',url:'../../../../../public/img/xc.png'},
|
||||
{title:'相册名称',url:'../../../../../public/img/xc.png'},
|
||||
{title:'相册名称',url:'../../../../../public/img/xc.png'},
|
||||
{title:'相册名称',url:'../../../../../public/img/xc.png'},
|
||||
{title:'相册名称',url:'../../../../../public/img/xc.png'},
|
||||
])
|
||||
const uploadFun = (type) =>{
|
||||
upload.value = type
|
||||
}
|
||||
|
||||
|
||||
const xzFun = ()=>{
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.xc_box{
|
||||
padding-bottom: 20px;
|
||||
|
||||
.Tips{
|
||||
display: flex;
|
||||
height: 40px;
|
||||
padding-right:18px;
|
||||
margin-bottom: 15px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
color: #666;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.span{
|
||||
display: inline-block;
|
||||
width: 8.41px;
|
||||
height: 19px;
|
||||
margin-right:10px;
|
||||
background: #409eff;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-box{
|
||||
display: flex;
|
||||
padding: 0 0 30px 30px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.list{
|
||||
width: 150px;
|
||||
height: 180px;
|
||||
margin: 20px 20px 0 0;
|
||||
border: 1px solid #e4e4e4;
|
||||
|
||||
.img{
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.radio{
|
||||
display: flex;
|
||||
height: 30px;
|
||||
padding-left: 10px;
|
||||
// margin-left:5px;
|
||||
line-height: 30px;
|
||||
|
||||
// .el-checkbox{
|
||||
.el-checkbox__input{
|
||||
top: -5px;
|
||||
left: 6px;
|
||||
height: 30px;
|
||||
margin: 0;
|
||||
}
|
||||
// }
|
||||
|
||||
|
||||
p{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-left: 5px;
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
color: #999;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn{
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
padding: 20px 30px;
|
||||
border-top:1px solid #e9e9e9;
|
||||
|
||||
.el-button{
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.qx{
|
||||
color: #999;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.qx:hover{
|
||||
color: #409eff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.qr{
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-select__placeholder{
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
274
src/views/lowTemplate/generalPage/feature/feature_grzx1.vue
Normal file
274
src/views/lowTemplate/generalPage/feature/feature_grzx1.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<div class="grzx_box w-95% bg-white flex">
|
||||
<el-menu
|
||||
:default-active="mentDefaultActive"
|
||||
class="pt-25px el-menu-vertical-demo"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<template v-for="item in menuList" :key="item.id">
|
||||
<el-menu-item class="flex justify-center" :index="item.index">
|
||||
<span> {{ item.menuItemTitle }}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-menu>
|
||||
|
||||
<div class="use-lowdesign">
|
||||
<template v-if="richFormView.defaultData.richText">
|
||||
<FormView
|
||||
formType="view"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="richFormView.defaultData"
|
||||
:enhanceData="richFormView.enhanceData"
|
||||
:formId="richFormView.formId"
|
||||
></FormView>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<template v-if="menuContent.type == 'exploit'">
|
||||
<div class="content p-40px">
|
||||
<div class="title text-18px pl-7px mb-20px fw600 c-#666666">
|
||||
{{ menuContent.title }}
|
||||
</div>
|
||||
<FormView
|
||||
formType="edit"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="menuContent.defaultData"
|
||||
:formId="menuContent.formId"
|
||||
></FormView>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="menuContent.type == 'design'">
|
||||
<div class="content p-40px">
|
||||
<div>
|
||||
<div class="title text-18px pl-7px mb-20px fw600 c-#666666">
|
||||
{{ menuContent.title }}
|
||||
</div>
|
||||
<div class="xttz-util flex" v-if="menuContent.tableId == '1840642756645044226'">
|
||||
<div v-for="item in xttzBtnList" :key="item.id">
|
||||
<el-button
|
||||
:class="xttzActiveClass == item.id ? 'is-active' : ''"
|
||||
@click="xttzBtnClick(item.id)"
|
||||
>{{ item.title }}</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="all-read">
|
||||
<el-button>全部标记为已读</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<LowTable
|
||||
ref="xttzTable"
|
||||
:tableId="menuContent.tableId"
|
||||
:enhanceData="menuContent.defaultData"
|
||||
:fixed-search="xttzActiveClass != 1 ? { type: xttzActiveClass } : {}"
|
||||
>
|
||||
</LowTable>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { FormView, LowTable } from '@/components/LowDesign/index'
|
||||
|
||||
const menuList = ref([
|
||||
{ id: 1, index: 'zlsz', menuItemTitle: '资料设置' },
|
||||
{ id: 2, index: 'xgmm', menuItemTitle: '修改密码' },
|
||||
{ id: 3, index: 'dljl', menuItemTitle: '登录记录' },
|
||||
{ id: 4, index: 'xttz', menuItemTitle: '系统通知' },
|
||||
{ id: 5, index: 'xxsz', menuItemTitle: '消息设置' }
|
||||
])
|
||||
|
||||
const xttzBtnList = ref([
|
||||
{ id: 1, title: '全部消息' },
|
||||
{ id: 2, title: '服务消息' },
|
||||
{ id: 3, title: '活动消息' },
|
||||
{ id: 4, title: '产品消息' },
|
||||
{ id: 5, title: '安全消息' },
|
||||
{ id: 6, title: '故障消息' }
|
||||
])
|
||||
const xttzActiveClass = ref(1)
|
||||
|
||||
const mentDefaultActive = ref('zlsz')
|
||||
|
||||
const menuContentList = ref({
|
||||
zlsz: {
|
||||
title: '基本资料',
|
||||
formId: '1840295435986018306',
|
||||
type: 'exploit',
|
||||
defaultData: {
|
||||
dlzh: 'Windir',
|
||||
updateImg: 'http://oss.yckxt.com/chatgpt/upload/1/2024-09-30/1/user.png',
|
||||
updateBtn: 'http://oss.yckxt.com/chatgpt/upload/1/2024-09-30/1/user.png'
|
||||
}
|
||||
},
|
||||
xgmm: {
|
||||
title: '修改密码',
|
||||
formId: '1840567733712330753',
|
||||
type: 'exploit'
|
||||
},
|
||||
dljl: {
|
||||
title: '登录记录',
|
||||
tableId: '1840577516125323266',
|
||||
type: 'design',
|
||||
defaultData: {
|
||||
type: 'view'
|
||||
}
|
||||
},
|
||||
xttz: {
|
||||
title: '系统通知',
|
||||
tableId: '1840642756645044226',
|
||||
type: 'design',
|
||||
defaultData: {
|
||||
type: 'view',
|
||||
rowClick(row) {
|
||||
if (row.rich_text) {
|
||||
richFormView.value.defaultData = {
|
||||
richText: row.rich_text,
|
||||
type: row.$type,
|
||||
title: row.title,
|
||||
createTime: row.create_time
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
xxsz: {
|
||||
title: '消息设置',
|
||||
tableId: '1843476389638443010',
|
||||
type: 'design',
|
||||
defaultData: {
|
||||
type: 'view'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const xttzTable = ref()
|
||||
|
||||
interface RichFormViewDefault {
|
||||
createTime: string
|
||||
title?: string
|
||||
type?: string
|
||||
richText?: String
|
||||
}
|
||||
|
||||
const richFormView = ref({
|
||||
formId: '1840671420115873794',
|
||||
enhanceData: {
|
||||
richDisplay: false
|
||||
},
|
||||
defaultData: {
|
||||
type: '',
|
||||
title: '',
|
||||
createTime: '',
|
||||
richText: ''
|
||||
} as RichFormViewDefault
|
||||
})
|
||||
|
||||
watch(
|
||||
() => richFormView.value.enhanceData.richDisplay,
|
||||
(val) => {
|
||||
richFormView.value.defaultData.richText = ''
|
||||
}
|
||||
)
|
||||
|
||||
const menuContent = ref(menuContentList.value[mentDefaultActive.value])
|
||||
|
||||
const handleSelect = (key: string, keyPath: string[]) => {
|
||||
if (menuContent.value !== menuContentList.value[key] && richFormView.value.defaultData.richText) {
|
||||
richFormView.value.defaultData.richText = ''
|
||||
}
|
||||
|
||||
menuContent.value = menuContentList.value[key]
|
||||
}
|
||||
|
||||
const xttzBtnClick = (id: number) => {
|
||||
xttzActiveClass.value = id
|
||||
xttzTable.value.resetChange()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.grzx_box {
|
||||
min-height: 800px;
|
||||
margin: 0 auto;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px rgb(0 0 0 / 4.71%);
|
||||
|
||||
.el-menu {
|
||||
width: 180px;
|
||||
min-height: 800px;
|
||||
flex-shrink: 0;
|
||||
background-color: #fcfcfc;
|
||||
border-radius: 5px 0 0 5px;
|
||||
|
||||
.el-menu-item {
|
||||
height: 45px;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
font-weight: bold;
|
||||
background-color: rgb(64 158 255 / 9.8%);
|
||||
border-right: 3px solid rgb(64 158 255 / 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.use-lowdesign {
|
||||
width: calc(100% - 180px);
|
||||
|
||||
.content {
|
||||
width: calc(100% - 80px);
|
||||
height: calc(100% - 80px);
|
||||
|
||||
.title {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
line-height: 16px;
|
||||
border-left: 6px solid #409eff;
|
||||
}
|
||||
|
||||
.xttz-util {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-button {
|
||||
display: flex;
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
|
||||
&.is-active {
|
||||
color: #409eff;
|
||||
background-color: white;
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.all-read {
|
||||
margin-left: auto;
|
||||
|
||||
.el-button {
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(255 255 255 / 0%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
292
src/views/lowTemplate/generalPage/feature/feature_grzx2.vue
Normal file
292
src/views/lowTemplate/generalPage/feature/feature_grzx2.vue
Normal file
@@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<!-- <div> 个人中心</div> -->
|
||||
<div>
|
||||
<div class="box">
|
||||
<div class="box-left .dark:b-#2A2B2C b-solid .dark:bg-#1D1E1F! b-1px b-transparent ">
|
||||
<div class="box-left-top">
|
||||
<div class="head ">
|
||||
<div style="margin: 20px 0;">
|
||||
<el-avatar :size="60" :src="circleUrl" />
|
||||
</div>
|
||||
<p class="font color6 .dark:c-#fff!" style="margin-bottom:5px;font-size: 18px;">a123</p>
|
||||
<p class="fontFamily color9 .dark:c-#ccc!" style="font-size: 14px;">专注交互原型设计</p>
|
||||
</div>
|
||||
<div class="title-box">
|
||||
<el-row class="demo-avatar demo-basic">
|
||||
<el-col :span="8">
|
||||
<div class="content">
|
||||
<p class="font color3 .dark:c-#fff!" style="font-size: 16px;">1000</p>
|
||||
<p class="font-family color9 .dark:c-#ccc!" style="font-size: 12px;">文章</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="content" style="border-right: 1px solid #f4f4f4;border-left: 1px solid #f4f4f4;">
|
||||
<p class="font color3 .dark:c-#fff!" style="font-size: 16px;">1000</p>
|
||||
<p class="font-family color9 .dark:c-#ccc!" style="font-size: 12px;">应用</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="content">
|
||||
<p class="font color3 .dark:c-#fff!" style="font-size: 16px;">1000</p>
|
||||
<p class="font-family color9 .dark:c-#ccc!" style="font-size: 12px;">项目</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<p class="font color6 .dark:c-#fff!" style="margin:20px 0 10px 20px;font-size: 14px;">个人名片</p>
|
||||
<el-row>
|
||||
<div class="list-box">
|
||||
<el-col :span="2">
|
||||
<Icon icon="fa6-solid:user" width="18" height="18" style="color: #999" />
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<p class="fontFamily color6 .dark:c-#ccc!" style="font-size: 14px;">10年</p>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div class="list-box">
|
||||
<el-col :span="2">
|
||||
<Icon icon="fa6-brands:qq" width="18" height="18" style="color: #999" />
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<p class="fontFamily color6 .dark:c-#ccc!" style="font-size: 14px;">20841030</p>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div class="list-box">
|
||||
<el-col :span="2">
|
||||
<Icon icon="fa:weixin" width="18" height="18" style="color: #999" />
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<p class="fontFamily color6 .dark:c-#ccc!" style="font-size: 14px;">a123</p>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div class="list-box">
|
||||
<el-col :span="2">
|
||||
<Icon icon="fa-brands:weibo" width="18" height="18" style="color: #999" />
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<p class="fontFamily color6 .dark:c-#ccc!" style="font-size: 14px;">淘宝创意部</p>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="list" style="padding-bottom: 30px;">
|
||||
<p class="font color6 .dark:c-#fff!" style="margin:20px 0 10px 20px;font-size: 14px;">所属团队</p>
|
||||
<el-row v-for="(item,index) in sstdData" :key="index">
|
||||
<div class="list-sstd">
|
||||
<el-avatar :size="46" :src="item.src" />
|
||||
<div class="list-sstd-text">
|
||||
<p class="font color6 .dark:c-#fff!" style="font-size: 14px;">{{item.title}}</p>
|
||||
<p class="fontFamily color9 .dark:c-#ccc!" style="font-size: 12px;">{{item.content}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="list">
|
||||
<p class="font color6 .dark:c-#fff!" style="margin:20px 0 10px 20px;font-size: 14px;">标签</p>
|
||||
<div style="margin-left: 20px;">
|
||||
<el-badge class="item" v-for="(item, index) in data" :key="index">
|
||||
<el-button>{{ item.name }}</el-button>
|
||||
</el-badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-right .dark:b-#2A2B2C b-solid .dark:bg-#1D1E1F! b-1px b-transparent">
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<template v-for="(item,index) in tableData" :key="index">
|
||||
<el-tab-pane :label="item.label" :name="item.name">
|
||||
<div class="tabs-box">
|
||||
<!-- <FormView
|
||||
|
||||
formType="add"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="item.defaultData"
|
||||
:showButton="true"
|
||||
:formId="item.formId"
|
||||
></FormView> -->
|
||||
<upDate v-if="item.type == 'jurisdiction'"></upDate>
|
||||
<template v-if="item.type == 'table'">
|
||||
<LowTable :tableId="item.tableId" :enhanceData="item.enhanceData" > </LowTable>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRefs,ref } from 'vue'
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
|
||||
const state = reactive({
|
||||
circleUrl:
|
||||
'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
|
||||
})
|
||||
const data = ref([
|
||||
{name:'很有想法'},
|
||||
{name:'海纳百川'},
|
||||
{name:'川妹子'},
|
||||
{name:'专注设计'},
|
||||
{name:'喜欢吃辣'},
|
||||
{name:'好看'},
|
||||
{name:'能力强'},
|
||||
{name:'爱臭美'},
|
||||
])
|
||||
const sstdData = ref([
|
||||
{src:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',title:'淘宝创意部',content:'设计呢，最重要的是开心'},
|
||||
{src:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',title:'淘宝创意部',content:'设计呢，最重要的是开心'},
|
||||
{src:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',title:'淘宝创意部',content:'设计呢，最重要的是开心'},
|
||||
])
|
||||
const tableData = reactive([
|
||||
{label:'应用',name:'first',defaultData:{},tableId:'1848631600935510017',type:'table',enhanceData: { hideHeader: 'disabled'}},
|
||||
{label:'项目',name:'second',defaultData:{},tableId:'1848637143087489025',type:'table',enhanceData: { hideHeader: 'disabled'}},
|
||||
{label:'文章',name:'fourth',defaultData:{},tableId:'1848649270435160066',type:'table',enhanceData: { hideHeader: 'disabled'}},
|
||||
])
|
||||
|
||||
const activeName = ref('first')
|
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
|
||||
const { circleUrl } = toRefs(state)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.box{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.box-left{
|
||||
width: 22.6%;
|
||||
max-height: 950px;
|
||||
// padding: 0 20px;
|
||||
margin-right:21px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
|
||||
.box-left-top{
|
||||
width: 100%;
|
||||
// padding: 0 20px;
|
||||
|
||||
.head{
|
||||
// margin: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-box{
|
||||
margin:30px 0;
|
||||
|
||||
.content{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.list{
|
||||
padding-bottom: 20px;
|
||||
border-top: 1px solid #ececec;
|
||||
|
||||
.list-box{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-left:20px;
|
||||
line-height: 28px;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.list-sstd{
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
margin-left:20px;
|
||||
|
||||
.list-sstd-text{
|
||||
margin-left: 10px;
|
||||
|
||||
p{
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-right{
|
||||
width: 77%;
|
||||
padding: 0 20px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.el-dropdown {
|
||||
margin-top: 1.1rem;
|
||||
}
|
||||
|
||||
::v-deep .el-button{
|
||||
padding: 8px 15px !important;
|
||||
font-family: '微软雅黑', sans-serif !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 400 !important;
|
||||
color: #999 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item{
|
||||
height: 60px !important;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 30px !important;
|
||||
color: #666 !important;
|
||||
}
|
||||
|
||||
.font{
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.fontFamily{
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.font-family{
|
||||
font-family: MicrosoftYaHei, '微软雅黑', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.color3{
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.color6{
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.color9{
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
152
src/views/lowTemplate/generalPage/form/form_hxfb.vue
Normal file
152
src/views/lowTemplate/generalPage/form/form_hxfb.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<!-- <div> 发布表单页(横向分步) </div> -->
|
||||
<ContentWrap>
|
||||
<el-steps :active="active" align-center>
|
||||
<el-step v-for="(item, index) in stepList" :key="item.refKey">
|
||||
<template #icon>
|
||||
<div class="step-icon-box" :class="{ avtive: active == index }">
|
||||
<div v-if="active == index" class="mt--1px">{{ index + 1 }}</div>
|
||||
<div v-else class="mt-1px">
|
||||
<Icon :size="14" icon="ep:select" color="var(--el-color-primary)"></Icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="c-[var(--el-text-color-primary)]">{{ item.title }}</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<div
|
||||
class="c-[var(--el-color-info-light-3)] text-12px"
|
||||
:class="{ 'des-hide': active != index }"
|
||||
>{{ item.des }}</div
|
||||
>
|
||||
</template>
|
||||
</el-step>
|
||||
</el-steps>
|
||||
<template v-for="(item, index) in stepList" :key="item.refKey">
|
||||
<div v-if="item.formId" v-show="active == index">
|
||||
<FormView
|
||||
:ref="(el) => (formViewRef[item.refKey] = el)"
|
||||
formType="add"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:showButton="false"
|
||||
:formId="item.formId"
|
||||
></FormView>
|
||||
</div>
|
||||
<div v-if="active == index && active < 3" class="mt-40px flex justify-center">
|
||||
<el-button v-if="active != 0" @click="active = active - 1">上一步</el-button>
|
||||
<el-button type="primary" v-if="active <= 2" @click="setNextForm">{{
|
||||
active == 2 ? '提交' : '下一步'
|
||||
}}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FormView } from '@/components/LowDesign/index'
|
||||
defineOptions({ name: 'FormHxfb' })
|
||||
const active = ref(0)
|
||||
const stepList = ref([
|
||||
{
|
||||
refKey: 'basic_sp',
|
||||
title: '基本信息',
|
||||
des: '请填写公司基本信息',
|
||||
formId: '1829756210681274369'
|
||||
},
|
||||
{
|
||||
refKey: 'detail_sp',
|
||||
title: '详细信息',
|
||||
des: '请填写公司详细信息',
|
||||
formId: '1829756992465985538'
|
||||
},
|
||||
{
|
||||
refKey: 'financial_sp',
|
||||
title: '财务信息',
|
||||
des: '请填写公司财务信息',
|
||||
formId: '1829757052494864386'
|
||||
},
|
||||
{
|
||||
refKey: 'submit_sp',
|
||||
title: '提交成功',
|
||||
des: '公司信息提交成功'
|
||||
}
|
||||
])
|
||||
|
||||
const formViewRef = ref({})
|
||||
const formData = ref({})
|
||||
|
||||
const setNextForm = async () => {
|
||||
const currStep = stepList.value[active.value]
|
||||
if (currStep.formId) {
|
||||
const formRef = formViewRef.value[currStep.refKey].controlRef
|
||||
const data = await formRef.handleSubmit(true)
|
||||
formData.value[currStep.refKey] = data
|
||||
}
|
||||
active.value++
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.low-form) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.step-icon-box {
|
||||
display: flex;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: #fff;
|
||||
border: 2px solid var(--el-color-primary);
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.avtive {
|
||||
color: #fff;
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.el-steps) {
|
||||
.el-step__head {
|
||||
.el-step__line {
|
||||
background-color: var(--el-color-info-light-7);
|
||||
}
|
||||
|
||||
.el-step__icon {
|
||||
width: 30px !important;
|
||||
}
|
||||
|
||||
&.is-finish {
|
||||
.el-step__line {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-step:not(:last-child) {
|
||||
.el-step__head {
|
||||
&.is-process::before {
|
||||
position: absolute;
|
||||
top: calc(50% - 1px);
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
background-color: var(--el-color-primary);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
201
src/views/lowTemplate/generalPage/form/form_zxfb.vue
Normal file
201
src/views/lowTemplate/generalPage/form/form_zxfb.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<!-- <div> 发布表单页(纵向分步) </div> -->
|
||||
<ContentWrap>
|
||||
<el-steps direction="vertical" :active="active">
|
||||
<el-step v-for="(item, index) in stepList" :key="item.refKey">
|
||||
<template #icon>
|
||||
<div class="step-icon-box" :class="{ avtive: active == index }">
|
||||
<div v-if="active == index" class="mt--1px">{{ index + 1 }}</div>
|
||||
<div v-else class="mt-1px">
|
||||
<Icon :size="14" icon="ep:select" color="var(--el-color-primary)"></Icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="c-[var(--el-text-color-primary)]">{{ item.title }}</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<div
|
||||
class="c-[var(--el-color-info-light-3)] text-12px"
|
||||
:class="{ 'des-hide': active != index }"
|
||||
>{{ item.des }}</div
|
||||
>
|
||||
<div v-if="item.formId" v-show="active == index">
|
||||
<FormView
|
||||
:ref="(el) => (formViewRef[item.refKey] = el)"
|
||||
formType="add"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:showButton="false"
|
||||
:formId="item.formId"
|
||||
></FormView>
|
||||
</div>
|
||||
<div v-if="active == index && active < 3" class="ml-65px mb-20px">
|
||||
<el-button v-if="active != 0" @click="active = active - 1">上一步</el-button>
|
||||
<el-button type="primary" v-if="active <= 2" @click="setNextForm">{{
|
||||
active == 2 ? '提交' : '下一步'
|
||||
}}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-step>
|
||||
</el-steps>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FormView } from '@/components/LowDesign/index'
|
||||
import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
|
||||
defineOptions({ name: 'FormZxfb' })
|
||||
|
||||
interface HandleClickProps {
|
||||
(formData: object): string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
addFun: HandleClickProps
|
||||
}>()
|
||||
|
||||
const active = ref(0)
|
||||
const stepList = ref([
|
||||
{
|
||||
refKey: 'basic',
|
||||
title: '基本信息',
|
||||
des: '请填写公司基本信息',
|
||||
formId: '1829756210681274369'
|
||||
},
|
||||
{
|
||||
refKey: 'detail',
|
||||
title: '详细信息',
|
||||
des: '请填写公司详细信息',
|
||||
formId: '1829756992465985538'
|
||||
},
|
||||
{
|
||||
refKey: 'financial',
|
||||
title: '财务信息',
|
||||
des: '请填写公司财务信息',
|
||||
formId: '1829757052494864386'
|
||||
},
|
||||
{
|
||||
refKey: 'submit',
|
||||
title: '提交成功',
|
||||
des: '公司信息提交成功'
|
||||
}
|
||||
])
|
||||
|
||||
const formViewRef = ref({})
|
||||
const formData = ref({})
|
||||
|
||||
const debounce = (func, wait) => {
|
||||
let timeout
|
||||
return function () {
|
||||
const args = arguments
|
||||
clearTimeout(timeout)
|
||||
timeout = setTimeout(() => func.apply(args), wait)
|
||||
}
|
||||
}
|
||||
|
||||
const setNextForm = debounce(async () => {
|
||||
const currStep = stepList.value[active.value]
|
||||
if (currStep.formId) {
|
||||
const formRef = formViewRef.value[currStep.refKey].controlRef
|
||||
const data = await formRef.handleSubmit(true)
|
||||
formData.value[currStep.refKey] = data
|
||||
|
||||
if (active.value == 2 && data) {
|
||||
interface primordialTableDataType {
|
||||
basic: {
|
||||
company_name: string
|
||||
client_state: string
|
||||
industry_type: string
|
||||
client_source: string
|
||||
client_level: string
|
||||
}
|
||||
}
|
||||
const userInfo = ref({} as ProfileVO)
|
||||
const users = await getUserProfile()
|
||||
userInfo.value = users
|
||||
let primordialTableData = {
|
||||
company_name: (formData.value as primordialTableDataType).basic.company_name,
|
||||
customer_status: (formData.value as primordialTableDataType).basic.client_state,
|
||||
industry_type: (formData.value as primordialTableDataType).basic.industry_type,
|
||||
customer_source: (formData.value as primordialTableDataType).basic.client_source,
|
||||
customer_star: (formData.value as primordialTableDataType).basic.client_level,
|
||||
add_people: userInfo.value.id,
|
||||
update_date: formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss'),
|
||||
bh: '20241001'
|
||||
}
|
||||
props.addFun(primordialTableData)
|
||||
}
|
||||
|
||||
active.value++
|
||||
}
|
||||
}, 500)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.low-form) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.step-icon-box {
|
||||
display: flex;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: #fff;
|
||||
border: 2px solid var(--el-color-primary);
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.avtive {
|
||||
color: #fff;
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.el-steps) {
|
||||
.el-step__head {
|
||||
width: 30px;
|
||||
|
||||
.el-step__line {
|
||||
left: 14px;
|
||||
background-color: var(--el-color-info-light-7);
|
||||
}
|
||||
|
||||
.el-step__icon {
|
||||
width: 30px !important;
|
||||
}
|
||||
|
||||
&.is-finish {
|
||||
.el-step__line {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-process::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 14px;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 2px;
|
||||
height: 50%;
|
||||
background-color: var(--el-color-primary);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.des-hide {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
186
src/views/lowTemplate/generalPage/group/group_gjsxy.vue
Normal file
186
src/views/lowTemplate/generalPage/group/group_gjsxy.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<!-- <div> 高级筛选页 </div>
|
||||
顶部搜索：表单设计
|
||||
底部表格：表单开发 -->
|
||||
<div class="box">
|
||||
<div class="order-top">
|
||||
<FormView
|
||||
formType="edit"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="orderTopData.defaultData"
|
||||
:showButton="false"
|
||||
:enhanceData="{ setSearch}"
|
||||
:formId="orderTopData.formId"
|
||||
:ref="(el) => (tableRef[tableData.name] = el)"
|
||||
></FormView>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span>已选条件：</span>
|
||||
<template v-for="tag in dynamicTags" :key="tag.label">
|
||||
<el-tag
|
||||
v-if="tag.show"
|
||||
closable
|
||||
:disable-transitions="false"
|
||||
@close="handleClose(tag)"
|
||||
>
|
||||
{{ tag.label }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<span class="qcsx" @click="delFun">清除筛选</span>
|
||||
</div>
|
||||
<div class="table">
|
||||
<LowTable :tableId="tableData.tableId" :enhanceData="tableData.enhanceData"> </LowTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FormView, LowTable } from '@/components/LowDesign/index'
|
||||
import type { TagProps } from 'element-plus'
|
||||
|
||||
interface TagsItem {
|
||||
name: string
|
||||
type: TagProps['type']
|
||||
}
|
||||
|
||||
|
||||
// const dynamicTags = ref(['选择项一', '选择项一', '选择项一'])
|
||||
const dynamicTags = ref<any>([
|
||||
// { label: '选项一', type: 'primary',lx:'kh',show:true },
|
||||
// { label: '选项二', type: 'primary',lx:'kh',show:false },
|
||||
])
|
||||
|
||||
const orderTopData = ref({
|
||||
type: 'exploit',
|
||||
refKey: 'orderTop',
|
||||
formId: '1838814762506964994',
|
||||
defaultData: {
|
||||
type1:'1',
|
||||
type2:'1',
|
||||
type3:'1'
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref({})
|
||||
const formData = ref({})
|
||||
const tableData = ref(
|
||||
{
|
||||
label: '高级筛选',
|
||||
name: 'gjsx',
|
||||
tableId: '1838824808796180481',
|
||||
enhanceData: { hideHeader: 'disabled' }
|
||||
},
|
||||
)
|
||||
|
||||
const tableCrud = ref()
|
||||
const tableSearch = ref({})
|
||||
const label = ref<any>()
|
||||
|
||||
// 多选处理
|
||||
const khArr = ref<any>([])
|
||||
const hyArr = ref<any>([])
|
||||
const setSearch = (searchObj) => {
|
||||
|
||||
if(searchObj.type == 'kh'){
|
||||
searchObj.dic.map(item=>{
|
||||
item.type = 'primary'
|
||||
item.show = searchObj.value.includes(item.value) ? true : false
|
||||
item.lx = searchObj.type
|
||||
return item
|
||||
})
|
||||
khArr.value = searchObj.dic
|
||||
}
|
||||
if(searchObj.type == 'hy'){
|
||||
searchObj.dic.map(item=>{
|
||||
item.type = 'primary'
|
||||
item.show = searchObj.value.includes(item.value) ? true : false
|
||||
item.lx = searchObj.type
|
||||
return item
|
||||
})
|
||||
hyArr.value = searchObj.dic
|
||||
}
|
||||
strFnu(searchObj)
|
||||
}
|
||||
|
||||
const strFnu = (data) =>{
|
||||
let array = khArr.value.concat(hyArr.value)
|
||||
dynamicTags.value = array
|
||||
}
|
||||
|
||||
const delFun = () =>{
|
||||
dynamicTags.value = []
|
||||
}
|
||||
|
||||
//已选条件处理
|
||||
const str = ref<any>([])
|
||||
const handleClose = (tag) => {
|
||||
dynamicTags.value.map(item =>{
|
||||
if(item.label == tag.label){
|
||||
item.show = false
|
||||
}
|
||||
|
||||
if(item.lx == tag.lx && item.show){
|
||||
str.value.push(item.value)
|
||||
}
|
||||
|
||||
return item
|
||||
})
|
||||
|
||||
if(tag.lx == 'kh'){
|
||||
orderTopData.value.defaultData.type1 = str.value.join()
|
||||
str.value = []
|
||||
} else if(tag.lx == 'hy'){
|
||||
orderTopData.value.defaultData.type2 = str.value.join()
|
||||
str.value = []
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// watch()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box{
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.flex{
|
||||
margin-left: 68px;
|
||||
font-family: MicrosoftYaHei, '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
color: #999;
|
||||
text-align: left;
|
||||
|
||||
.qcsx{
|
||||
margin-top: -3px;
|
||||
margin-left:40px;
|
||||
font-family: MicrosoftYaHei, '微软雅黑', sans-serif;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
|
||||
.table{
|
||||
width: calc(90% + 40px);
|
||||
padding: 20px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label{
|
||||
color: #999;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox-group {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
::v-deep .low-form {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
583
src/views/lowTemplate/generalPage/group/group_gjxqy.vue
Normal file
583
src/views/lowTemplate/generalPage/group/group_gjxqy.vue
Normal file
@@ -0,0 +1,583 @@
|
||||
<template>
|
||||
<div class="group_gjxqy_box">
|
||||
<!-- 顶部信息 -->
|
||||
<FormView
|
||||
formType="view"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="topInformation.defaultData"
|
||||
:showButton="false"
|
||||
:formId="topInformation.formId"
|
||||
></FormView>
|
||||
<!-- 分类页面X -->
|
||||
<el-tabs v-model="tabsOneActive" class="demo-tabs" @tab-click="handleClick">
|
||||
<template v-for="item in tabsOneList" :key="item.name">
|
||||
<el-tab-pane :label="item.label" :name="item.name"></el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
<!-- 流程进度 -->
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="text-16px">流程进度</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-steps :active="stepsActive" align-center>
|
||||
<template v-for="item in stepsList" :key="item.id">
|
||||
<el-step
|
||||
:title="item.title"
|
||||
:description="item.description"
|
||||
:class="item.id == stepsActive ? 'stepsActive' : ''"
|
||||
/>
|
||||
</template>
|
||||
</el-steps>
|
||||
</el-card>
|
||||
<!-- 操作记录 -->
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="text-16px">操作记录</span>
|
||||
</div>
|
||||
</template>
|
||||
<FormView
|
||||
formType="view"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="operationRecord.defaultData"
|
||||
:showButton="false"
|
||||
:formId="operationRecord.formId"
|
||||
></FormView>
|
||||
</el-card>
|
||||
<!-- 操作记录流程 -->
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="text-16px">操作记录</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-steps
|
||||
direction="vertical"
|
||||
:active="stepsVertical.length"
|
||||
align-center
|
||||
class="steps-vertical-class"
|
||||
>
|
||||
<template v-for="item in stepsVertical" :key="item.id">
|
||||
<el-step :title="item.title">
|
||||
<template #description>
|
||||
<el-card>
|
||||
<div>
|
||||
<el-avatar :size="34" :src="item.cardContent.avatarImg" />
|
||||
</div>
|
||||
<div class="ml-5px grid">
|
||||
<div class="flex items-center">
|
||||
<p class="c-#bcaeae m-0 font">{{ item.cardContent.username }}</p>
|
||||
<p class="pl-5px m-0 c-#999 text-11px font-family">{{
|
||||
item.cardContent.userjob
|
||||
}}</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center c-#bcaeae text-11px font-family"
|
||||
style="color: #666"
|
||||
>
|
||||
<p class="m-0">{{ item.cardContent.examineApproveGrade }}</p>
|
||||
<p class="pl-3px m-0">{{ item.cardContent.examineApproveName }}</p>
|
||||
<p class="pl-3px m-0">{{ item.cardContent.examineApproveResult }}</p>
|
||||
</div>
|
||||
<div class="flex items-center c-#999">
|
||||
<el-icon><Clock /></el-icon>
|
||||
<p class="pl-3px m-0" style="font-family: '微软雅黑', sans-serif">{{
|
||||
item.cardContent.examineApproveTime
|
||||
}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-auto c-#bcaeae text-11px font" style="font-size: 12px">
|
||||
{{ item.cardContent.type }}
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
</el-step>
|
||||
</template>
|
||||
</el-steps>
|
||||
</el-card>
|
||||
<!-- 日志记录 -->
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="text-16px">日志记录</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty description="未查询到相关数据" image="/img/img5.svg" />
|
||||
</el-card>
|
||||
<!-- 分类标签 -->
|
||||
<el-card class="card-and-tabs">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-tabs v-model="tabsOneActive" @tab-click="handleClick">
|
||||
<template v-for="item in tabsOneList" :key="item.name">
|
||||
<el-tab-pane :label="item.label" :name="item.name"></el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<LowTable :tableId="tabsTableData.tabId" :enhanceData="tabsTableData.enhanceData"></LowTable>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FormView, LowTable } from '@/components/LowDesign/index'
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
import { Clock } from '@element-plus/icons-vue'
|
||||
|
||||
defineOptions({ name: 'GroupGjxqy' })
|
||||
|
||||
const topInformationData = reactive({
|
||||
create_date: '2024-09-11 09:04:00',
|
||||
customer_rating: 4,
|
||||
customer_source: '7',
|
||||
customer_status: '3',
|
||||
fields_4858197: '',
|
||||
fields_5452530: '',
|
||||
head_contact: '1833323260582391810',
|
||||
system_number: '202010001',
|
||||
tabs_title: '广州某科技有限公司',
|
||||
type_of_industry: '3',
|
||||
vesting_officer: '1833323260582391810'
|
||||
})
|
||||
|
||||
const topInformation = ref({
|
||||
title: '基本信息',
|
||||
formId: '1838820624684339201',
|
||||
defaultData: topInformationData
|
||||
})
|
||||
|
||||
const tabsOneActive = ref('1')
|
||||
const tabsOneList = ref([
|
||||
{ label: '分类页面一', name: '1' },
|
||||
{ label: '分类页面二', name: '2' },
|
||||
{ label: '分类页面三', name: '3' },
|
||||
{ label: '分类页面四', name: '4' }
|
||||
])
|
||||
|
||||
const stepsActive = ref(4)
|
||||
const stepsList = ref([
|
||||
{ id: 1, title: '提交申请', description: '2024-09-24 15:03' },
|
||||
{ id: 2, title: '部门审批', description: '2024-09-24 15:03' },
|
||||
{ id: 3, title: '行政审批', description: '2024-09-24 15:03' },
|
||||
{ id: 4, title: '申请成功', description: '2024-09-24 15:03' }
|
||||
])
|
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
|
||||
const operationRecordData = ref({
|
||||
tabs_customer_name: '广州某科技有限公司',
|
||||
tabs_customer_rating: 4,
|
||||
tabs_customer_source: '7',
|
||||
tabs_customer_status: '3',
|
||||
tabs_now_city: '130000',
|
||||
tabs_system_number: '202010001',
|
||||
tabs_type_of_industry: '3',
|
||||
tabs_update_date: '2024-09-25 00:00:00',
|
||||
tabs_vesting_officer: '1833323260582391810',
|
||||
tabs_company_tax: '91440300MA5FQY****',
|
||||
tabs_company_tel: '3666-756614',
|
||||
tabs_company_web: 'http://www.xx.com',
|
||||
tabs_current_title: '5',
|
||||
tabs_deposit_bank: '交通银行深圳井南山支行',
|
||||
tabs_detailed_address: '广东省深圳市南山区',
|
||||
tabs_head_contact: '李小红',
|
||||
tabs_invoice_title: '广州某科技有限公司',
|
||||
tabs_phone_number: '15238683333'
|
||||
})
|
||||
|
||||
const operationRecord = ref({
|
||||
title: '操作记录',
|
||||
formId: '1838842046060228609',
|
||||
defaultData: operationRecordData
|
||||
})
|
||||
|
||||
const stepsVertical = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: '09-24',
|
||||
cardContent: {
|
||||
avatarImg: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
|
||||
username: '赵小刚',
|
||||
userjob: '销售经理',
|
||||
examineApproveGrade: '1级审批人',
|
||||
examineApproveName: '李小明',
|
||||
examineApproveResult: '审批通过，通过原因：无',
|
||||
examineApproveTime: '2019-08-23 22:31',
|
||||
type: '订单'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '09-24',
|
||||
cardContent: {
|
||||
avatarImg: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
|
||||
username: '赵小刚',
|
||||
userjob: '销售经理',
|
||||
examineApproveGrade: '1级审批人',
|
||||
examineApproveName: '李小明',
|
||||
examineApproveResult: '审批通过，通过原因：无',
|
||||
examineApproveTime: '2019-08-23 22:31',
|
||||
type: '订单'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '09-24',
|
||||
cardContent: {
|
||||
avatarImg: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
|
||||
username: '赵小刚',
|
||||
userjob: '销售经理',
|
||||
examineApproveGrade: '1级审批人',
|
||||
examineApproveName: '李小明',
|
||||
examineApproveResult: '审批通过，通过原因：无',
|
||||
examineApproveTime: '2019-08-23 22:31',
|
||||
type: '订单'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '09-24',
|
||||
cardContent: {
|
||||
avatarImg: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
|
||||
username: '赵小刚',
|
||||
userjob: '销售经理',
|
||||
examineApproveGrade: '1级审批人',
|
||||
examineApproveName: '李小明',
|
||||
examineApproveResult: '审批通过，通过原因：无',
|
||||
examineApproveTime: '2019-08-23 22:31',
|
||||
type: '订单'
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
const tabsTableData = ref({
|
||||
tabId: '1840268794366795777',
|
||||
enhanceData: {
|
||||
buttonType: 'hidden'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group_gjxqy_box {
|
||||
.el-tabs {
|
||||
::v-deep(.el-tabs__header) {
|
||||
margin-bottom: 0;
|
||||
background-color: white;
|
||||
|
||||
.el-tabs__nav-wrap {
|
||||
border: 1px solid #e4e7ed;
|
||||
border-top: none;
|
||||
|
||||
.el-tabs__active-bar {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
margin-bottom: 15px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
|
||||
&:hover {
|
||||
color: rgb(64 158 255);
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__item.is-active {
|
||||
color: rgb(64 158 255);
|
||||
}
|
||||
|
||||
&::after {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.el-card) {
|
||||
width: 95%;
|
||||
margin: 20px auto 0;
|
||||
border-radius: 10px;
|
||||
|
||||
.el-card__header {
|
||||
height: 60px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
background-color: rgb(249 249 249 / 100%);
|
||||
border-bottom: 1px solid rgb(233 233 233 / 100%);
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
.el-steps {
|
||||
height: 90px;
|
||||
padding-top: 10px;
|
||||
|
||||
.el-step {
|
||||
.el-step__head {
|
||||
.el-step__icon {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border: 3px solid;
|
||||
|
||||
.el-step__icon-inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-step__main {
|
||||
.el-step__title {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.el-step__description {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
&.stepsActive {
|
||||
.el-step__head {
|
||||
.el-step__icon {
|
||||
background-color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.steps-vertical-class {
|
||||
height: auto;
|
||||
|
||||
.el-step__head {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-color: #f2f2f2;
|
||||
|
||||
.el-step__line {
|
||||
bottom: -50%;
|
||||
left: 11.5px;
|
||||
background-color: #f2f2f200;
|
||||
}
|
||||
|
||||
.el-step__icon {
|
||||
width: 9px !important;
|
||||
height: 9px !important;
|
||||
border-width: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-step__main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 125px;
|
||||
margin-top: 10px;
|
||||
|
||||
.el-step__title {
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
color: #999 !important;
|
||||
}
|
||||
|
||||
.el-step__description {
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
|
||||
.el-card {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
box-shadow: 0 0 5px rgb(0 0 0 / 9.8%);
|
||||
|
||||
.el-card__body {
|
||||
display: flex;
|
||||
height: calc(100% - 16px);
|
||||
padding: 8px 30px 8px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-empty {
|
||||
.el-empty__image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.el-empty__description > p {
|
||||
font-size: 13px;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.avue-crud {
|
||||
.el-card {
|
||||
border-radius: 0;
|
||||
|
||||
.el-form {
|
||||
.el-table__header-wrapper {
|
||||
.el-table__header {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
|
||||
.el-table__cell {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__body {
|
||||
.el-table__row {
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.el-table__cell {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
|
||||
.el-button {
|
||||
.el-icon {
|
||||
line-height: 0.9em;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__row--striped .el-table__cell {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-and-tabs {
|
||||
.el-card__header {
|
||||
height: 60px;
|
||||
padding: 0 20px 0 0;
|
||||
|
||||
.el-tabs {
|
||||
--el-tabs-header-height: 60px;
|
||||
|
||||
.el-tabs__header {
|
||||
background-color: rgb(249 249 249);
|
||||
|
||||
.el-tabs__nav-wrap {
|
||||
height: 60px;
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding-bottom: 40px;
|
||||
|
||||
.el-card {
|
||||
width: calc(100% - 10px);
|
||||
padding: 0 5px;
|
||||
|
||||
.el-card__body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
.el-form-item__label {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
.el-input__inner {
|
||||
font-family: MicrosoftYaHei, '微软雅黑', sans-serif;
|
||||
font-weight: 400;
|
||||
color: #666 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .avue-title p {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif !important;
|
||||
font-size: 18px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #666 !important;
|
||||
}
|
||||
|
||||
::v-deep .demo-tabs .el-tabs__nav {
|
||||
margin-left: 25px;
|
||||
|
||||
.el-tabs__item {
|
||||
margin-bottom: 15px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.el-tabs__active-bar {
|
||||
left: -1px;
|
||||
height: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .card-header .el-tabs__nav {
|
||||
// margin-left: 25px;
|
||||
|
||||
.el-tabs__item {
|
||||
margin-bottom: 0 !important;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-tabs__active-bar {
|
||||
left: 2px;
|
||||
height: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.font {
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.font-family {
|
||||
font-family: MicrosoftYaHei, '微软雅黑', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
// .fonts{
|
||||
// font-family: 'MicrosoftYaHei', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
// font-weight: 400;
|
||||
// font-style: normal;
|
||||
// font-size: 12px;
|
||||
// }
|
||||
</style>
|
||||
92
src/views/lowTemplate/generalPage/group/group_jcxqy.vue
Normal file
92
src/views/lowTemplate/generalPage/group/group_jcxqy.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<!-- 基础详情页 -->
|
||||
<ContentWrap>
|
||||
<div v-for="item in stepList" :key="item.refKey">
|
||||
<div class="pl-8px b-l-6px b-solid b-#409EFF mb-15px title">{{ item.title }}</div>
|
||||
<div class="mb-20px" v-if="item.type == 'exploit'">
|
||||
<FormView
|
||||
formType="view"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="item.defaultData"
|
||||
:showButton="false"
|
||||
:formId="item.formId"
|
||||
></FormView>
|
||||
</div>
|
||||
<div class="mt-20px" v-if="item.type == 'design'">
|
||||
<LowTable :tableId="item.tableId" :enhanceData="item.enhanceData"></LowTable>
|
||||
</div>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FormView, LowTable } from '@/components/LowDesign/index'
|
||||
|
||||
defineOptions({ name: 'GroupJcxqy' })
|
||||
const basicDefaultData = reactive({
|
||||
customer_name: '广州某科技有限公司',
|
||||
customer_rating: 3,
|
||||
customer_source: '3',
|
||||
customer_status: '4',
|
||||
now_city: '120000,120100,120102',
|
||||
system_number: '202010033',
|
||||
type_of_industry: '4',
|
||||
update_date: '2024-01-23 23:23:23',
|
||||
vesting_officer: '1836227753657548801'
|
||||
})
|
||||
|
||||
const detailDefaultData = reactive({
|
||||
company_tax: '91645530MA5FQY4QGB',
|
||||
company_tel: '15238680350',
|
||||
company_web: 'http://www.xx.cn',
|
||||
current_title: '2',
|
||||
deposit_bank: '建设银行广州白云支行',
|
||||
detailed_address: '440000,440100,440111',
|
||||
head_contact: '1836227753657548801',
|
||||
invoice_title: '发票抬头',
|
||||
phone_number: '15239683355'
|
||||
})
|
||||
|
||||
const financialEnhanceData = reactive({
|
||||
hideHeader: 'disabled'
|
||||
})
|
||||
|
||||
const stepList = ref([
|
||||
{
|
||||
refKey: 'basic',
|
||||
title: '基本信息',
|
||||
type: 'exploit',
|
||||
formId: '1833063456320286721',
|
||||
defaultData: basicDefaultData
|
||||
},
|
||||
{
|
||||
refKey: 'detail',
|
||||
title: '详细信息',
|
||||
type: 'exploit',
|
||||
formId: '1833076541672169474',
|
||||
defaultData: detailDefaultData
|
||||
},
|
||||
{
|
||||
refKey: 'financial',
|
||||
title: '下级客户',
|
||||
type: 'design',
|
||||
tableId: '1833323260582391810',
|
||||
enhanceData: financialEnhanceData
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
height: 18px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
color: #666670;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
57
src/views/lowTemplate/generalPage/group/group_sjbby.vue
Normal file
57
src/views/lowTemplate/generalPage/group/group_sjbby.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<!-- tabs标签页风格表单开发示例 -->
|
||||
<el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick">
|
||||
<template v-for="item in tabsPaneList" :key="item.name">
|
||||
<el-tab-pane :label="item.label" :name="item.name">
|
||||
<LowTable
|
||||
:ref="(el) => (tableRef[item.name] = el)"
|
||||
:tableId="item.tableId"
|
||||
:calcHeight="item.calcHeight || undefined"
|
||||
:enhanceData="item.enhanceData"
|
||||
></LowTable>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { LowTable } from '@/components/LowDesign/index'
|
||||
|
||||
defineOptions({ name: 'GroupSjbby' })
|
||||
|
||||
const activeName = ref('cjje')
|
||||
const tableRef = ref({})
|
||||
|
||||
const tabsPaneList = ref([
|
||||
{
|
||||
label: '成交金额',
|
||||
name: 'cjje',
|
||||
tableId: '1834136609367400450',
|
||||
enhanceData: { hideHeader: 'disabled' }
|
||||
},
|
||||
{ label: '回款金额', name: 'hkje', tableId: '1851509263837597697', calcHeight: 200 }
|
||||
])
|
||||
|
||||
const handleClick = (tab) => {
|
||||
const key = tab.props.name
|
||||
if (key == 'hkje' && tableRef.value[key]) tableRef.value[key].initTableLayout()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.demo-tabs > .el-tabs__content {
|
||||
padding: 32px;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #6b778c;
|
||||
}
|
||||
|
||||
.demo-tabs {
|
||||
::v-deep(.el-tabs__nav-wrap) {
|
||||
.el-tabs__item {
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
7
src/views/lowTemplate/generalPage/group/group_zlsz.vue
Normal file
7
src/views/lowTemplate/generalPage/group/group_zlsz.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div> 高级筛选页 </div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
94
src/views/lowTemplate/generalPage/journal/journal.vue
Normal file
94
src/views/lowTemplate/generalPage/journal/journal.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="w-100%">
|
||||
<div class="box w-100%">
|
||||
<div class="w-[calc(100%-60px)] header">
|
||||
<el-radio-group v-model="radio" >
|
||||
<template v-for="(item,index) in tabbleDate" :key="index">
|
||||
<el-radio-button :label="item.label" :value="index"/>
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="tabel">
|
||||
<LowTable :ref="(el)=>(customRef = el)" :tableId="tabbleDate[radio].tableId" :enhanceData="tabbleDate[radio].enhanceData" > </LowTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
const radio = ref(0)
|
||||
const customRef = ref()
|
||||
const tabbleDate = ref([
|
||||
{
|
||||
label:'操作日志',
|
||||
type:'table',
|
||||
defaultData:{},
|
||||
tableId:'1854067250698612737',
|
||||
enhanceData: { hideHeader: 'disabled'}
|
||||
},
|
||||
{
|
||||
label:'审批日志',
|
||||
type:'table',
|
||||
defaultData:{},
|
||||
tableId:'1854331399533998082',
|
||||
enhanceData: { hideHeader: 'disabled'}
|
||||
},
|
||||
{
|
||||
label:'登录日志',
|
||||
type:'table',
|
||||
defaultData:{},
|
||||
tableId:'1854341001851940865',
|
||||
enhanceData: { hideHeader: 'disabled'}
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box{
|
||||
background-color: rgb(255 255 255 / 100%);
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 5px rgb(0 0 0 / 4.71%);
|
||||
box-sizing: border-box;
|
||||
|
||||
.header{
|
||||
display: flex;
|
||||
height: 60px;
|
||||
padding: 0 30px;
|
||||
background-color: rgb(249 249 249 / 100%);
|
||||
border-bottom: 1px solid rgb(233 233 233 / 100%);
|
||||
border-radius: 10px 10px 0 0;
|
||||
align-content: center;;
|
||||
|
||||
::v-deep(.el-radio-group){
|
||||
.el-radio-button{
|
||||
.el-radio-button__inner{
|
||||
display: flex;
|
||||
width: 101px;
|
||||
height: 35px;
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active {
|
||||
.el-radio-button__inner{
|
||||
color: #FFF ;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabel{
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
340
src/views/lowTemplate/generalPage/post/postForm.vue
Normal file
340
src/views/lowTemplate/generalPage/post/postForm.vue
Normal file
@@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<div class="step-orde-form-box">
|
||||
<div class="order-top">
|
||||
<div style="display: flex">
|
||||
<div class="tb-box">
|
||||
<img src="/img/zwgl.jpg" style="height: 30px" />
|
||||
</div>
|
||||
<div class="title-box">
|
||||
<p class="title">销售总监</p>
|
||||
<div class="text-box">
|
||||
<span>暂无相关描述</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FormView
|
||||
:ref="(el) => (formViewRef[orderTopData.refKey] = el)"
|
||||
formType="add"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="orderTopData.defaultData"
|
||||
:showButton="false"
|
||||
:formId="orderTopData.formId"
|
||||
></FormView>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<template v-for="(item, index) in data" :key="index">
|
||||
<el-tab-pane :label="item.label" :name="item.name">
|
||||
<div class="tabs-box">
|
||||
<FormView
|
||||
v-if="item.formId"
|
||||
formType="add"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="item.defaultData"
|
||||
:showButton="true"
|
||||
:formId="item.formId"
|
||||
></FormView>
|
||||
<template v-if="item.tableId">
|
||||
<LowTable :tableId="item.tableId" :enhanceData="item.enhanceData"> </LowTable>
|
||||
</template>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
|
||||
interface Props {
|
||||
type?: string //控件名称
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const orderTopData = ref({
|
||||
refKey: 'gdgl',
|
||||
formId: '1846114280447025153',
|
||||
defaultData: {
|
||||
gdbh: '202062976600',
|
||||
gdbt: '处理客户反馈问题',
|
||||
gdzt: 1,
|
||||
lx: props.type
|
||||
}
|
||||
})
|
||||
const formViewRef = ref({})
|
||||
|
||||
const activeName = ref('first')
|
||||
|
||||
const data = reactive([
|
||||
{
|
||||
label: '操作权限',
|
||||
name: 'first',
|
||||
defaultData: {},
|
||||
formId: '1846364734045270018'
|
||||
},
|
||||
{
|
||||
label: '数据权限',
|
||||
name: 'second',
|
||||
defaultData: {},
|
||||
formId: '1846383339671629825'
|
||||
},
|
||||
{
|
||||
label: '字段权限',
|
||||
name: 'third',
|
||||
defaultData: {},
|
||||
formId: '1846399447287967745'
|
||||
},
|
||||
{
|
||||
label: '成员列表',
|
||||
name: 'fourth',
|
||||
defaultData: {},
|
||||
tableId: '1846429439782793217',
|
||||
enhanceData: { hideHeader: 'disabled' }
|
||||
},
|
||||
{
|
||||
label: '操作记录',
|
||||
name: 'czjl',
|
||||
defaultData: {},
|
||||
tableId: '1846103236139950082',
|
||||
enhanceData: { hideHeader: 'disabled' }
|
||||
}
|
||||
])
|
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.step-orde-form-box {
|
||||
.order-top {
|
||||
display: flex;
|
||||
height: 110px;
|
||||
padding: 20px 25px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 5px rgb(0 0 0 / 4.71%);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.tb-box {
|
||||
display: flex;
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
line-height: 65px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background: #fb6260;
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
margin-left: 15px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.title {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
// margin-bottom: 5px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-box {
|
||||
display: flex;
|
||||
font-family: '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
color: #999;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
|
||||
.text-box-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.dian {
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
margin-right: 5px;
|
||||
margin-left: 10px;
|
||||
background: #f90;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.steps {
|
||||
width: calc(90% + 40px);
|
||||
padding: 60px 0 30px;
|
||||
margin: 0 auto 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
border-radius: 10px;
|
||||
|
||||
::v-deep(.el-steps) {
|
||||
.el-step {
|
||||
.el-step__head.is-process {
|
||||
color: #409eff;
|
||||
|
||||
.el-step__icon.is-text {
|
||||
color: white;
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.el-step__head {
|
||||
.el-step__line {
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
.el-step__icon.is-text {
|
||||
width: 25px;
|
||||
height: 30px;
|
||||
|
||||
.el-step__icon-inner {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-step__main {
|
||||
.el-step__title {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.el-step__description {
|
||||
font-size: 13px;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .card > .el-card {
|
||||
width: calc(90% + 40px);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
|
||||
// &>::v-deep(.crud){
|
||||
// width: calc(90% + 40px);
|
||||
// }
|
||||
|
||||
::v-deep(.el-card) {
|
||||
// width: calc(90% + 40px);
|
||||
|
||||
.el-card__header {
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.card-header {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
.avue-crud {
|
||||
.el-card {
|
||||
margin: 0 auto;
|
||||
border-radius: 0;
|
||||
|
||||
.el-table__header {
|
||||
height: 55px;
|
||||
|
||||
th {
|
||||
height: 55px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__body {
|
||||
.el-table__row {
|
||||
.el-table__cell {
|
||||
font-size: 13px;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
// padding: 0px 10p;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 60px;
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 5px rgb(11 11 11 / 5.7%);
|
||||
|
||||
::v-deep .el-tabs__nav-wrap::after {
|
||||
// background: none !important;
|
||||
}
|
||||
|
||||
.tabs-box {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__nav-scroll {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background: #f9f9f9;
|
||||
align-items: center;
|
||||
border-radius: 10px 10px 0 0;
|
||||
|
||||
.el-tabs__nav {
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
|
||||
.el-tabs__item {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
21
src/views/lowTemplate/generalPage/project/jdt.vue
Normal file
21
src/views/lowTemplate/generalPage/project/jdt.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div >
|
||||
<div class="box">
|
||||
<el-progress :percentage="jdt" :stroke-width="11"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
jdt?: number //控件名称
|
||||
}
|
||||
const props =defineProps<Props>()
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box{
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
138
src/views/lowTemplate/generalPage/project/project.vue
Normal file
138
src/views/lowTemplate/generalPage/project/project.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div class="w-100%">
|
||||
<header class="header ">
|
||||
<div class="list" v-for="(item,index) in listData" :key="index">
|
||||
<p class="title">{{item.title}}</p>
|
||||
<p class="text">{{item.num}}</p>
|
||||
</div>
|
||||
</header>
|
||||
<footer class="content">
|
||||
<div class="content-top" >
|
||||
<el-radio-group v-model="radio1" size="large">
|
||||
<el-radio-button label="全部项目" value="qbxm" />
|
||||
<el-radio-button label="进行中" value="jxz" />
|
||||
<el-radio-button label="已完成" value="ywc" />
|
||||
<el-radio-button label="已延期" value="yyq" />
|
||||
<el-radio-button label="已取消" value="yqx" />
|
||||
</el-radio-group>
|
||||
<el-input
|
||||
v-model="input"
|
||||
style="width: 200px;height: 35px;margin-left:20px;"
|
||||
size="large"
|
||||
placeholder="输入搜索关键词"
|
||||
:suffix-icon="Search"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div class="table">
|
||||
</div>
|
||||
<LowTable :tableId="data.tableId" :enhanceData="data.enhanceData" > </LowTable>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
|
||||
const listData = reactive([
|
||||
{title:'项目总数',num:'200'},
|
||||
{title:'进行中',num:'50'},
|
||||
{title:'已完成',num:'50'},
|
||||
{title:'已延期',num:'50'},
|
||||
{title:'已取消',num:'50'},
|
||||
])
|
||||
|
||||
const data = reactive({
|
||||
label:'全部项目',
|
||||
name:'qbxm',
|
||||
defaultData:{},
|
||||
tableId:'1847094468974710786',
|
||||
type:'table',
|
||||
enhanceData: { hideHeader: 'disabled'}
|
||||
})
|
||||
|
||||
const radio1 = ref('qbxm')
|
||||
const input = ref('')
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header{
|
||||
display: flex;
|
||||
height: 150px;
|
||||
padding: 0 20px;
|
||||
margin-bottom:20px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.list{
|
||||
width: 292px;
|
||||
width: 100%;
|
||||
|
||||
p{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title{
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 42px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.text{
|
||||
font-family: '微软雅黑 Bold', '微软雅黑', sans-serif;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
line-height: 42px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content{
|
||||
position: relative;
|
||||
// height: 600px;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
|
||||
.content-top{
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
::v-deep(.el-radio-group) {
|
||||
.el-radio-button {
|
||||
.el-radio-button__inner {
|
||||
display: flex;
|
||||
width: 101px;
|
||||
height: 35px;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&.is-active{
|
||||
.el-radio-button__inner {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table{
|
||||
// position: absolute;
|
||||
margin-top:10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
310
src/views/lowTemplate/generalPage/project/projectForm.vue
Normal file
310
src/views/lowTemplate/generalPage/project/projectForm.vue
Normal file
@@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<div class="step-orde-form-box">
|
||||
<div class="order-top">
|
||||
<FormView
|
||||
:ref="(el) => (formViewRef[orderTopData.refKey] = el)"
|
||||
formType="add"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="orderTopData.defaultData"
|
||||
:showButton="false"
|
||||
:formId="orderTopData.formId"
|
||||
></FormView>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<template v-for="(item,index) in data" :key="index">
|
||||
<el-tab-pane :label="item.label" :name="item.name">
|
||||
<div class="tabs-box">
|
||||
<upDate v-if="item.type == 'jurisdiction'"></upDate>
|
||||
<template v-if="item.type == 'table'">
|
||||
<LowTable :tableId="item.tableId" :enhanceData="item.enhanceData" > </LowTable>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
import upDate from './update.vue'
|
||||
|
||||
interface Props {
|
||||
type?: string //控件名称
|
||||
}
|
||||
const props =defineProps<Props>()
|
||||
|
||||
const orderTopData = ref({
|
||||
type:'table',
|
||||
refKey: 'gdgl',
|
||||
formId: '1847209781133185025',
|
||||
defaultData: {},
|
||||
enhanceData: { hideHeader: 'disabled'}
|
||||
})
|
||||
|
||||
const formViewRef = ref({})
|
||||
|
||||
const activeName = ref('first')
|
||||
|
||||
const data = reactive([
|
||||
{label:'任务列表',name:'first',defaultData:{},tableId:'1847472439438737409',type:'table'},
|
||||
{label:'更新记录',name:'second',defaultData:{},tableId:'',type:'jurisdiction'},
|
||||
{label:'附件记录',name:'third',defaultData:{},tableId:'1845012516400803842',type:'table',enhanceData: { hideHeader: 'disabled'}},
|
||||
{label:'成员列表',name:'fourth',defaultData:{},tableId:'1848301752228683777',type:'table',enhanceData: { hideHeader: 'disabled'}},
|
||||
])
|
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.step-orde-form-box {
|
||||
.order-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 25px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #fff;
|
||||
// border: 1px solid rgb(233 233 233 / 100%);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 5px rgb(11 11 11 / 5.7%);
|
||||
|
||||
.tb-box {
|
||||
display: flex;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background: #fb6260;
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
margin-left: 10px;
|
||||
|
||||
.title {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
// margin-bottom: 5px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-box {
|
||||
display: flex;
|
||||
font-family: '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
color: #999;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
|
||||
.text-box-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.dian {
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
margin-right: 5px;
|
||||
margin-left: 10px;
|
||||
background: #f90;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.steps {
|
||||
width: calc(90% + 40px);
|
||||
padding: 60px 0 30px;
|
||||
margin: 0 auto 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
border-radius: 10px;
|
||||
|
||||
::v-deep(.el-steps) {
|
||||
.el-step {
|
||||
.el-step__head.is-process {
|
||||
color: #409eff;
|
||||
|
||||
.el-step__icon.is-text {
|
||||
color: white;
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.el-step__head {
|
||||
.el-step__line {
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
.el-step__icon.is-text {
|
||||
width: 25px;
|
||||
height: 30px;
|
||||
|
||||
.el-step__icon-inner {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-step__main {
|
||||
.el-step__title {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.el-step__description {
|
||||
font-size: 13px;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .card > .el-card {
|
||||
width: calc(90% + 40px);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
|
||||
// &>::v-deep(.crud){
|
||||
// width: calc(90% + 40px);
|
||||
// }
|
||||
|
||||
::v-deep(.el-card) {
|
||||
// width: calc(90% + 40px);
|
||||
|
||||
.el-card__header {
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.card-header {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
.avue-crud {
|
||||
.el-card {
|
||||
margin: 0 auto;
|
||||
border-radius: 0;
|
||||
|
||||
.el-table__header {
|
||||
height: 55px;
|
||||
|
||||
th {
|
||||
height: 55px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__body {
|
||||
.el-table__row {
|
||||
.el-table__cell {
|
||||
font-size: 13px;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer{
|
||||
// padding: 0px 10p;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 60px;
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 5px rgb(11 11 11 / 5.7%);
|
||||
|
||||
::v-deep .el-tabs__nav-wrap::after {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__nav-scroll {
|
||||
background: #f9f9f9 !important;
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.tabs-box{
|
||||
padding: 0 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item{
|
||||
font-family: '微软雅黑 Bold', '微软雅黑', sans-serif;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
::v-deep th.el-table__cell {
|
||||
height: 55px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑', sans-serif;
|
||||
font-weight: 700;
|
||||
color: #666 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs .el-tabs__nav-wrap {
|
||||
height: 60px;
|
||||
|
||||
.el-tabs__nav{
|
||||
height: 60px;
|
||||
|
||||
.el-tabs__item{
|
||||
height: 60px;
|
||||
// line-height: 60px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
color: #666;
|
||||
|
||||
&.is-active{
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
305
src/views/lowTemplate/generalPage/project/update.vue
Normal file
305
src/views/lowTemplate/generalPage/project/update.vue
Normal file
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="footer">
|
||||
<!-- <div style="display: flex; align-items: center; margin-bottom: 20px">
|
||||
<span class="span"></span><span>操作记录</span>
|
||||
</div> -->
|
||||
<div class="footer-list">
|
||||
<el-steps :space="150" :active="czjlData.length" direction="vertical">
|
||||
<template v-for="(item, index) in czjlData" :key="index">
|
||||
<el-step :title="item.title" :description="item.description" last>
|
||||
<template #title>
|
||||
<div class="content flex h-100px">
|
||||
<div class="img mt-10px"
|
||||
><Icon icon="mingcute:user-3-fill" :size="25" style="color: #fff"
|
||||
/></div>
|
||||
<div class="w-[calc(100%-45px)] mt-6px mb-6px grid grid-rows-3">
|
||||
<div class="content-top">
|
||||
<div class="list-box-top-left">
|
||||
<span style="font-size: 14px; color: #666">{{ item.name }}</span>
|
||||
<p class="font" style="margin-left: 5px">{{ item.text }}</p>
|
||||
</div>
|
||||
<div class="list-box-top-right pr-20px mt-30px">
|
||||
<!-- <div> -->
|
||||
<span class="box"></span>
|
||||
<span style="margin: 0 10px 0 5px">正常</span>
|
||||
<span>完成进度：50%</span>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="content-bottom"> -->
|
||||
<div>
|
||||
<p class="text">{{ item.content }}</p>
|
||||
</div>
|
||||
<div class="lzgd">
|
||||
<Icon icon="mingcute:time-line" :size="14" style="color: #999" />
|
||||
<span style="color: #999 !important">{{ item.time }}</span>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-step>
|
||||
</template>
|
||||
</el-steps>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const czjlData = ref([
|
||||
{
|
||||
title: '',
|
||||
description: '08-23',
|
||||
text: '销售经理',
|
||||
name: '赵小刚',
|
||||
content:
|
||||
'在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
|
||||
gd: '工单标题',
|
||||
time: '2020-12-23 22:31'
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
description: '08-23',
|
||||
text: '销售经理',
|
||||
name: '赵小刚',
|
||||
content:
|
||||
'在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
|
||||
gd: '工单标题',
|
||||
time: '2020-12-23 22:31'
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
description: '08-23',
|
||||
text: '销售经理',
|
||||
name: '赵小刚',
|
||||
content:
|
||||
'在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
|
||||
gd: '工单标题',
|
||||
time: '2020-12-23 22:31'
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
description: '08-23',
|
||||
text: '销售经理',
|
||||
name: '赵小刚',
|
||||
content:
|
||||
'在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
|
||||
gd: '工单标题',
|
||||
time: '2020-12-23 22:31'
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
description: '08-23',
|
||||
text: '销售经理',
|
||||
name: '赵小刚',
|
||||
content:
|
||||
'在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
|
||||
gd: '工单标题',
|
||||
time: '2020-12-23 22:31'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer {
|
||||
margin: 30px 50px;
|
||||
margin-bottom: 50px;
|
||||
|
||||
.span {
|
||||
display: inline-block;
|
||||
width: 8.5px;
|
||||
height: 19px;
|
||||
margin-right: 10px;
|
||||
background: #409eff;
|
||||
}
|
||||
|
||||
.footer-list {
|
||||
width: 100%;
|
||||
// height: 200px;
|
||||
// padding: 20px;
|
||||
|
||||
::v-deep(.el-steps) {
|
||||
.el-step.is-vertical {
|
||||
.el-step__head {
|
||||
.el-step__line {
|
||||
width: 1px;
|
||||
margin-top: 25px;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.el-step__icon {
|
||||
width: 10px !important;
|
||||
height: 10px;
|
||||
margin-top: -20px;
|
||||
margin-left: 7px;
|
||||
overflow: hidden;
|
||||
|
||||
.el-step__icon-inner {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-step__main {
|
||||
margin-top: 2px;
|
||||
|
||||
.el-step__description.is-finish {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .el-step:last-child {
|
||||
// .el-step__head::after {
|
||||
// position: absolute;
|
||||
// top: 25px;
|
||||
// right: 11px;
|
||||
// z-index: 1;
|
||||
// display: block;
|
||||
// width: 1.6px;
|
||||
// height: 110px;
|
||||
// background-color: #f2f2f2;
|
||||
// border-color: red;
|
||||
// content: '';
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: 53px;
|
||||
width: 95.5%;
|
||||
padding:0 10px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 5px rgb(0 0 0 / 9.8%);
|
||||
|
||||
.img {
|
||||
display: flex;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin-right: 10px;
|
||||
background: #ccc;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.list-box-top-left {
|
||||
display: flex;
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-box-top-right {
|
||||
display: flex;
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
color: #666;
|
||||
align-items: center;
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: #51d351;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .content-bottom {
|
||||
// margin-top: -10px;
|
||||
// margin-left: 38px;
|
||||
// font-size: 12px;
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 5px 0;
|
||||
font-family: MicrosoftYaHei, '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
color: #666;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.lzgd {
|
||||
display: flex;
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.el-steps) {
|
||||
.el-step__head {
|
||||
.el-step__line {
|
||||
background-color: var(--el-color-info-light-7);
|
||||
}
|
||||
|
||||
.el-step__icon {
|
||||
width: 30px !important;
|
||||
}
|
||||
|
||||
&.is-finish {
|
||||
margin-top: 5px;
|
||||
color: #f2f2f2 !important;
|
||||
border-color: #f2f2f2 !important;
|
||||
|
||||
.el-step__line {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-step:not(:last-child) {
|
||||
.el-step__head {
|
||||
&.is-process::before {
|
||||
position: absolute;
|
||||
top: calc(50% - 1px);
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
background-color: var(--el-color-primary);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-step__icon.is-text {
|
||||
// margin-top: -20px;
|
||||
color: #666 !important;
|
||||
border-color: #409eff !important;
|
||||
}
|
||||
|
||||
.font {
|
||||
font-family: MicrosoftYaHei, '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<div class="article">
|
||||
<div
|
||||
class="w-[calc(100%-80px)] h-110px flex items-center bg-#f9f9f9 b-1px b-solid b-#e9e9e9 pl-40px pr-40px"
|
||||
>
|
||||
<div>
|
||||
<div class="h-36px flex items-center">
|
||||
<div class="font-wryh font-700 text-20px c-#666666 mr-15px">
|
||||
{{ data.htbt }}
|
||||
</div>
|
||||
<div class="flex mr-10px" v-if="data.sd && data.sd == '1'">
|
||||
<Icon icon="solar:lock-linear"></Icon>
|
||||
</div>
|
||||
<div
|
||||
class="w-52px h-20px bg-#0099ff rounded-2xl c-white flex justify-center items-center text-12px mr-10px"
|
||||
v-if="data.zd && data.zd == '1'"
|
||||
>
|
||||
置顶
|
||||
</div>
|
||||
<div
|
||||
class="w-52px h-20px bg-#ff7a8c rounded-2xl c-white flex justify-center items-center text-12px"
|
||||
v-if="data.rm && data.rm == '1'"
|
||||
>
|
||||
热门
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-38.4px flex items-center">
|
||||
<el-avatar :size="20" :src="data.cytx" />
|
||||
<span class="font-wryh ml-10px text-14px c-#999999">{{ data.$create_user }}</span>
|
||||
<span class="font-wryh ml-10px text-14px c-#999999 flex items-center">
|
||||
<Icon icon="mingcute:time-line" :size="17"></Icon>
|
||||
{{ data.create_time }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<el-button type="primary" plain style="width: 80px; height: 35px" @click="bjBtn">
|
||||
<Icon icon="fa6-solid:pen" :size="15" class="mr-2px"></Icon>
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-80px)] pl-40px pr-40px b-1px b-t-0 b-solid b-#e9e9e9">
|
||||
<div class="pt-30px" v-html="vHtml" style="line-height: 32px"> </div>
|
||||
<div class="w-100% text-right c-#999 font-wryh"> 最后编辑时间：2020-11-24 10:00:00 </div>
|
||||
|
||||
<div class="mt-50px">
|
||||
<div class="flex items-center mb-30px">
|
||||
<div class="w-6px h-18px bg-#409EFF mr-8px"></div>
|
||||
<span class="font-wryh font-700 c-#666666"> 发布评论 </span>
|
||||
</div>
|
||||
<div class="flex h-60px mb-10px bottom">
|
||||
<el-input type="text" placeholder="请输入批阅内容" v-model="inputVal" />
|
||||
<el-button type="primary" @click="fbBtn">发布</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="flex items-center mt-40px mb-20px">
|
||||
<div class="w-6px h-18px bg-#409EFF mr-8px"></div>
|
||||
<span class="font-wryh font-700 c-#666666 mr-3px"> 评论记录 </span>
|
||||
<span class="font-400 c-#666666"> 10条 </span>
|
||||
</div>
|
||||
</div>
|
||||
<el-alert v-for="item in defineData" :key="item.id" type="info" :closable="false">
|
||||
<template #title>
|
||||
<el-avatar :size="28" class="mr-5px" :src="item.imgUrl" />
|
||||
<span class="c-#666666 mr-10px">{{ item.name }}</span>
|
||||
<span class="c-#999999 text-12px">{{ item.time }}</span>
|
||||
</template>
|
||||
<template #default>
|
||||
<span class="c-#999999">{{ item.content }}</span>
|
||||
<div class="like flex">
|
||||
<Icon
|
||||
icon="iconamoon:like-bold"
|
||||
class="mr-2px cursor-pointer"
|
||||
:class="item.isLike ? 'c-red' : ''"
|
||||
@click="likeClick(item.id)"
|
||||
></Icon>
|
||||
{{ item.like }}
|
||||
</div>
|
||||
</template>
|
||||
</el-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
|
||||
interface Data {
|
||||
htbt: string
|
||||
create_time: string
|
||||
$create_user: string
|
||||
cytx: string
|
||||
rm: string
|
||||
sd: string
|
||||
zd: string
|
||||
}
|
||||
|
||||
const prop = defineProps<{
|
||||
data: Data
|
||||
hideFun: Function
|
||||
}>()
|
||||
|
||||
const data = prop.data
|
||||
|
||||
const bjBtn = () => {
|
||||
prop.hideFun!()
|
||||
}
|
||||
|
||||
const vHtml = ref(
|
||||
'<div id="u90044_text" class="text "> <p><span>近日，在阿里云2020年云栖大会上，阿里云智能网络产品研究员祝顺民重磅发布了多款网络新品，其中之一就是应用负载均衡ALB。ALB产品定位应用层高级负载，具备超强性能、安全可靠、面向云原生、即开即用等优势价值，提供弹性自动伸缩、QUIC协议支持、基于内容的高级路由、自带DDoS安全防护、云原生应用、弹性灵活计费等产品能力，满足越来越多元化的应用层负载需求。</span></p><br><p><span>说到负载均衡，很多朋友或许都会想到经典负载均衡，阿里云负载均衡SLB发布近十年，为各行各业的用户提供强大稳定的负载分担能力，解决大并发流量负载分担，消除单点故障，提高业务可用性。但随着企业和互联网业务高速发展，业务形态和需求不断变化，诸多业务场景已经无法单纯的用传统负载均衡来满足全部需求。在大互联网业务、电商大促、音视频、移动互联网应用、游戏业务、金融服务、云原生开发应用等场景中，存在大量高性能、弹性、多协议七层转发、安全、云原生等需求，急需新产品设计来满足。</span></p><p><span><br></span></p> </div>'
|
||||
)
|
||||
|
||||
const defineData = ref([
|
||||
{
|
||||
id: 1,
|
||||
imgUrl:
|
||||
'https://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/f0ee8a3c7c9638a54940382568c9dpng_5.png',
|
||||
name: '赵小刚',
|
||||
time: '2019-03-23 22:31',
|
||||
content: '非常不错的分享，对我们的工作很有参考价值。',
|
||||
like: 100,
|
||||
isLike: false
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imgUrl:
|
||||
'https://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/f0ee8a3c7c9638a54940382568c9dpng_5.png',
|
||||
name: '赵小刚',
|
||||
time: '2019-03-23 22:31',
|
||||
content: '非常不错的分享，对我们的工作很有参考价值。',
|
||||
like: 100,
|
||||
isLike: false
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
imgUrl:
|
||||
'https://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/f0ee8a3c7c9638a54940382568c9dpng_5.png',
|
||||
name: '赵小刚',
|
||||
time: '2019-03-23 22:31',
|
||||
content: '非常不错的分享，对我们的工作很有参考价值。',
|
||||
like: 100,
|
||||
isLike: false
|
||||
}
|
||||
])
|
||||
|
||||
let likeIdList = ref<number[]>([])
|
||||
const inputVal = ref('')
|
||||
let dataLength = ref(0)
|
||||
const fbBtn = () => {
|
||||
if (!inputVal.value) return
|
||||
dataLength.value = defineData.value?.length || 0
|
||||
let endVal = defineData.value![dataLength.value - 1]
|
||||
let id = endVal.id + 1
|
||||
defineData.value![dataLength.value] = {
|
||||
id: id,
|
||||
imgUrl:
|
||||
'https://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/f0ee8a3c7c9638a54940382568c9dpng_5.png',
|
||||
name: '赵小刚',
|
||||
time: formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss'),
|
||||
content: inputVal.value,
|
||||
like: 0,
|
||||
isLike: false
|
||||
}
|
||||
inputVal.value = ''
|
||||
}
|
||||
|
||||
const likeClick = (id) => {
|
||||
defineData.value = defineData.value.map((item) => {
|
||||
if (id == item.id) {
|
||||
let index = likeIdList.value.indexOf(id)
|
||||
if (index == -1) {
|
||||
likeIdList.value.push(item.id)
|
||||
return {
|
||||
...item,
|
||||
like: item.like + 1,
|
||||
isLike: true
|
||||
}
|
||||
} else {
|
||||
likeIdList.value.splice(index, 1)
|
||||
return {
|
||||
...item,
|
||||
like: item.like - 1,
|
||||
isLike: false
|
||||
}
|
||||
}
|
||||
}
|
||||
return item
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.article {
|
||||
.font-wryh {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
::v-deep(.el-input) {
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
|
||||
.el-input__wrapper {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
font-family: '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.el-alert) {
|
||||
height: 90px;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 20px;
|
||||
background-color: rgb(249 249 249 / 49.8%);
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
border-radius: 0;
|
||||
|
||||
.el-alert__content {
|
||||
height: 100%;
|
||||
align-items: baseline;
|
||||
|
||||
.el-alert__title {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
font-family: '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-alert__description {
|
||||
font-family: '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
|
||||
.like {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
font-family: MicrosoftYaHei, '微软雅黑', sans-serif;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.el-alert__close-btn {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div class="w-80% m-auto search">
|
||||
<div class="bg-white h-60px p-20px mt-10px flex items-center top b-1px b-solid b-#e9e9e9">
|
||||
<div class="mr-15px">
|
||||
<Icon icon="flowbite:messages-solid" :size="52" class="c-#999999"></Icon>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="h-24px c-#666666"> 欢迎来到内部交流论坛 </div>
|
||||
<div class="h-24px c-#999999 text-12px font-wryh flex items-center">
|
||||
你可以自由选择你感兴趣的话题
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-auto flex top-right">
|
||||
<el-input v-model="inputValue" placeholder="输入搜索关键字" class="mr-20px h-35px" />
|
||||
<Icon icon="ic:outline-search" :size="22" class="cursor-pointer search"></Icon>
|
||||
<el-button type="primary" style="width: 100px; height: 35px" @click="inputVisible = true">
|
||||
<Icon icon="vaadin:plus" :size="18"></Icon>
|
||||
创建话题
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white b-1px b-solid b-#E9E9E9 w-100%">
|
||||
<div
|
||||
class="h-70px flex items-center pl-20px pr-20px"
|
||||
style="border-bottom: 1px solid #e9e9e9"
|
||||
>
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="最新话题" name="first"></el-tab-pane>
|
||||
<el-tab-pane label="热门话题" name="second"></el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<div class="ml-auto text-14px c-#999999" style="font-family: '微软雅黑', sans-serif">
|
||||
总贴数量：1000
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-60px)] pl-30px pr-30px mt-20px">
|
||||
<LowTable
|
||||
:ref="(el) => (tabRef = el)"
|
||||
tableId="1854716968965484545"
|
||||
:enhanceData="tabEnhanceData"
|
||||
>
|
||||
</LowTable>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog
|
||||
v-model="inputVisible"
|
||||
title="创建话题"
|
||||
width="800"
|
||||
:before-close="dialogHandleClose"
|
||||
destroy-on-close
|
||||
>
|
||||
<FormView
|
||||
formType="add"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:showButton="true"
|
||||
:enhanceData="{ updateDialog, type: 'add' }"
|
||||
formId="1854442042421391362"
|
||||
></FormView>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FormView, LowTable } from '@/components/LowDesign/index'
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
|
||||
const inputValue = ref('')
|
||||
const inputVisible = ref(false)
|
||||
|
||||
const updateDialog = () => {
|
||||
inputVisible.value = false
|
||||
tabRef.value.crudRef.refreshChange()
|
||||
}
|
||||
const dialogHandleClose = (done: () => void) => {
|
||||
done()
|
||||
}
|
||||
const tabEnhanceData = ref({
|
||||
type: 'view'
|
||||
})
|
||||
const tabRef = ref()
|
||||
const activeName = ref('first')
|
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search {
|
||||
.border-style {
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
}
|
||||
|
||||
.font-wryh {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
}
|
||||
|
||||
.top {
|
||||
margin-bottom: 20px;
|
||||
|
||||
::v-deep(.el-input) {
|
||||
width: 250px;
|
||||
|
||||
.el-input__wrapper {
|
||||
// color: rgb(204, 204, 204);
|
||||
border-radius: 200px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-right {
|
||||
position: relative;
|
||||
|
||||
.search {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 220px;
|
||||
color: #999;
|
||||
transform: translateY(-50%);
|
||||
|
||||
&:hover {
|
||||
color: #409eff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.el-tabs) {
|
||||
.el-tabs__header {
|
||||
margin: 0;
|
||||
|
||||
.el-tabs__nav-wrap {
|
||||
&::after {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.el-tabs__nav-scroll {
|
||||
.el-tabs__item {
|
||||
width: 100px;
|
||||
height: 70px;
|
||||
padding: 0;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
|
||||
&.is-active {
|
||||
color: rgb(64 158 255);
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__active-bar {
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-group {
|
||||
::v-deep(.el-radio-button) {
|
||||
.el-radio-button__inner {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.el-radio-button__inner {
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
156
src/views/lowTemplate/generalPage/riendshipForum/index.vue
Normal file
156
src/views/lowTemplate/generalPage/riendshipForum/index.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="riendshipForum-box">
|
||||
<div class="bg-white h-60px p-20px mt-10px flex items-center top b-1px b-solid b-#e9e9e9">
|
||||
<div class="mr-15px">
|
||||
<Icon icon="flowbite:messages-solid" :size="52" class="c-#999999"></Icon>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="h-24px c-#666666"> 欢迎来到内部交流论坛 </div>
|
||||
<div class="h-24px c-#999999 text-12px font-wryh flex items-center">
|
||||
你可以自由选择你感兴趣的话题
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-auto flex top-right">
|
||||
<el-input v-model="inputValue" placeholder="输入搜索关键字" class="mr-20px h-35px" />
|
||||
<Icon
|
||||
icon="ic:outline-search"
|
||||
:size="22"
|
||||
class="cursor-pointer search"
|
||||
></Icon>
|
||||
<el-button type="primary" style="width: 100px; height: 35px" @click="inputVisible = true">
|
||||
<Icon icon="vaadin:plus" :size="18"></Icon>
|
||||
创建话题
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white mt-20px b-1px b-solid b-#e9e9e9">
|
||||
<div
|
||||
class="h-70px flex items-center pl-20px pr-20px"
|
||||
style="border-bottom: 1px solid #e9e9e9"
|
||||
>
|
||||
<div
|
||||
class="text-18px font-700 h-19px flex items-center c-#666666 b-l-6px b-r-0 b-t-0 b-b-0 b-#409EFF b-solid pl-10px font-wryh"
|
||||
>
|
||||
讨论板块
|
||||
</div>
|
||||
|
||||
<div class="ml-auto text-14px c-#999999" style="font-family: '微软雅黑', sans-serif">
|
||||
总贴数量：1000
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<LowTable tableId="1854408557228961794" :enhanceData="tabEnhanceData"> </LowTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-model="inputVisible"
|
||||
title="创建话题"
|
||||
width="800"
|
||||
:before-close="dialogHandleClose"
|
||||
destroy-on-close
|
||||
>
|
||||
<FormView
|
||||
formType="add"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:showButton="true"
|
||||
:enhanceData="{ updateDialog }"
|
||||
formId="1854442042421391362"
|
||||
></FormView>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { LowTable } from '@/components/LowDesign/index'
|
||||
|
||||
defineOptions({ name: 'RiendshipForum' })
|
||||
const inputValue = ref('')
|
||||
|
||||
const tabEnhanceData = ref({
|
||||
type: 'view'
|
||||
})
|
||||
|
||||
const inputVisible = ref(false)
|
||||
|
||||
const updateDialog = () => {
|
||||
inputVisible.value = false
|
||||
}
|
||||
const dialogHandleClose = (done: () => void) => {
|
||||
done()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.riendshipForum-box {
|
||||
width: 1200px;
|
||||
min-height: 500px;
|
||||
margin: 0 auto;
|
||||
// border: 1px solid rgb(233 233 233 / 100%);
|
||||
// box-shadow: 0 0 5px rgb(0 0 0 / 4.71%);
|
||||
|
||||
.font-wryh {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
}
|
||||
|
||||
.top {
|
||||
::v-deep(.el-input) {
|
||||
width: 250px;
|
||||
|
||||
.el-input__wrapper {
|
||||
// color: rgb(204, 204, 204);
|
||||
border-radius: 200px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-right {
|
||||
position: relative;
|
||||
|
||||
.search {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 220px;
|
||||
color: #999;
|
||||
transform: translateY(-50%);
|
||||
|
||||
&:hover {
|
||||
color: #409eff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.el-overlay) {
|
||||
.el-dialog {
|
||||
border-radius: 5px;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 18px 13px 18px 15px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 5px 5px 0 0;
|
||||
|
||||
.el-dialog__title {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-drawer {
|
||||
background-color: rgb(240 242 245 / 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1120
src/views/lowTemplate/generalPage/schedule/schedule.vue
Normal file
1120
src/views/lowTemplate/generalPage/schedule/schedule.vue
Normal file
File diff suppressed because it is too large
Load Diff
123
src/views/lowTemplate/generalPage/staffManagement/index.vue
Normal file
123
src/views/lowTemplate/generalPage/staffManagement/index.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="card-box">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>员工管理</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex" style="min-height: 450px">
|
||||
<div class="flex-basis-200px flex-shrink-0">
|
||||
<avue-tree
|
||||
ref="tree"
|
||||
:option="option"
|
||||
:data="data"
|
||||
v-model="form"
|
||||
@node-expand="nodeExpand"
|
||||
@node-contextmenu="nodeContextmenu"
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
</avue-tree>
|
||||
</div>
|
||||
|
||||
<div class="flex-1" style="max-width: calc(100% - 220px)">
|
||||
<LowTable tableId="1846121741006647298" :enhanceData="{ type: 'view' }"> </LowTable>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { LowTable } from '@/components/LowDesign/index'
|
||||
defineOptions({ name: 'StaffManagement' })
|
||||
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const form = ref({})
|
||||
const data = ref([
|
||||
{
|
||||
value: 0,
|
||||
label: '一级部门',
|
||||
children: [
|
||||
{ value: 1, label: '一级部门1' },
|
||||
{ value: 2, label: '一级部门2' },
|
||||
{ value: 3, label: '一级部门3' },
|
||||
{ value: 4, label: '一级部门4' }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '二级部门',
|
||||
children: [
|
||||
{ value: 4, label: '二级部门1' },
|
||||
{ value: 5, label: '二级部门2' }
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
const option = ref({
|
||||
defaultExpandAll: true,
|
||||
filter: false,
|
||||
formOption: {
|
||||
labelWidth: 100,
|
||||
column: [
|
||||
{ label: '自定义项', prop: 'label' },
|
||||
{ label: '测试', prop: 'test' }
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const tree = ref()
|
||||
|
||||
onMounted(() => {
|
||||
tree.value.setCurrentKey(0)
|
||||
})
|
||||
|
||||
const nodeContextmenu = (data) => {
|
||||
ElMessage.success(JSON.stringify(data))
|
||||
}
|
||||
const nodeExpand = (data) => {
|
||||
ElMessage.success(JSON.stringify(data))
|
||||
}
|
||||
|
||||
const nodeClick = (data) => {
|
||||
ElMessage.success(JSON.stringify(data))
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.el-card) {
|
||||
&.card-box {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
// .el-card__body { }
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.el-tree) {
|
||||
.el-tree-node.is-current > .el-tree-node__content {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
height: 40px;
|
||||
|
||||
.el-tree-node__expand-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.el-tree-node__label {
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
333
src/views/lowTemplate/generalPage/staffManagement/staffView.vue
Normal file
333
src/views/lowTemplate/generalPage/staffManagement/staffView.vue
Normal file
@@ -0,0 +1,333 @@
|
||||
<template>
|
||||
<div class="userManagement-box">
|
||||
<div class="b-#F0F2F5 b-2px b-solid rounded-xl">
|
||||
<FormView
|
||||
formType="view"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="staffViewTopData.defaultData"
|
||||
:showButton="false"
|
||||
:formId="staffViewTopData.formId"
|
||||
></FormView>
|
||||
</div>
|
||||
<div class="mt-20px pb-20px b-#F0F2F5 b-2px b-solid" style="border-radius: 5px">
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<template v-for="item in tabsList" :key="item.labelKey">
|
||||
<el-tab-pane :label="item.label" :name="item.labelKey">
|
||||
<template v-if="item.formId">
|
||||
<div style="padding: 5px 18px">
|
||||
<FormView
|
||||
:formType="item.formType ? item.formType : 'view'"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="item.defaultData"
|
||||
:showButton="true"
|
||||
:formId="item.formId"
|
||||
></FormView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="item.tableId">
|
||||
<div style="padding: 5px 18px">
|
||||
<LowTable :tableId="item.tableId" :enhanceData="item.defaultData"> </LowTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="!item.formId && !item.tableId">
|
||||
<div style="padding: 30px 48px">
|
||||
<div class="mb-26px text-14px">
|
||||
<span
|
||||
class="font-bold"
|
||||
style="font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif"
|
||||
>数据权限</span
|
||||
>
|
||||
<span>（设置该角色的用户可以操作的数据的范围）</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-radio-group v-model="radio" class="grid-cols-1" style="display: grid">
|
||||
<el-radio :value="Ritem.value" v-for="Ritem in radioList" :key="Ritem.value">
|
||||
<template #default>
|
||||
<span class="inline-block w-170px text-14px">{{ Ritem.title }}</span>
|
||||
<span class="text-13px c-#999999">{{ Ritem.introduce }} </span>
|
||||
</template>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-80px">
|
||||
<el-button type="primary" style="width: 140px; height: 40px" @click="sjxqCick">
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { FormView, LowTable } from '@/components/LowDesign/index'
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
defineOptions({ name: 'UserManagement' })
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
// 自定义的翻译文件
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
controlView: {
|
||||
type: Object
|
||||
}
|
||||
})
|
||||
|
||||
const controlView = ref(props.controlView)
|
||||
|
||||
const staffViewTopDefaultData = ref(props.data)
|
||||
staffViewTopDefaultData.value = {
|
||||
...staffViewTopDefaultData.value,
|
||||
avatar_img:
|
||||
'http://oss.yckxt.com/chatgpt/upload/1/2024-10-14/1/f0ee8a3c7c9638a54940382568c9dpng.png'
|
||||
}
|
||||
|
||||
const staffViewTopData = ref({
|
||||
formId: '1846457022071132161',
|
||||
defaultData: staffViewTopDefaultData.value
|
||||
})
|
||||
|
||||
const radio = ref(1)
|
||||
|
||||
interface TableList {
|
||||
labelKey: string
|
||||
label: string
|
||||
formId?: string
|
||||
tableId?: string
|
||||
defaultData: object
|
||||
formType?: 'add' | 'edit' | 'view'
|
||||
showButton?: string
|
||||
}
|
||||
|
||||
let tabsList = ref<TableList[]>([
|
||||
{
|
||||
labelKey: 'dlrz',
|
||||
label: '登录日志',
|
||||
tableId: '1846734665412726786',
|
||||
defaultData: {
|
||||
type: 'view'
|
||||
}
|
||||
},
|
||||
{
|
||||
labelKey: 'czjl',
|
||||
label: '操作记录',
|
||||
tableId: '1846747363458351106',
|
||||
defaultData: {
|
||||
type: 'view'
|
||||
}
|
||||
},
|
||||
{
|
||||
labelKey: 'czqx',
|
||||
label: '操作权限',
|
||||
formId: '1846489623477571585',
|
||||
defaultData: {
|
||||
ref: controlView.value
|
||||
},
|
||||
formType: 'edit',
|
||||
showButton: 'true'
|
||||
},
|
||||
{
|
||||
labelKey: 'sjqx',
|
||||
label: '数据权限',
|
||||
defaultData: {}
|
||||
},
|
||||
{
|
||||
labelKey: 'zdqx',
|
||||
label: '字段权限',
|
||||
formId: '1846758342212648962',
|
||||
defaultData: {
|
||||
ref: controlView.value
|
||||
},
|
||||
formType: 'edit',
|
||||
showButton: 'true'
|
||||
}
|
||||
])
|
||||
|
||||
const activeName = ref('dlrz')
|
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
const radioList = ref([
|
||||
{ title: '个人', introduce: '只能操作自己和下属的数据', value: 1 },
|
||||
{ title: '所属部门', introduce: '能操作自己、下属、和自己所属部门的数据', value: 2 },
|
||||
{
|
||||
title: '所属部门及下属部门',
|
||||
introduce: '所属部门及下属部门 能操作自己、下属和自己所属部门及其子部门的数据',
|
||||
value: 3
|
||||
},
|
||||
{ title: '全公司', introduce: '能操作全公司的数据', value: 4 }
|
||||
])
|
||||
const sjxqCick = () => {
|
||||
ElMessage({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
})
|
||||
controlView.value!.show = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.el-tabs) {
|
||||
.el-tabs__nav-wrap {
|
||||
height: 53px;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.el-tabs__item {
|
||||
height: 53px;
|
||||
font-weight: bold;
|
||||
line-height: 53px;
|
||||
color: rgb(102 102 102);
|
||||
|
||||
&.is-active {
|
||||
color: rgb(64 158 255);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__content {
|
||||
.el-radio-group {
|
||||
.el-radio {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-bule-text {
|
||||
margin-bottom: 20px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
border-left: 6px solid #409eff;
|
||||
}
|
||||
|
||||
::v-deep(.el-tag) {
|
||||
width: 110px;
|
||||
height: 35px;
|
||||
margin-right: 10px;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
background-color: white;
|
||||
border-color: #ebeef5;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-new-tag {
|
||||
background-color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
::v-deep(.el-overlay) {
|
||||
.el-dialog {
|
||||
border-radius: 5px;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 13px 13px 13px 15px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 5px 5px 0 0;
|
||||
|
||||
.el-dialog__title {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
height: 56.8px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
|
||||
.el-checkbox-group {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
|
||||
.el-checkbox {
|
||||
.el-checkbox__inner {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.el-checkbox__label {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
|
||||
.el-button {
|
||||
width: 70px;
|
||||
height: 28px;
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
color: white;
|
||||
background-color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-tabs .el-tabs__nav-wrap {
|
||||
height: 60px;
|
||||
|
||||
.el-tabs__nav {
|
||||
height: 60px;
|
||||
|
||||
.el-tabs__item {
|
||||
height: 60px;
|
||||
// line-height: 60px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
color: #666;
|
||||
|
||||
&.is-active {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
555
src/views/lowTemplate/generalPage/taskManagement/index.vue
Normal file
555
src/views/lowTemplate/generalPage/taskManagement/index.vue
Normal file
@@ -0,0 +1,555 @@
|
||||
<template>
|
||||
<div class="taskManagement-box flex rounded-xl">
|
||||
<div class="flex-shrink-0 flex-basis-180px bg-#F9F9F9 taskManagement-left">
|
||||
<div class="h-50px flex items-center ml-55px mt-20px text-14px c-#999999">
|
||||
<Icon icon="ion:flag-outline" :size="15" class="mr-1px"></Icon>
|
||||
任务分类
|
||||
</div>
|
||||
<el-menu
|
||||
:default-active="menuDefaultActive"
|
||||
class="el-menu-vertical-demo bg-#F9F9F9"
|
||||
@open="menuHandleOpen"
|
||||
@close="menuHandleClose"
|
||||
>
|
||||
<template v-for="item in meunList" :key="item.value">
|
||||
<el-menu-item :index="item.value">
|
||||
<span>{{ item.title }}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="flex-1 bg-white p-31px taskManagement-right" style="max-width: calc(100% - 180px)">
|
||||
<div class="mt-10px flex items-center util">
|
||||
<el-radio-group v-model="viewOrListRadio">
|
||||
<el-radio-button label="看板视图" value="view" />
|
||||
<el-radio-button label="列表显示" value="list" />
|
||||
</el-radio-group>
|
||||
|
||||
<el-select v-model="selectValue" :fit-input-width="true">
|
||||
<el-option
|
||||
v-for="item in selectOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button class="ml-auto w-100px" type="primary" @click="dialogDisplay = true">
|
||||
<Icon icon="oi:plus" :size="11"></Icon>
|
||||
<span>创建任务</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="viewOrListRadio == 'view'" class="w-100% grid grid-cols-4 gap-x-15px mt-30px">
|
||||
<div v-for="(LItem, LIndex) in viewList" :key="LIndex">
|
||||
<div class="c-#666666 text-14px mb-15px">
|
||||
<span
|
||||
class="font-700"
|
||||
style="font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif"
|
||||
>
|
||||
{{ LItem.title }}
|
||||
</span>
|
||||
<span class="ml-5px" style="font-family: '微软雅黑', sans-serif">
|
||||
<span v-if="LItem.title == '今日任务'">0/</span>{{ LItem.len }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-for="item in LItem.list" :key="item.id" class="flex card-item">
|
||||
<div class="h-29px flex items-center">
|
||||
<div
|
||||
v-if="ViewVhecked.indexOf(LItem.title + item.id) !== -1"
|
||||
class="check flex items-center justify-center"
|
||||
>
|
||||
<Icon
|
||||
icon="fa-solid:check"
|
||||
:size="11"
|
||||
@click="checkedClick(LItem.title + item.id)"
|
||||
></Icon>
|
||||
</div>
|
||||
<div v-else @click="checkedClick(LItem.title + item.id)" class="nocheck"> </div>
|
||||
</div>
|
||||
<div class="grid grid-rows-3 h-100% ml-10px">
|
||||
<div
|
||||
class="text-14px flex items-center c-#666666 cursor-pointer title-hover"
|
||||
:class="ViewVhecked.indexOf(LItem.title + item.id) !== -1 ? 'line-through' : ''"
|
||||
@click="titleClick(item)"
|
||||
>
|
||||
{{ item.title }}，点击查看详情
|
||||
</div>
|
||||
<div class="flex text-12px items-center">
|
||||
<span>
|
||||
{{ item.xmmc }}
|
||||
</span>
|
||||
<div class="c-#CCCCCC flex items-center ml-15px">
|
||||
<Icon icon="mage:message" :size="14"></Icon>
|
||||
<span class="ml-3px">{{ item.lys }}</span>
|
||||
</div>
|
||||
<div class="c-#CCCCCC flex items-center ml-5px">
|
||||
<Icon icon="line-md:link" :size="14"></Icon>
|
||||
<span class="ml-3px">{{ item.ljs }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center" :class="LItem.title == '未完成' ? 'c-#F56C6C' : ''">
|
||||
<Icon icon="icon-park-outline:alarm-clock" :size="14"></Icon>
|
||||
<span class="text-12px ml-3px"> {{ item.jzsjTit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center flex-1">
|
||||
<el-avatar :size="24" :src="item.tx" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="viewOrListRadio == 'list'" class="mt-20px">
|
||||
<LowTable
|
||||
:ref="(el) => (tableListRef = el)"
|
||||
tableId="1847103675560071169"
|
||||
:enhanceData="{ type: 'view' }"
|
||||
>
|
||||
</LowTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="add-dialog">
|
||||
<el-dialog
|
||||
v-model="dialogDisplay"
|
||||
title="新建任务"
|
||||
width="550"
|
||||
:before-close="dialogHandleClose"
|
||||
>
|
||||
<FormView
|
||||
formType="add"
|
||||
:ref="(el) => (dialogRef = el)"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:showButton="false"
|
||||
formId="1846825131881762817"
|
||||
></FormView>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogDisplay = false">取消</el-button>
|
||||
<el-button type="primary" @click="dialogSuccess"> 保存 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<div class="row-dialog">
|
||||
<el-dialog
|
||||
v-model="rowDialog"
|
||||
title="任务详情"
|
||||
width="900px"
|
||||
:before-close="dialogHandleClose"
|
||||
>
|
||||
<FormView
|
||||
formType="edit"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:showButton="false"
|
||||
:defaultData="rowDefaultData"
|
||||
formId="1850013430948507650"
|
||||
></FormView>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { FormView, LowTable } from '@/components/LowDesign/index'
|
||||
import * as TableApi from '@/api/design/table'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
|
||||
defineOptions({ name: 'TaskManagement' })
|
||||
|
||||
const viewOrListRadio = ref('view')
|
||||
const selectValue = ref('default')
|
||||
watch(
|
||||
() => selectValue.value,
|
||||
(val) => {
|
||||
console.log(val, '111')
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => viewOrListRadio.value,
|
||||
(val) => {
|
||||
console.log(val, '111')
|
||||
}
|
||||
)
|
||||
interface Record {
|
||||
fj?: string
|
||||
jzsj?: Date
|
||||
kssj?: Date
|
||||
status?: string
|
||||
xmmc?: string
|
||||
tx?: string
|
||||
title?: string
|
||||
id?: string
|
||||
lys?: string
|
||||
ljs?: string
|
||||
jzsjTit?: string
|
||||
}
|
||||
interface ViewList {
|
||||
title: string
|
||||
list?: Record[]
|
||||
len?: number
|
||||
}
|
||||
|
||||
const viewList = ref<ViewList[]>([])
|
||||
let ViewVhecked = ref<any>([])
|
||||
const checkedClick = (id) => {
|
||||
let index = ViewVhecked.value.indexOf(id)
|
||||
if (index === -1) {
|
||||
ViewVhecked.value.push(id)
|
||||
} else {
|
||||
ViewVhecked.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
const meunList = ref([
|
||||
{ value: '1', title: '全部任务' },
|
||||
{ value: '2', title: '我创建的任务' },
|
||||
{ value: '3', title: '我参与的任务' },
|
||||
{ value: '4', title: '下属的任务' },
|
||||
{ value: '5', title: '关注的任务' }
|
||||
])
|
||||
const menuDefaultActive = ref('1')
|
||||
|
||||
const menuHandleOpen = (key: string, keyPath: string[]) => {
|
||||
console.log(key, keyPath)
|
||||
}
|
||||
const menuHandleClose = (key: string, keyPath: string[]) => {
|
||||
console.log(key, keyPath)
|
||||
}
|
||||
|
||||
const selectOptions = [
|
||||
{
|
||||
value: 'default',
|
||||
label: '按默认视图',
|
||||
subItem: [
|
||||
{ title: '今日任务', total: 0, completed: 0 },
|
||||
{ title: '进行中', total: 0, completed: 0 },
|
||||
{ title: '未完成', total: 0, completed: 0 },
|
||||
{ title: '已完成', total: 0, completed: 0 }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'degree',
|
||||
label: '按紧要程度',
|
||||
subItem: [
|
||||
{ title: '重要', total: 0, completed: 0 },
|
||||
{ title: '紧急', total: 0, completed: 0 },
|
||||
{ title: '普通', total: 0, completed: 0 },
|
||||
{ title: '较低', total: 0, completed: 0 }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'endTime',
|
||||
label: '按截止时间',
|
||||
subItem: [
|
||||
{ title: '已逾期', total: 0, completed: 0 },
|
||||
{ title: '今天', total: 0, completed: 0 },
|
||||
{ title: '三天内', total: 0, completed: 0 },
|
||||
{ title: '七天内', total: 0, completed: 0 }
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'updateTime',
|
||||
label: '按更新时间',
|
||||
subItem: [
|
||||
{ title: '今天', total: 0, completed: 0 },
|
||||
{ title: '七天内', total: 0, completed: 0 },
|
||||
{ title: '十五天', total: 0, completed: 0 },
|
||||
{ title: '更远', total: 0, completed: 0 }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const dialogHandleClose = (done: () => void) => {
|
||||
done()
|
||||
}
|
||||
|
||||
const dialogDisplay = ref(false)
|
||||
const rowDialog = ref(false)
|
||||
const dialogRef = ref()
|
||||
|
||||
const tableListRef = ref()
|
||||
|
||||
const dialogSuccess = async () => {
|
||||
const formRef = dialogRef.value.controlRef
|
||||
const listRef = tableListRef.value.crudRef
|
||||
const data = await formRef.handleSubmit(true)
|
||||
if (data) {
|
||||
listRef.refreshChange()
|
||||
dialogDisplay.value = false
|
||||
}
|
||||
}
|
||||
const rowDefaultData = ref({})
|
||||
const titleClick = (row) => {
|
||||
row.jzsj ? (row.jzsj = formatDate(row.jzsj)) : (row.jzsj = '')
|
||||
row.kssj ? (row.kssj = formatDate(row.kssj)) : (row.kssj = '')
|
||||
rowDefaultData.value = row
|
||||
rowDialog.value = true
|
||||
}
|
||||
onMounted(async () => {
|
||||
let { records } = await TableApi.getTableList(
|
||||
'1847103675560071169',
|
||||
{ pageNo: 1, pageSize: 40 },
|
||||
false
|
||||
)
|
||||
|
||||
const categorizedRecords: { [key: string]: Record[] } = {
|
||||
今日任务: [],
|
||||
进行中: [],
|
||||
未完成: [],
|
||||
已完成: []
|
||||
}
|
||||
records.forEach((ele) => {
|
||||
const ljs = ele.fj ? (ele.fj.includes(',') ? ele.fj.split(',').length : 1) : 0
|
||||
ele.ljs = ljs
|
||||
ele.jzsjTit = ele.jzsj ? `${formatDate(ele.jzsj)} 截止` : ''
|
||||
|
||||
let keys: string[] = []
|
||||
if (ele.kssj && formatDate(ele.kssj).startsWith('2024-10-03')) {
|
||||
keys.push('今日任务')
|
||||
}
|
||||
|
||||
let statusDictionary = [
|
||||
{ id: 1, label: '进行中' },
|
||||
{ id: 2, label: '已完成' },
|
||||
{ id: 3, label: '未完成' }
|
||||
]
|
||||
statusDictionary.forEach((item) => {
|
||||
if (ele.status == item.id) {
|
||||
keys.push(item.label)
|
||||
}
|
||||
})
|
||||
|
||||
keys.forEach((item) => {
|
||||
if (categorizedRecords[item]) {
|
||||
categorizedRecords[item].push(ele)
|
||||
if (item == '已完成') {
|
||||
ViewVhecked.value.push('已完成' + ele.id)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
for (const [title, list] of Object.entries(categorizedRecords)) {
|
||||
viewList.value.push({
|
||||
title,
|
||||
list,
|
||||
len: list.length
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.taskManagement-box {
|
||||
min-height: 500px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 5px rgb(0 0 0 / 4.71%);
|
||||
|
||||
.taskManagement-left {
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
border-right: none;
|
||||
border-radius: 10px 0 0 10px;
|
||||
|
||||
.el-menu {
|
||||
background-color: rgb(255 255 255 / 0%);
|
||||
border-right: none;
|
||||
|
||||
.is-active {
|
||||
font-weight: bold;
|
||||
background-color: #e7f0fa;
|
||||
border-right: 3px solid #409eff;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
height: 50px;
|
||||
padding-left: 55px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.taskManagement-right {
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
border-radius: 0 10px 10px 0;
|
||||
|
||||
.util {
|
||||
::v-deep(.el-radio-group) {
|
||||
.el-radio-button {
|
||||
.el-radio-button__inner {
|
||||
display: flex;
|
||||
width: 101px;
|
||||
height: 35px;
|
||||
font-family: MicrosoftYaHei, '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.el-radio-button__inner {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.el-select) {
|
||||
width: 239px;
|
||||
margin-left: 20px;
|
||||
|
||||
.el-select__wrapper {
|
||||
min-height: 35px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
height: 35px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-item {
|
||||
height: 87px;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
color: #999;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px rgb(153 153 153 / 34.9%);
|
||||
|
||||
.title-hover:hover {
|
||||
color: rgb(51 51 51);
|
||||
}
|
||||
|
||||
.check,
|
||||
.nocheck {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.check {
|
||||
color: white;
|
||||
background-color: #409eff;
|
||||
border: 1px solid #409eff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.nocheck {
|
||||
border: 1px solid #ccc;
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-dialog {
|
||||
::v-deep(.el-overlay) {
|
||||
.el-dialog {
|
||||
border-radius: 5px;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 13px 13px 13px 15px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 5px 5px 0 0;
|
||||
|
||||
.el-dialog__title {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
height: 56.8px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
|
||||
.el-checkbox-group {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
|
||||
.el-checkbox {
|
||||
.el-checkbox__inner {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.el-checkbox__label {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
|
||||
.el-button {
|
||||
width: 70px;
|
||||
height: 28px;
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
color: white;
|
||||
background-color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row-dialog {
|
||||
::v-deep(.el-overlay) {
|
||||
.el-dialog__header {
|
||||
height: 24.8px;
|
||||
padding: 16px 10px 16px 16px;
|
||||
font-size: 18px;
|
||||
border-bottom: 1px solid rgb(240 240 240);
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
height: 58.6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-select__placeholder {
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.el-select__popper {
|
||||
.el-select-dropdown__item {
|
||||
font-family: MicrosoftYaHei, '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
|
||||
&.is-selected {
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
686
src/views/lowTemplate/generalPage/team/team.vue
Normal file
686
src/views/lowTemplate/generalPage/team/team.vue
Normal file
@@ -0,0 +1,686 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="w-100%" v-if="isShow">
|
||||
<div class="search-box" :class="{'bj':!isTable}">
|
||||
<div class="mt-4 ">
|
||||
<el-input
|
||||
v-model="input"
|
||||
style="width: 900px"
|
||||
clearable
|
||||
placeholder="输入搜索关键字"
|
||||
>
|
||||
<template #append>
|
||||
<div class="search-btn" @click="searchFun(true)">
|
||||
<el-icon><Search /></el-icon>
|
||||
<span style="margin-left: 3px;">搜索</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="fhsyy" v-if="!isTable" @click="isTable=true,is_px=false,input=''">
|
||||
<el-icon><Back /></el-icon>
|
||||
<span style="margin-left: 5px">返回</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table" v-if="isTable">
|
||||
<div class="table-header">
|
||||
<span></span>
|
||||
<span class="c-#666666">知识分类</span>
|
||||
</div>
|
||||
<LowTable :ref="(el)=>(customRef = el)" :tableId="tabbleDate.tableId" :enhanceData="tabbleDate.enhanceData" > </LowTable>
|
||||
</div>
|
||||
<div class="ssjg" v-else>
|
||||
<template v-if="listData.length">
|
||||
<div class="ssjg-top" >
|
||||
<div class="ssjg-top-left">
|
||||
<p>为您找到相关结果约{{total}}个， 搜索用时 (0.23秒)</p>
|
||||
</div>
|
||||
<div class="ssjg-top-right">
|
||||
<span :class="{'color':is_px}" @click="searchFun(true)">默认排序</span>
|
||||
<span :class="{'color':!is_px}" @click="searchFun(false)">按时间排序</span>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="is_show">
|
||||
<div v-loading="loading">
|
||||
<div class="box" v-for="item in listData" :key="item.id">
|
||||
<p class="box-title acitive" @click="viewFun(item)">{{item.title}}</p>
|
||||
<p class="box-text">{{item.text}}</p>
|
||||
<div class="box-lls">
|
||||
<el-icon size="18"><View /></el-icon>
|
||||
<span style="margin: 0 8px;">浏览</span>
|
||||
<span>{{item.llcs}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10,20,30,40,50,100]"
|
||||
:size="size"
|
||||
:disabled="disabled"
|
||||
background
|
||||
layout="prev, pager, next,sizes "
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="null" v-loading="loading">
|
||||
<div>
|
||||
<img src="/img/null.svg" alt=""/>
|
||||
<p class="ts">未查询到相关知识内容</p>
|
||||
<p>建议您修改搜索关键词重新再试</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list" v-else>
|
||||
<div class="list-left">
|
||||
<div class="title">
|
||||
<span></span>
|
||||
<span @click="isShow=true,isTable=true,is_show=true" class="tabs">知识分类</span>
|
||||
<span @click="is_show=true" class="tabs"> > 产品知识</span>
|
||||
<span @click="is_show=false" v-if="!is_show" class="tabs"> > 内容详情 </span>
|
||||
</div>
|
||||
<template v-if="is_show">
|
||||
<div v-loading="loading">
|
||||
<div class="box" v-for="item in listData" :key="item.id">
|
||||
<p class="box-title acitive" @click="viewFun(item)">{{item.title}}</p>
|
||||
<p class="box-text">{{item.text}}</p>
|
||||
<div class="box-lls">
|
||||
<el-icon size="18"><View /></el-icon>
|
||||
<span style="margin: 0 8px;">浏览</span>
|
||||
<span>{{item.llcs}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10,50, 100, 200, 400]"
|
||||
:size="size"
|
||||
:disabled="disabled"
|
||||
background
|
||||
layout="prev, pager, next,sizes "
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="view" v-loading="loading">
|
||||
<div class="top-box">
|
||||
<p>{{objData.title}}</p>
|
||||
<div class="top-box-text">
|
||||
<el-icon size="16"><Clock /></el-icon>
|
||||
<span style="margin: 0 12px 0 5px;">{{objData.time}}</span>
|
||||
<el-icon size="16"><View /></el-icon>
|
||||
<span style="margin: 0 5px;">浏览</span>
|
||||
<span> {{objData.llcs}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="html-text" v-html="objData.content"></div>
|
||||
<div class="tips" v-if="is_fk">
|
||||
<p>以上信息是否对您有帮助？</p>
|
||||
<div>
|
||||
<el-button type="primary" style="padding: 19px 28px;" @click="is_fk=false">有帮助</el-button>
|
||||
<el-button type="primary" style="padding: 19px 28px;" @click="is_fk=false" plain>没帮助</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tips" v-else>
|
||||
<div class="fk">
|
||||
<el-icon size="28px" color="#7ed96d" style="margin-right:10px"><CircleCheck /></el-icon>
|
||||
<span>感谢您的反馈</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="list-right">
|
||||
<header class="header">
|
||||
<p class="header-title">热门知识</p>
|
||||
</header>
|
||||
<template v-for="(item,index) in listData" :key="item.id">
|
||||
<div class="rm" v-if="index < 6">
|
||||
<p class="rm-title acitive" @click="viewFun(item)">{{item.title}}</p>
|
||||
<p class="rm-text">{{item.text}}</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Search,View,Clock,CircleCheck,Back } from '@element-plus/icons-vue'
|
||||
import {getTableList,updateTableData} from '@/api/design/table/index'
|
||||
import type { ComponentSize } from 'element-plus'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
|
||||
const isShow = ref<any>(true)
|
||||
const input = ref('')
|
||||
const customRef = ref()
|
||||
const size = ref<ComponentSize>('default')
|
||||
const loading = ref(false)
|
||||
const is_show = ref(true)
|
||||
const is_fk = ref(true)
|
||||
const isTable = ref(true)
|
||||
const is_px = ref(true)
|
||||
//知识分类点击
|
||||
const clickFun = () =>{
|
||||
isShow.value = false
|
||||
initDate({ pageNo: 1 , pageSize: 10 })
|
||||
|
||||
}
|
||||
|
||||
const tabbleDate = ref({
|
||||
label:'知识分类',
|
||||
type:'table',
|
||||
defaultData:{},
|
||||
tableId:'1854438272522235905',
|
||||
enhanceData: { hideHeader: 'disabled',clickFun}
|
||||
})
|
||||
|
||||
//搜索
|
||||
const searchFun = (type) =>{
|
||||
isTable.value = false
|
||||
is_px.value = type
|
||||
initDate(type ? { pageNo: 1 , pageSize: 10,title:input.value } : { pageNo: 1 , pageSize: 10,column: "create_time",order: "asc"})
|
||||
}
|
||||
const listData = ref<any>([])
|
||||
const pageSize = ref(10)
|
||||
const total = ref()
|
||||
//初始化数据
|
||||
const initDate = (data) =>{
|
||||
new Promise(async (resolve) => {
|
||||
loading.value = true
|
||||
await getTableList('1854438272522235905',data,false).then((res)=>{
|
||||
listData.value = res.records || []
|
||||
total.value = res.total
|
||||
loading.value = false
|
||||
resolve(res.records)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
//分页
|
||||
const currentPage = ref(1)
|
||||
const disabled = ref(false)
|
||||
const handleSizeChange = (val: number) => {
|
||||
pageSize.value = val
|
||||
initDate({ pageNo: 1 , pageSize: val })
|
||||
|
||||
}
|
||||
const handleCurrentChange = (val: number) => {
|
||||
initDate({ pageNo: val , pageSize: 10 })
|
||||
}
|
||||
|
||||
//详情
|
||||
const objData = ref()
|
||||
const viewFun = (data) =>{
|
||||
loading.value = true
|
||||
isShow.value = false
|
||||
is_show.value = false
|
||||
data.time = formatDate(data.create_time,'YYYY-MM-DD HH:mm:ss')
|
||||
data.llcs = ++data.llcs
|
||||
objData.value = data
|
||||
updateTableData('1854438272522235905',data)
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-box{
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 180px;
|
||||
background: #FFF;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
::v-deep .el-input-group__append {
|
||||
padding: 0;
|
||||
|
||||
.search-btn{
|
||||
display: flex;
|
||||
padding: 4px 19px;
|
||||
font-family: "微软雅黑", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
background: #409eff;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.fhsyy{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fhsyy:hover{
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.table{
|
||||
width:100%;
|
||||
margin-top: 20px;
|
||||
|
||||
.table-header span:nth-child(1){
|
||||
display: inline-block;
|
||||
width: 5.5px;
|
||||
height: 17px;
|
||||
margin-right: 7px;
|
||||
background: #409eff;
|
||||
}
|
||||
|
||||
.table-header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20px 0;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.ssjg{
|
||||
padding: 32px;
|
||||
background: #fff;
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
border-top: 0;
|
||||
|
||||
.ssjg-top{
|
||||
display: flex;
|
||||
padding: 6px 0;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 33px;
|
||||
|
||||
.ssjg-top-left{
|
||||
|
||||
p{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
color: #999;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.ssjg-top-right{
|
||||
|
||||
span{
|
||||
display: inline-block;
|
||||
padding: 5.5px 22px;
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: normal;
|
||||
color: #666;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.null{
|
||||
display: flex;
|
||||
min-height: 410px;
|
||||
background: #fff;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
p{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ts{
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #666 !important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.list{
|
||||
display: flex;
|
||||
gap: 25px;
|
||||
|
||||
.list-left{
|
||||
padding: 40px;
|
||||
flex: 8;
|
||||
background: #fff;
|
||||
|
||||
.title span:nth-child(1){
|
||||
display: inline-block;
|
||||
width: 5.2px;
|
||||
height: 16px;
|
||||
margin-right: 5px;
|
||||
background: #409eff;
|
||||
}
|
||||
|
||||
.title{
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// .box{
|
||||
// position: relative;
|
||||
// width: 100%;
|
||||
// padding-bottom: 20px ;
|
||||
// border-bottom: 1px solid rgb(242 242 242 / 100%);
|
||||
|
||||
// p{
|
||||
// padding: 0;
|
||||
// margin: 0;
|
||||
// }
|
||||
|
||||
// .box-title{
|
||||
// font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
|
||||
// font-size: 18px;
|
||||
// font-style: normal;
|
||||
// font-weight: 700;
|
||||
// line-height: 30px;
|
||||
// color:#666;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
|
||||
// .box-text{
|
||||
// font-family: MicrosoftYaHei, '微软雅黑', sans-serif;
|
||||
// font-size: 14px;
|
||||
// font-style: normal;
|
||||
// font-weight: 400;
|
||||
// line-height: 30px;
|
||||
// color: #999;
|
||||
// text-align: left;
|
||||
// }
|
||||
|
||||
// .box-lls{
|
||||
// position: absolute;
|
||||
// right: 50px;
|
||||
// bottom: 50px;
|
||||
// display: flex;
|
||||
// font-family: '微软雅黑', sans-serif;
|
||||
// font-size: 12px;
|
||||
// font-weight: 400;
|
||||
// color: #999;
|
||||
// align-items: center;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .page{
|
||||
// display: flex;
|
||||
// padding: 20px;
|
||||
// justify-content: center;
|
||||
// }
|
||||
|
||||
.view{
|
||||
.top-box{
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid rgb(242 242 242 / 100%);
|
||||
|
||||
p{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 36px;
|
||||
color: #666;
|
||||
text-transform: none;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.top-box-text{
|
||||
display: flex;
|
||||
font-family: MicrosoftYaHei, '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 36px;
|
||||
color: #999;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.html-text{
|
||||
font-family: MicrosoftYaHei, '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
color: #666;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tips{
|
||||
display: flex;
|
||||
padding: 19px;
|
||||
background:#f9f9f9;
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
p{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 36px;
|
||||
color: #666;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.fk{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span{
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 36px;
|
||||
color: #666;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-right{
|
||||
flex: 2;
|
||||
background: #fff;
|
||||
|
||||
.header{
|
||||
display: flex;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid rgb(233 233 233 / 100%);
|
||||
|
||||
.header-title{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
color: #666;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.rm{
|
||||
padding: 15px 0;
|
||||
margin: 0 20px;
|
||||
border-bottom: 1px solid rgb(233 233 233 / 100%);
|
||||
|
||||
p{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rm-title{
|
||||
font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
color: #666;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
word-wrap: break-word;
|
||||
cursor: pointer;
|
||||
visibility: inherit;
|
||||
|
||||
}
|
||||
|
||||
.rm-text{
|
||||
font-family: MicrosoftYaHei, '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
color: #999;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
word-wrap: break-word;
|
||||
visibility: inherit;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.box{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 10px ;
|
||||
border-bottom: 1px solid rgb(242 242 242 / 100%);
|
||||
|
||||
p{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
display: inline-block;
|
||||
font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 30px;
|
||||
color:#666;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.box-text{
|
||||
font-family: MicrosoftYaHei, '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
color: #999;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.box-lls{
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
bottom: 50px;
|
||||
display: flex;
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.page{
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.acitive:hover{
|
||||
color: #409eff !important;
|
||||
}
|
||||
|
||||
.tabs:hover{
|
||||
color: #409eff !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bj{
|
||||
background: #f9f9f9 !important;
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
}
|
||||
|
||||
.color{
|
||||
color: #fff !important;
|
||||
background: #409eff;
|
||||
}
|
||||
|
||||
::v-deep .el-card {
|
||||
background-color: rgba($color: #000, $alpha: 0%) !important;
|
||||
}
|
||||
|
||||
::v-deep .el-input__wrapper{
|
||||
border-right:0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
</style>
|
||||
343
src/views/lowTemplate/generalPage/teamDetails/index.vue
Normal file
343
src/views/lowTemplate/generalPage/teamDetails/index.vue
Normal file
@@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<div class="TeamDetails-box rounded-xl">
|
||||
<div class="flex border-box p-20px h-110px items-center">
|
||||
<div class="mr-15px">
|
||||
<el-avatar class="avatar" :size="60" :src="PropsData.tx" />
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div>
|
||||
<div class="text-18px font-700 c-#666666 font-wryh h-28px flex items-center">
|
||||
{{ PropsData.name }}
|
||||
</div>
|
||||
<div class="text-14px c-#999999 flex items-center w-90%" style="line-height: 28px">
|
||||
{{ PropsData.tdjs }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<el-button type="primary" @click="dialogBjtd = true">
|
||||
<Icon icon="fa-solid:pen" class="mr-3px"></Icon>
|
||||
编辑团队
|
||||
</el-button>
|
||||
<el-button @click="dialogDel = true">
|
||||
<Icon icon="ic:sharp-delete" class="mr-3px"></Icon>
|
||||
删除团队
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-100% mt-20px items-start">
|
||||
<!-- -->
|
||||
<div class="flex-shrink-0 w-70% mr-10px border-box p-20px">
|
||||
<div class="h-60px flex items-center">
|
||||
<div
|
||||
class="font-wryh font-700 c-#666666 text-14px pl-10px"
|
||||
style="border-left: 6px solid #409eff"
|
||||
>
|
||||
数据统计
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LowTable tableId="1852234473116233730" :enhanceData="{ type: 'view' }"> </LowTable>
|
||||
<div class="h-60px flex items-center">
|
||||
<div
|
||||
class="font-wryh font-700 c-#666666 text-14px pl-10px"
|
||||
style="border-left: 6px solid #409eff"
|
||||
>
|
||||
团队动态
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in tddtList"
|
||||
:key="index"
|
||||
class="flex pl-20px h-70px items-center"
|
||||
style="border-bottom: 1px solid rgb(233 233 233 / 100%)"
|
||||
>
|
||||
<div class="mr-20px">
|
||||
<el-avatar v-if="item.avatar" class="avatar" :size="35" :src="item.avatar" />
|
||||
<el-avatar
|
||||
v-else
|
||||
class="avatar"
|
||||
:size="35"
|
||||
src="https://oss.yckxt.com/chatgpt/upload/1/2024-10-30/1/f0ee8a3c7c9638a54940382568c9dpng_3.png"
|
||||
/>
|
||||
</div>
|
||||
<div style="font-family: MicrosoftYaHei, '微软雅黑 Regular', '微软雅黑', sans-serif">
|
||||
<div claas="h-24px flex items-center">
|
||||
<span class="mr-5px"> {{ item.xm }} </span>
|
||||
<template v-if="item.sjType == 0">
|
||||
<span class="mr-5px c-#409EFF"> {{ item.blueText }} </span>
|
||||
<span class="c-#666666"> {{ item.text }} </span>
|
||||
</template>
|
||||
<template v-else-if="item.sjType == 1">
|
||||
<span class="mr-5px c-#666666"> {{ item.text }}</span>
|
||||
<span class="c-#409EFF"> {{ item.blueText }} </span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="text-12px h-24px flex items-center c-#999999">几秒前</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-100px pb-10px flex items-center justify-center ">
|
||||
<el-button round class="w-120px" style="height: 35px;">查看更多</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-25% ml-10px cylb border-box">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="flex h-60px items-center justify-between pl-20px pr-20px bg-#F9F9F9">
|
||||
<div class="text-16px c-#666666 font-wryh font-700"> 成员列表 </div>
|
||||
<div>
|
||||
<el-button-group @click="dialogDel = true">
|
||||
<el-button style="width: 50px; height: 35px">
|
||||
<Icon icon="formkit:left" class="c-#999999"></Icon>
|
||||
</el-button>
|
||||
<el-button style="width: 50px; height: 35px">
|
||||
<Icon icon="formkit:right" class="c-#999999"></Icon>
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
v-for="(item, index) in cylbList"
|
||||
:key="index"
|
||||
class="h-70px flex items-center pl-20px pr-20px"
|
||||
style="border-bottom: 1px solid rgb(242 242 242 / 100%)"
|
||||
>
|
||||
<el-avatar class="avatar" :size="35" :src="item" />
|
||||
|
||||
<span class="ml-10px c-#666666 font-700 font-wryh">小明</span>
|
||||
<span class="ml-10px c-#999999 font-wryh">销售总监</span>
|
||||
<Icon
|
||||
class="ml-auto c-#999999 cursor-pointer"
|
||||
icon="mingcute:delete-line"
|
||||
@click="iconClick"
|
||||
></Icon>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dialog-bjtd">
|
||||
<el-dialog v-model="dialogBjtd" title="创建团队" width="720px" :before-close="handleClose">
|
||||
<FormView
|
||||
formType="add"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:showButton="false"
|
||||
:defaultData="PropsData"
|
||||
formId="1852168337334951938"
|
||||
></FormView>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogBjtd = false">取消</el-button>
|
||||
<el-button type="primary" @click="dialogBjtdClick"> 保存 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<div class="dialog-czqr">
|
||||
<el-dialog v-model="dialogDel" title="操作确认" width="450" :before-close="handleClose">
|
||||
<div class="flex p-20px h-100px">
|
||||
<div class="w-50px h-50px flex justify-center items-center">
|
||||
<el-avatar
|
||||
class="bg-white"
|
||||
:size="27"
|
||||
src="http://oss.yckxt.com/chatgpt/upload/1/2024-10-14/1/mdi--question-mark-circle-outline (1).png"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-15px">
|
||||
<div class="text-16px c-#666666 font-700 h-28px">是否确定删除数据？</div>
|
||||
<div class="c-#999999 h-28px">是否确定删除数据？</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogDel = false">取消</el-button>
|
||||
<el-button type="primary" @click="dialogDelClick"> 确定 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { FormView, LowTable } from '@/components/LowDesign/index'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
defineOptions({ name: 'TeamDetails' })
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
// 自定义的翻译文件
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
})
|
||||
const PropsData = props.data
|
||||
const cylbList = ref([])
|
||||
cylbList.value = PropsData.cytx.split(',')
|
||||
|
||||
const dialogBjtd = ref(false)
|
||||
const dialogBjtdClick = () => {
|
||||
dialogBjtd.value = false
|
||||
ElMessage({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
const handleClose = (done: () => void) => {
|
||||
done()
|
||||
}
|
||||
|
||||
const dialogDel = ref(false)
|
||||
|
||||
const iconClick = () => {
|
||||
dialogDel.value = true
|
||||
}
|
||||
|
||||
const dialogDelClick = () => {
|
||||
dialogDel.value = false
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
|
||||
const tddtList = ref([
|
||||
{
|
||||
avatar:
|
||||
'https://oss.yckxt.com/chatgpt/upload/1/2024-10-30/1/f0ee8a3c7c9638a54940382568c9dpng_3.png',
|
||||
xm: '赵小刚',
|
||||
blueText: '将 5 月日常迭代',
|
||||
text: '更新至已发布状态',
|
||||
fbTime: '几秒前',
|
||||
sjType: 0
|
||||
},
|
||||
{
|
||||
avatar:
|
||||
'https://oss.yckxt.com/chatgpt/upload/1/2024-10-30/1/f0ee8a3c7c9638a54940382568c9dpng_3.png',
|
||||
xm: '赵小刚',
|
||||
blueText: '将 5 月日常迭代',
|
||||
text: '更新至已发布状态',
|
||||
fbTime: '几秒前',
|
||||
sjType: 1
|
||||
},
|
||||
{
|
||||
avatar: 'http://oss.yckxt.com/chatgpt/upload/1/2024-10-30/1/formkit--people.png',
|
||||
xm: '赵小刚',
|
||||
blueText: '将 5 月日常迭代',
|
||||
text: '更新至已发布状态',
|
||||
fbTime: '几秒前',
|
||||
sjType: 0
|
||||
},
|
||||
{
|
||||
avatar: '',
|
||||
xm: '赵小刚',
|
||||
blueText: '将 5 月日常迭代',
|
||||
text: '更新至已发布状态',
|
||||
fbTime: '几秒前',
|
||||
sjType: 1
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.TeamDetails-box {
|
||||
min-height: 500px;
|
||||
|
||||
.font-wryh {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
}
|
||||
|
||||
.border-box {
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 5px rgb(0 0 0 / 4.71%);
|
||||
|
||||
.avatar {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.cylb {
|
||||
::v-deep(.el-card) {
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
box-shadow: none;
|
||||
|
||||
.el-card__header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-bjtd,
|
||||
.dialog-czqr {
|
||||
::v-deep(.el-overlay) {
|
||||
.el-dialog {
|
||||
border-radius: 5px;
|
||||
|
||||
.el-dialog__header {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
background-color: rgb(245 245 245 / 100%);
|
||||
border-radius: 5px 5px 0 0;
|
||||
box-shadow: 0 1px 1px rgb(233 233 233 / 100%);
|
||||
align-items: center;
|
||||
|
||||
.el-dialog__title {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.el-icon {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
height: 60px;
|
||||
padding: 15px 20px;
|
||||
box-shadow: 0 1px 1px 0 rgb(233 233 233 / 100%) inset;
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
padding: 5px 15px;
|
||||
font-family: MicrosoftYaHei, '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-czqr {
|
||||
::v-deep(.el-overlay) {
|
||||
.el-dialog__body {
|
||||
.el-avatar {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
394
src/views/lowTemplate/generalPage/userManagement/index.vue
Normal file
394
src/views/lowTemplate/generalPage/userManagement/index.vue
Normal file
@@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<div class="userManagement-box">
|
||||
<div class="b-#F0F2F5 b-2px b-solid rounded-xl">
|
||||
<FormView
|
||||
formType="view"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="userViewTopData.defaultData"
|
||||
:showButton="false"
|
||||
:formId="userViewTopData.formId"
|
||||
></FormView>
|
||||
</div>
|
||||
<div class="mt-20px pb-20px b-#F0F2F5 b-2px b-solid" style="border-radius: 5px">
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<template v-for="item in tabsList" :key="item.labelKey">
|
||||
<el-tab-pane :label="item.label" :name="item.labelKey">
|
||||
<template v-if="item.lowDesign.type == 'design' && item.lowDesign.formId">
|
||||
<FormView
|
||||
formType="view"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="item.lowDesign?.defaultData"
|
||||
:showButton="false"
|
||||
:formId="item.lowDesign.formId"
|
||||
></FormView>
|
||||
</template>
|
||||
|
||||
<template v-if="item.lowDesign.type == 'exploit' && item.lowDesign.tableId">
|
||||
<div style="padding: 5px 18px">
|
||||
<LowTable
|
||||
:tableId="item.lowDesign.tableId"
|
||||
:enhanceData="item.lowDesign?.defaultData"
|
||||
>
|
||||
</LowTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="item.lowDesign.type == 'designAndExploit' && item.lowDesign.formId">
|
||||
<FormView
|
||||
formType="view"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="item.lowDesign?.defaultData"
|
||||
:showButton="false"
|
||||
:formId="item.lowDesign.formId"
|
||||
></FormView>
|
||||
<div class="ml-28px mr-28px">
|
||||
<div class="mt-22px font-700 text-14px c-#666666 left-bule-text">
|
||||
<span class="pl-8px">用户标签</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<el-tag
|
||||
v-for="tag in dynamicTags"
|
||||
:key="tag"
|
||||
closable
|
||||
:disable-transitions="false"
|
||||
@close="tagHandleClose(tag)"
|
||||
>
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
<el-button
|
||||
v-if="!inputVisible"
|
||||
class="button-new-tag"
|
||||
@click="inputVisible = true"
|
||||
>
|
||||
<Icon icon="ic:twotone-plus" class="text-#409EFF"></Icon>
|
||||
<span class="text-#409EFF text-14px">添加标签</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="mt-38px font-700 text-14px c-#666666 left-bule-text">
|
||||
<span class="pl-8px">收货地址</span>
|
||||
</div>
|
||||
<div>
|
||||
<LowTable tableId="1846073998846337026" :enhanceData="{ type: 'view' }">
|
||||
</LowTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-model="inputVisible"
|
||||
title="标签设置"
|
||||
width="600"
|
||||
:before-close="dialogHandleClose"
|
||||
destroy-on-close
|
||||
>
|
||||
<FormView
|
||||
formType="add"
|
||||
:ref="(el) => (yhxqRef = el)"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:showButton="false"
|
||||
formId="1845041920745218050"
|
||||
></FormView>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="inputVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="dialogSuccess"> 确认 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { FormView, LowTable } from '@/components/LowDesign/index'
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
|
||||
defineOptions({ name: 'UserManagement' })
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
// 自定义的翻译文件
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
})
|
||||
|
||||
const userViewTopDefaultData = ref(props.data)
|
||||
userViewTopDefaultData.value = {
|
||||
...userViewTopDefaultData.value,
|
||||
avatar_img:
|
||||
'http://oss.yckxt.com/chatgpt/upload/1/2024-10-14/1/f0ee8a3c7c9638a54940382568c9dpng.png'
|
||||
}
|
||||
|
||||
const userViewTopData = ref({
|
||||
formId: '1845673651634458625',
|
||||
defaultData: userViewTopDefaultData.value
|
||||
})
|
||||
|
||||
let tabsList = ref([
|
||||
{
|
||||
labelKey: 'yhxq',
|
||||
label: '用户详情',
|
||||
lowDesign: {
|
||||
formId: '1845757477997731842',
|
||||
type: 'designAndExploit',
|
||||
defaultData: {
|
||||
...props.data,
|
||||
cs: '220000,220100,220102',
|
||||
czz: '100',
|
||||
dlcs: '100',
|
||||
fields_8038839: '统计信息',
|
||||
fields_9105030: '用户资料',
|
||||
fs: '100',
|
||||
gxqm: '一个有个性的男子',
|
||||
gz: '100',
|
||||
id: 'id',
|
||||
scht: '100',
|
||||
scpj: '100',
|
||||
scsp: '100',
|
||||
sczt: '100',
|
||||
sjhm: '18088889999',
|
||||
sppj: '100',
|
||||
sr: '2016-10-18',
|
||||
sycjcs: '100',
|
||||
thjl: '100',
|
||||
xb: '1',
|
||||
xhdfl: '服装、餐厨',
|
||||
yhj: '100',
|
||||
yqhy: '100',
|
||||
zhdl: '2024-08-22 22:10:00',
|
||||
zy: '学生'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
labelKey: 'ddjl',
|
||||
label: '订单记录',
|
||||
lowDesign: {
|
||||
tableId: '1844275960258019330',
|
||||
type: 'exploit',
|
||||
defaultData: {
|
||||
type: 'view'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
labelKey: 'jfjl',
|
||||
label: '积分记录',
|
||||
lowDesign: {
|
||||
tableId: '1846095079682482177',
|
||||
type: 'exploit',
|
||||
defaultData: {}
|
||||
}
|
||||
},
|
||||
{
|
||||
labelKey: 'dlrz',
|
||||
label: '登录日志',
|
||||
lowDesign: {
|
||||
tableId: '1846100518918823938',
|
||||
type: 'exploit',
|
||||
defaultData: {}
|
||||
}
|
||||
},
|
||||
{
|
||||
labelKey: 'czjl',
|
||||
label: '操作记录',
|
||||
lowDesign: {
|
||||
tableId: '1846103236139950082',
|
||||
type: 'exploit',
|
||||
defaultData: {}
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
const activeName = ref('yhxq')
|
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
|
||||
const dynamicTags = ref(['标签名称一', '标签名称二', '标签名称三', '标签名称四'])
|
||||
const inputVisible = ref(false)
|
||||
const yhxqRef = ref()
|
||||
|
||||
const tagHandleClose = (tag: string) => {
|
||||
dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
|
||||
}
|
||||
|
||||
const dialogHandleClose = (done: () => void) => {
|
||||
done()
|
||||
}
|
||||
|
||||
const dialogSuccess = async () => {
|
||||
const formRef = yhxqRef.value.controlRef
|
||||
const data = await formRef.handleSubmit(true)
|
||||
let bq = data.$tjbq
|
||||
if (bq) {
|
||||
if (bq.indexOf('|') == -1) {
|
||||
dynamicTags.value.push(bq)
|
||||
} else {
|
||||
let bqList = bq.split('|')
|
||||
bqList.forEach((ele) => {
|
||||
dynamicTags.value.push(ele)
|
||||
})
|
||||
}
|
||||
}
|
||||
inputVisible.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.el-tabs) {
|
||||
.el-tabs__nav-wrap {
|
||||
height: 53px;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.el-tabs__item {
|
||||
height: 53px;
|
||||
font-weight: bold;
|
||||
line-height: 53px;
|
||||
color: rgb(102 102 102);
|
||||
|
||||
&.is-active {
|
||||
color: rgb(64 158 255);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-bule-text {
|
||||
margin-bottom: 20px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
border-left: 6px solid #409eff;
|
||||
}
|
||||
|
||||
::v-deep(.el-tag) {
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
background-color: white;
|
||||
border-color: #ebeef5;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-new-tag {
|
||||
height: 40px;
|
||||
background-color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
::v-deep(.el-overlay) {
|
||||
.el-dialog {
|
||||
border-radius: 5px;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 13px 13px 13px 15px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 5px 5px 0 0;
|
||||
|
||||
.el-dialog__title {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
height: 56.8px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
|
||||
.el-checkbox-group {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
|
||||
.el-checkbox {
|
||||
.el-checkbox__inner {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.el-checkbox__label {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
padding: 10px 20px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
align-items: center;
|
||||
justify-content: right;
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
color: white;
|
||||
background-color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-tabs .el-tabs__nav-wrap {
|
||||
height: 60px;
|
||||
|
||||
.el-tabs__nav {
|
||||
height: 60px;
|
||||
|
||||
.el-tabs__item {
|
||||
height: 60px;
|
||||
// line-height: 60px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
color: #666;
|
||||
|
||||
&.is-active {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-alert v-for="item in defineData" :key="item.id" type="info">
|
||||
<template #title>
|
||||
<el-avatar :size="28" class="mr-5px" :src="item.imgUrl" />
|
||||
<span class="c-#666666 mr-10px">{{ item.name }}</span>
|
||||
<span class="c-#999999 text-12px">{{ item.time }}</span>
|
||||
</template>
|
||||
<template #default>
|
||||
<span class="c-#999999">{{ item.content }}</span>
|
||||
</template>
|
||||
</el-alert>
|
||||
|
||||
<div class="flex h-60px mb-10px bottom">
|
||||
<el-input type="text" placeholder="请输入批阅内容" v-model="inputVal" />
|
||||
<el-button type="primary" @click="fbBtn">发布</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
interface DefineData {
|
||||
id: number
|
||||
imgUrl: string
|
||||
name: string
|
||||
time: string
|
||||
content: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
data?: DefineData[]
|
||||
}>()
|
||||
|
||||
const defineData = ref(props.data)
|
||||
const inputVal = ref('')
|
||||
let dataLength = ref(0)
|
||||
const fbBtn = () => {
|
||||
if (!inputVal.value) return
|
||||
dataLength.value = defineData.value?.length || 0
|
||||
let endVal = defineData.value![dataLength.value - 1]
|
||||
let id = endVal.id
|
||||
defineData.value![dataLength.value] = {
|
||||
id: id,
|
||||
imgUrl:
|
||||
'https://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/f0ee8a3c7c9638a54940382568c9dpng_5.png',
|
||||
name: '赵小刚',
|
||||
time: formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss'),
|
||||
content: inputVal.value
|
||||
}
|
||||
inputVal.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.el-alert) {
|
||||
height: 90px;
|
||||
margin-bottom: 20px;
|
||||
background-color: rgb(249 249 249 / 49.8%);
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
border-radius: 0;
|
||||
|
||||
.el-alert__content {
|
||||
height: 72px;
|
||||
align-items: baseline;
|
||||
|
||||
.el-alert__title {
|
||||
display: flex;
|
||||
font-family: '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.el-alert__description {
|
||||
font-family: '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.el-alert__close-btn {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
::v-deep(.el-input) {
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
|
||||
.el-input__wrapper {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
font-family: '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="flex items-start">
|
||||
<div class="w-30% mr-20px border-style">
|
||||
<FormView
|
||||
formType="edit"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="form1Data"
|
||||
:showButton="false"
|
||||
formId="1853701496069386242"
|
||||
></FormView>
|
||||
</div>
|
||||
<div class="w-[calc(70%-20px)] border-style">
|
||||
<FormView
|
||||
formType="edit"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:enhanceData="form2EData"
|
||||
:defaultData="form2Data"
|
||||
:showButton="false"
|
||||
formId="1853994635845922818"
|
||||
></FormView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FormView } from '@/components/LowDesign/index'
|
||||
|
||||
defineOptions({ name: 'WorkReportView' })
|
||||
|
||||
const prop = defineProps({
|
||||
data: Object,
|
||||
stepList: Object,
|
||||
form2Data: Object
|
||||
})
|
||||
|
||||
const form1Data = computed(() => {
|
||||
return {
|
||||
...prop.data,
|
||||
stepList: prop.stepList
|
||||
}
|
||||
})
|
||||
const form2EData = ref({})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.border-style {
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 5px rgb(0 0 0 / 4.71%);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-steps direction="vertical" align-center>
|
||||
<el-step v-for="item in props.data" :key="item.id" title="Step 1">
|
||||
<template #icon>
|
||||
<div
|
||||
class="w-30px h-30px b-1px b-solid rounded-1/2 flex items-center justify-center"
|
||||
:style="{ borderColor: item.iconColor }"
|
||||
>
|
||||
<Icon :icon="item.icon" :style="{ color: item.iconColor }"></Icon>
|
||||
</div>
|
||||
</template>
|
||||
<template #title>
|
||||
{{ item.time }}
|
||||
</template>
|
||||
<template #description>
|
||||
<span> {{ item.type }} </span>
|
||||
<span class="mr-5px"> : </span>
|
||||
<span class="mr-5px"> {{ item.do }} </span>
|
||||
<span class="c-#409EFF"> {{ item.content }} </span>
|
||||
</template>
|
||||
</el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: Object
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.el-steps) {
|
||||
height: 280px;
|
||||
|
||||
.el-step {
|
||||
.el-step__head {
|
||||
width: 30px;
|
||||
|
||||
.el-step__line {
|
||||
top: 29px;
|
||||
height: calc(100% - 30px);
|
||||
background-color: #e4e4e4;
|
||||
}
|
||||
|
||||
.el-step__icon {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-step__main {
|
||||
margin-top: -6px;
|
||||
|
||||
.el-step__title {
|
||||
height: 22px;
|
||||
padding-bottom: 0;
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.el-step__description {
|
||||
height: 22px;
|
||||
margin-top: 0;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 22px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
208
src/views/lowTemplate/generalPage/workReport/index.vue
Normal file
208
src/views/lowTemplate/generalPage/workReport/index.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div class="WorkReport-box rounded-xl">
|
||||
<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane v-for="item in tabsList" :key="item.name" :label="item.label" :name="item.name">
|
||||
<LowTable tableId="1853269839533273090" :enhanceData="tabEnhanceData"> </LowTable>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { LowTable } from '@/components/LowDesign/index'
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
|
||||
defineOptions({ name: 'WorkReport' })
|
||||
|
||||
const tabsList = ref([
|
||||
{ label: '全部报告', name: 1 },
|
||||
{ label: '我提交的', name: 2 },
|
||||
{ label: '抄送给我的', name: 3 },
|
||||
{ label: '提交给我的', name: 4 }
|
||||
])
|
||||
const activeName = ref(1)
|
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
|
||||
const tabEnhanceData = ref({
|
||||
stepList: [
|
||||
{
|
||||
id: 1,
|
||||
icon: 'mynaui:flag-solid',
|
||||
iconColor: '#0099FF',
|
||||
time: '19:54:03',
|
||||
type: '任务',
|
||||
do: '创建了',
|
||||
content: '项目日常任务'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: 'mingcute:upload-fill',
|
||||
iconColor: '#FF7A8C',
|
||||
time: '19:54:03',
|
||||
type: '文件',
|
||||
do: '上传了',
|
||||
content: '交互设计文档'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: 'mynaui:box-solid',
|
||||
iconColor: '#FF7A8C',
|
||||
time: '19:54:03',
|
||||
type: '项目',
|
||||
do: '创建了',
|
||||
content: '示例项目名称'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: 'mdi:address-marker',
|
||||
iconColor: '#FF7A8C',
|
||||
time: '19:54:03',
|
||||
type: '日程',
|
||||
do: '创建了',
|
||||
content: '项目日常会议'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: 'si:user-fill',
|
||||
iconColor: '#52C1F5',
|
||||
time: '19:54:03',
|
||||
type: '联系人',
|
||||
do: '新增了',
|
||||
content: '项目联系人'
|
||||
}
|
||||
],
|
||||
form2Data: {
|
||||
areaOne:
|
||||
'对于一个客服代表来说，做客服工作的感受就象是一个学会了吃辣椒的人，整个过程感受最多的只有一个字：辣。如果到有一天你已经习惯了这种味道，不再被这种味道呛得咳嗽或是摸鼻涕流眼泪的时候就说明你已经是一个非常有经验的老员工了。我是从一线员工上来的，所以深谙这种味道。作为一个班长，在接近两年的班长工作中，我就一直在不断地探索，企图能够找到另外一种味道，能够化解和消融前台因用户所产生的这种辣味，这就是话务员情绪管理。毕竟大多数的人需要对自己的情绪进行管理、控制和调节。',
|
||||
areaTwo:
|
||||
'细细回忆这段时间以来的工作过程及目前公话组的整个状态，虽然在我们大家的共同努力下有了较大的变化，但是仍有许多的缺点和不足等着我们去规划和改观。首先在服务质量和服务意识方面离省局的要求还存在较大差距，不管成功与否，我们都将不断地摸索和尝试，如作大型的关于服务意识及情绪管理方面的培训来激发前台的工作积极性。或为了提高语音亲和力，作语音艺术培训及在公司工会的倡导和鼓励下号召全话务中心参与诗歌朗诵大赛等尝试，在培养声音魅力过程中，让电话交流的载体更加生动，由此而产生一批更加出色的客服代表。然后是在座席间工作纪律及员工思想动态上将进一步加大管理力度，由于公话组是呼叫中心人数最多的一个组，对于今后的工作可谓任重而道远。',
|
||||
table: [
|
||||
{
|
||||
id: 1,
|
||||
table_file: 'http://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/111.txt',
|
||||
tale_size: '2MB',
|
||||
table_time: '2024-11-15 15:43:23',
|
||||
table_user: '1'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
table_file: 'http://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/111.txt',
|
||||
tale_size: '2MB',
|
||||
table_time: '2024-11-15 16:43:23',
|
||||
table_user: '1'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
table_file: 'http://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/111.txt',
|
||||
tale_size: '2MB',
|
||||
table_time: '2024-11-15 16:43:23',
|
||||
table_user: '1'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
table_file: 'http://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/111.txt',
|
||||
tale_size: '2MB',
|
||||
table_time: '2024-11-15 16:43:23',
|
||||
table_user: '1'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
table_file: 'http://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/111.txt',
|
||||
tale_size: '2MB',
|
||||
table_time: '2024-11-15 16:43:23',
|
||||
table_user: '1'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
table_file: 'http://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/111.txt',
|
||||
tale_size: '2MB',
|
||||
table_time: '2024-11-15 16:43:23',
|
||||
table_user: '1'
|
||||
}
|
||||
],
|
||||
alertList: [
|
||||
{
|
||||
id: 1,
|
||||
imgUrl:
|
||||
'https://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/f0ee8a3c7c9638a54940382568c9dpng_5.png',
|
||||
name: '赵小刚',
|
||||
time: '2019-03-23 22:31',
|
||||
content: '非常不错的分享，对我们的工作很有参考价值。'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imgUrl:
|
||||
'https://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/f0ee8a3c7c9638a54940382568c9dpng_5.png',
|
||||
name: '赵小刚',
|
||||
time: '2019-03-23 22:31',
|
||||
content: '非常不错的分享，对我们的工作很有参考价值。'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
imgUrl:
|
||||
'https://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/f0ee8a3c7c9638a54940382568c9dpng_5.png',
|
||||
name: '赵小刚',
|
||||
time: '2019-03-23 22:31',
|
||||
content: '非常不错的分享，对我们的工作很有参考价值。'
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.WorkReport-box {
|
||||
min-height: 500px;
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
box-shadow: 0 0 5px rgb(0 0 0 / 4.71%);
|
||||
|
||||
.font-wryh {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
}
|
||||
|
||||
::v-deep(.el-tabs) {
|
||||
.el-tabs__header {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
padding-left: 25px;
|
||||
// border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
align-items: center;
|
||||
|
||||
.el-tabs__nav {
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
border-radius: 5px;
|
||||
|
||||
.el-tabs__item {
|
||||
width: 101px;
|
||||
height: 35px;
|
||||
font-family: MicrosoftYaHei, '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
color: #999;
|
||||
background-color: white;
|
||||
|
||||
&.is-active {
|
||||
color: white;
|
||||
background-color: rgb(64 158 255 / 100%);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__content {
|
||||
padding: 25px 20px;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user