整合工程

This commit is contained in:
aixianling
2024-08-06 17:53:52 +08:00
parent 01cd905669
commit d2e63c2588
66 changed files with 2017 additions and 8444 deletions

View File

@@ -1,101 +0,0 @@
<template>
<section class="conference">
<ai-list v-if="!showDetail">
<template slot="title">
<ai-title title="会议管理"></ai-title>
</template>
<template slot="tabs">
<el-tabs v-model="currIndex" @tab-click="handleClick">
<el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label" :name="String(i)">
<component :is="tab.comp" v-if="currIndex==i" :ref="currIndex" :instance="instance" :dict="dict"
:permissions="permissions" @goPage="goPage" :listType="listType" />
</el-tab-pane>
</el-tabs>
</template>
</ai-list>
<component v-else :is="currentComp" :instance="instance" :dict="dict" :detail="detailRow" :listType="listType" @gotoEdit="gotoAdd" ></component>
</section>
</template>
<script>
import addMeeting from './addMeeting';
import detail from './detail'
import list from './list'
export default {
name: 'AppConference',
label: "会议管理",
components: {addMeeting, detail, list},
provide() {
return {
top: this
}
},
props: {
instance: Function,
dict: Object,
permissions: Function,
},
data() {
return {
//会议状态0、草稿1、未开始2、进行中3、已取消4、已结束
//参会状态0、未确认1、已确认2、缺席
currIndex: "0",
currentComp: "",
showDetail: false,
detailRow: {},
listType: '1',
}
},
computed:{
tabs() {
return [
{label: "我参与的会议", name: "addMeeting", comp: list, detail: detail, permission: ""},
{label: "我发起的会议", name: "addMeeting", comp: list, detail: detail, permission: ""},
]
},
},
methods: {
goPage(params) {
this.detailRow = params.row
this.currentComp = params.comp
if(params.comp == 'detail' || params.comp == 'addMeeting') {
this.showDetail = true
}
},
handleClick() {
if (this.currIndex == 0) {
this.listType = '1'
} else {
this.listType = '0'
}
},
goBack() {
this.showDetail = false;
if (this.currIndex == '0') {
this.listType = '1'
} else {
this.listType = '0'
}
},
gotoAdd(obj) {
this.showDetail = true
this.detailRow = obj
this.currentComp = 'addMeeting'
},
},
}
</script>
<style lang="scss" scoped>
.conference {
height: 100%;
:deep( .ai-list__content--right-wrapper ){
background-color: transparent !important;
box-shadow: none !important;
}
}
</style>

View File

@@ -1,244 +0,0 @@
<template>
<ai-detail class="addMeeting">
<ai-title slot="title" title="发起会议" isShowBack isShowBottomBorder @onBackClick="$parent.goBack"/>
<template #content>
<ai-card title="会议信息">
<template #content>
<el-form :model="saveData" status-icon ref="ruleForm" :rules="rules" label-width="100px"
label-position="right">
<el-form-item label="会议标题:" prop="title">
<el-input v-model="saveData.title" size="small" placeholder="请输入..."
:maxlength="30" show-word-limit></el-input>
</el-form-item>
<el-row type="flex" justify="space-between">
<el-form-item label="开始时间:" prop="startTime">
<el-date-picker
:editable="false"
value-format="yyyy-MM-dd HH:mm:ss"
v-model="saveData.startTime"
:picker-options="pickerOptions"
type="datetime"
size="small"
placeholder="选择开始时间">
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间:" prop="endTime">
<el-date-picker
:editable="false"
value-format="yyyy-MM-dd HH:mm:ss"
v-model="saveData.endTime"
:picker-options="pickerOptions"
type="datetime"
:disabled="!Boolean(saveData.startTime)"
size="small"
placeholder="选择结束时间">
</el-date-picker>
</el-form-item>
</el-row>
<el-form-item label="会议地点:" prop="address">
<el-input v-model="saveData.address" size="small" placeholder="请输入..."
:maxlength="30" show-word-limit></el-input>
</el-form-item>
<el-form-item label="会议内容:" prop="content">
<el-input v-model="saveData.content" size="small" placeholder="请输入..."
type="textarea" :rows="8" :maxlength="500" show-word-limit></el-input>
</el-form-item>
<el-row type="flex" justify="space-between">
<el-form-item label="参会提醒:" prop="noticeBefore">
<ai-select v-model="saveData.noticeBefore"
placeholder="请选择"
:selectList="dict.getDict('meetingNoticeBefore')"
></ai-select>
</el-form-item>
<el-form-item label="确认提醒:" prop="noticeAfter">
<ai-select v-model="saveData.noticeAfter"
placeholder="请选择"
:selectList="dict.getDict('meetingNoticeAfter')"
></ai-select>
</el-form-item>
</el-row>
<el-form-item label="会议资料:" prop="files">
<ai-uploader :instance="instance" @change="handleChange" isShowTip fileType="file"
v-model="saveData.fileList"
acceptType=".zip,.rar,.doc,.docx,.xls,.ppt,.pptx,.pdf,.txt,.jpg,.png,.xlsx"
:limit="9"></ai-uploader>
</el-form-item>
</el-form>
</template>
</ai-card>
<ai-card title="参会人员信息">
<template #right>
<ai-wechat-selecter slot="append" :instance="instance" v-model="saveData.attendees">
<el-button type="text" icon="iconfont iconAdd">选择参会人员</el-button>
</ai-wechat-selecter>
</template>
<template #content>
<ai-table
border
:tableData="saveData.attendees"
:colConfigs="colConfigs"
:isShowPagination="false">
<el-table-column label="操作" slot="option" align="center">
<template v-slot="{row}">
<el-button type="text" title="删除" @click="deletePer(row)">删除</el-button>
</template>
</el-table-column>
</ai-table>
</template>
</ai-card>
</template>
<template #footer>
<el-button @click="$parent.goBack">取消</el-button>
<el-button type="primary" @click="saveFrom(0)">保存草稿</el-button>
<el-button type="primary" @click="saveFrom(1)">保存并发布</el-button>
</template>
</ai-detail>
</template>
<script>
import {mapState} from "vuex";
import moment from 'dayjs'
export default {
name: "addMeeting",
inject: ['top'],
props: {
instance: Function,
dict: Object,
permissions: Function,
detail: Object
},
data() {
let endTimePass = (rule, value, callback) => {
if (value) {
if (moment(value).unix() - moment(this.saveData.startTime).unix() > 0) {
callback()
} else {
callback(new Error('结束时间要大于开始时间'));
}
} else {
callback(new Error('请选择结束时间'));
}
}
return {
saveData: {
noticeBefore: '4',
noticeAfter: '0',
attendees: [],
fileList: []
},
rules: {
title: [{required: true, message: '请填写会议标题', trigger: 'blur'}],
startTime: [{required: true, message: '请选择开始时间', trigger: 'blur'}],
endTime: [{required: true, validator: endTimePass, trigger: 'change'}],
address: [{required: true, message: '请填写会议地点', trigger: 'blur'}],
// content: [{required: true, message: '请填写会议内容', trigger: 'blur'}],
noticeBefore: [{required: true, message: '请选择参会提醒', trigger: 'blur'}],
noticeAfter: [{required: true, message: '请选择确认提醒', trigger: 'blur'}],
},
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
showEdit: false,
total: 0,
}
},
methods: {
handleChange(e) {
this.saveData.fileList = e
},
deletePer(scope) {
this.$confirm('确认删除此参会人?')
.then(_ => {
if (this.detail.id) { //编辑
} else { //新增
this.saveData.attendees.map((item, index) => {
if (item.id == scope.id) {
this.saveData.attendees.splice(index, 1)
}
})
}
})
},
saveFrom(status) {
this.$refs["ruleForm"].validate((valid) => {
if (this.saveData.attendees.length == 0) {
return this.$message.error("参会人不能为空!")
}
if (moment(this.saveData.startTime).unix() - moment(Date.now()).unix() < 0) {
return this.$message.error("会议开始时间已过期,请重新选择!");
}
if (valid) {
this.saveData.files = []
this.saveData.fileList.map((item) => {
this.saveData.files.push(item.id)
})
this.instance.post(`/app/appmeetinginfo/add-update`, {
...this.saveData,
status: status,
}).then(res => {
if (res.code == 0) {
if (status != 1) {
this.$message.success("保存草稿成功")
} else {
this.$message.success("发布成功")
}
this.$parent.goBack();
}
});
}
});
},
getDetail() {
this.instance.post(`/app/appmeetinginfo/info-id?id=${this.detail.id}`).then(res => {
if (res?.data) {
this.saveData = {
...res.data,
};
this.saveData.fileList = res.data.files || []
}
});
}
},
created() {
this.dict.load("meetingNoticeAfter", "meetingNoticeBefore").then(
this.$nextTick(() => {
if (JSON.stringify(this.detail) == '{}') {
this.showEdit = false;
} else {
this.showEdit = true;
// this.saveData = {...this.detail};
// this.compereList = this.saveData.hosts;
// this.saveData.attendees = this.saveData.attendees || [];
this.getDetail()
}
})
)
},
computed: {
...mapState(['user']),
headerTitle() {
return this.showEdit ? '修改会议' : '发起会议'
},
colConfigs() {
return [
{prop: 'name', align: 'center', label: '姓名'},
{prop: 'departName', align: 'center', label: '所属单位'},
{slot: 'option'}
]
},
}
}
</script>
<style lang="scss" scoped>
.addMeeting {
:deep( .el-button--text ){
.iconfont {
color: inherit;
}
}
}
</style>

View File

@@ -1,595 +0,0 @@
<template>
<section class="meetingDetail detail-content">
<ai-detail>
<template #title>
<ai-title title="会议详情" isShowBottomBorder isShowBack @onBackClick="$parent.goBack">
<template #rightBtn>
<p class="conference_top_area" v-if="listType==0">
<!-- <el-button type="primary" v-if="detail.status==0" @click="changeMeeting('是否立即发布会议?')">立即发布</el-button> -->
<el-button type="primary" v-if="detail.status==1" @click="noticeMetting()">参会提醒</el-button>
<el-button type="primary" v-if="detail.status==0" @click="editMeeting()">修改会议</el-button>
<el-button class="del-btn-list" v-if="detail.status==1" @click="changeMeeting('是否取消会议?')">取消会议</el-button>
<el-button class="iconfont iconDelete del-btn-list" v-if="detail.status==0||detail.status==3"
@click="changeMeeting('是否删除会议?')">删除会议
</el-button>
</p>
<!-- v-if="detail.status==0||detail.status==3" -->
<p class="conference_top_area" v-if="listType==1&&info.status==1">
<el-button @click="toDo" style="width:80px;" class="del-btn-list">待定</el-button>
<el-button @click="innerVisible=true" v-if="info.joinStatus!=2" style="width:80px;" class="del-btn-list">
请假
</el-button>
<el-button type="primary" @click="changeMeeting('是否确认参会?')" v-if="info.joinStatus!=1" style="width:80px;">
确认参会
</el-button>
</p>
</template>
</ai-title>
</template>
<template #content>
<ai-dialog
title="确认请假"
:visible.sync="innerVisible"
@onConfirm="queMeeting('writeInfo')"
@onCancel="innerVisible=false;" @close="$refs.writeInfo.resetFields()"
width="520px">
<div class="addother_main" style="width:400px;margin:auto;">
<el-form :model="writeInfo" status-icon ref="writeInfo" label-width="100px" class="demo-ruleForm">
<el-form-item label="请假原因:" prop="reason" autocomplete="off"
:rules="{
required: true, message: '请假原因不能为空', trigger: 'blur'
}"
>
<el-input v-model.trim="writeInfo.reason" autocomplete="off" size="mini" placeholder="请输入..."
type="textarea" :rows="4" :maxlength="100" show-word-limit></el-input>
</el-form-item>
</el-form>
</div>
</ai-dialog>
<ai-card title="会议说明">
<template slot="content">
<ai-wrapper class="mar-t16" label-width="70px" :columnsNumber="1">
<ai-info-item label="会议标题:"><span>{{ info.title }}</span></ai-info-item>
</ai-wrapper>
<ai-wrapper class="mar-t16" label-width="70px" :columnsNumber="2">
<ai-info-item label="发起单位:" :value="info.unitName">
</ai-info-item>
<ai-info-item label="发起人:" :value="info.userName">
</ai-info-item>
</ai-wrapper>
<ai-wrapper class="mar-t16" label-width="70px" :columnsNumber="1">
<!-- <ai-info-item label="会议状态:" v-if="xq.joinStatus==1&&listType==1"><span>{{ xq.joinStatus }}</span>
</ai-info-item> -->
<ai-info-item label="发起时间:"><span>{{ info.createTime }}</span></ai-info-item>
</ai-wrapper>
<ai-wrapper class="mar-t16" label-width="70px" :columnsNumber="2">
<ai-info-item label="开始时间:"><span>{{ info.startTime }}</span></ai-info-item>
<ai-info-item label="结束时间:"><span>{{ info.endTime }}</span></ai-info-item>
</ai-wrapper>
<ai-wrapper class="mar-t16" label-width="70px" :columnsNumber="2">
<ai-info-item label="参会提醒:"><span>{{
dict.getLabel("meetingNoticeBefore", info.noticeBefore) || "-"
}}</span></ai-info-item>
<ai-info-item label="确认提醒:"><span>{{
dict.getLabel("meetingNoticeAfter", info.noticeAfter) || "-"
}}</span>
</ai-info-item>
</ai-wrapper>
<ai-wrapper class="mar-t16" label-width="70px" :columnsNumber="1">
<ai-info-item label="会议地点:"><span>{{ info.address }}</span></ai-info-item>
</ai-wrapper>
<ai-wrapper class="mar-t16" label-width="70px" :columnsNumber="1">
<ai-info-item label="会议内容:"><span v-html="info.content"></span></ai-info-item>
</ai-wrapper>
</template>
</ai-card>
<ai-card title="会议资料">
<template slot="content">
<ai-file-list :fileList="info.files" :fileOps="{name: 'name', size: 'fileSizeStr'}"></ai-file-list>
</template>
</ai-card>
<ai-card title="参会名单">
<template slot="content">
<ai-search-bar bottomBorder>
<template #left>
<el-select v-model="search.joinStatus" placeholder="确认状态" size="small" clearable class="vc-input-160" @change="searchMeetinguser">
<el-option
v-for="(item,k) in confirmStatus"
:key="k"
:label="item.label"
:value="k">
</el-option>
</el-select>
</template>
<template #right>
<!-- <ai-download :instance="instance" url="/app/appepidemicbackhomerecord/export" fileName="参会名单">
<el-button icon="iconfont iconExported">导出</el-button>
</ai-download> -->
</template>
</ai-search-bar>
<ai-table
:tableData="info.attendees"
:colConfigs="colConfigs"
style="margin-top: 12px;"
:isShowPagination="false">
<el-table-column slot="meetingUserName"
label="姓名"
align="center"
show-overflow-tooltip>
<div slot-scope="{row}">
<span>{{ row.meetingUserName }}</span>
</div>
</el-table-column>
<el-table-column slot="meetingUnitName"
label="所属部门"
align="center"
show-overflow-tooltip>
<div slot-scope="{row}">
<span>{{ row.meetingUnitName }}</span>
</div>
</el-table-column>
<el-table-column slot="joinStatus"
prop="joinStatus"
label="确认状态"
align="center"
show-overflow-tooltip>
<div slot-scope="{row}">
<p style="color:rgba(255,68,102,1);display:flex;justify-content:center;" v-if="row.joinStatus==2">
请假<i class="el-icon-warning" :title="row.absence" style="cursor: pointer;"></i>
</p>
<span v-else :style="{color:confirmStatus[row.joinStatus].color}"
v-text="confirmStatus[row.joinStatus].label"/>
</div>
</el-table-column>
<el-table-column slot="option"
label="操作"
align="center"
v-if="listType==0"
show-overflow-tooltip>
<div slot-scope="{row}" v-if="row.joinStatus==0">
<span class="el-icon-message-solid" style="cursor: pointer;" title="参会提醒"
@click="noticeMetting(row.meetingUserId)" v-if="detail.status==1"></span>
</div>
</el-table-column>
</ai-table>
</template>
</ai-card>
</template>
</ai-detail>
</section>
</template>
<script>
import {mapState} from "vuex";
export default {
name: 'meetingDetail',
inject: ['top'],
props: {
instance: Function,
dict: Object,
permissions: Function,
detail: Object,
listType: String
},
data() {
return {
navId: '1',
info: {},
total: 0,
writeInfo: {reason: ''},
meetingUserList: [],
innerVisible: false,
search: {joinStatus: ''}
}
},
created() {
this.dict.load("meetingNoticeAfter", "meetingNoticeBefore").then(() => this.searchDetail(this.detail.id))
},
computed: {
...mapState(['user']),
colConfigs() {
return [
{
slot: 'meetingUserName'
},
{
slot: 'meetingUnitName'
},
{
slot: 'joinStatus',
},
{prop: 'signInStatus', align: 'center', label: '签到', format: v => v === '1' ? '已签到' : '未签到'},
{
slot: 'option',
}
]
},
confirmStatus() {
return {
0: {label: '未确认', color: "rgba(255,136,34,1)"},
1: {label: '已确认', color: "rgba(34,102,255,1)"},
2: {label: '请假', color: "rgba(255,68,102,1)"},
3: {label: '待定', color: "rgba(255,136,34,1)"},
}
}
},
methods: {
toDo() {
this.$confirm("是否确认待定会议?").then(_ => {
this.instance.post("/app/appmeetinginfo/tobeConfirm", null, {
params: {
meetingId: this.detail.id,
}
}).then(res => {
if (res.code == 0) {
this.$message.success("会议待定");
setTimeout(_ => {
this.$parent.goBack();
}, 800)
}
})
})
},
searchMeetinguser() {
this.instance.post(`/app/appmeetinguser/list`, null, {
params: {...this.search, size: 999, meetingId: this.info.id}
}).then(res => {
if (res?.data) {
this.info.attendees = res.data.records;
this.total = res.data.total;
}
});
},
searchDetail(id) {
this.instance.post(`/app/appmeetinginfo/info-id`, null, {
params: {id}
}).then(res => {
if (res?.data) {
let {files = [], content} = res.data
content = content.replace(/(\r\n)|(\n)/g, "<br>")
this.info = {...res.data, content, files};
this.searchMeetinguser()
}
});
},
changeMeeting(title, id) {
this.$confirm(title, {
type: 'warning'
}).then(() => {
if (title == '是否立即发布会议?') {
this.fbMeeting();
} else if (title == '是否删除会议?') {
this.sdMeeting();
} else if (title == '是否取消会议?') {
this.qxMeeting();
} else if (title == '是否确认参会?') {
this.qrMeeting();
} else if (title == '是否删除此参会人员?') {
this.deleteMeetingPer(id)
}
})
},
deleteMeetingPer(id) {
this.instance.post(`/app/appmeetinguser/delete`, null,
{
params: {
id
}
}
).then(res => {
if (res && res.code == 0) {
this.$message.success("删除成功!");
this.searchMeetinguser();
}
});
},
queMeeting(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.instance.post(`/app/appmeetinginfo/absent`, null,
{
params: {
meetingId: this.detail.id,
reason: this.writeInfo.reason
}
}
).then(res => {
if (res && res.code == 0) {
this.innerVisible = false;
this.$parent.goBack();
}
});
} else {
return false;
}
});
},
qrMeeting() {
this.instance.post(`/app/appmeetinginfo/confirm`, null,
{
params: {
meetingId: this.detail.id
}
}
).then(res => {
if (res && res.code == 0) {
this.$message.success("确认参会成功!")
this.$parent.goBack();
}
});
},
noticeMetting(meetingUserId) {
this.instance.post(`/app/appmeetinginfo/notice`, null, {
params: {
meetingId: this.detail.id, noticeALL: !meetingUserId, meetingUserId
}
}).then(res => {
if (res && res.code == 0) {
this.$message.success("提醒成功!")
}
});
},
fbMeeting() {
this.instance.post(`/app/appmeetinginfo/release`, null,
{
params: {
meetingId: this.detail.id
}
}
).then(res => {
if (res && res.code == 0) {
this.$message.success("发布成功!")
this.$parent.goBack();
}
});
},
sdMeeting() {
this.instance.post(`/app/appmeetinginfo/delete`, null,
{
params: {
meetingId: this.detail.id
}
}
).then(res => {
if (res && res.code == 0) {
this.$message.success("删除成功!");
this.$parent.goBack();
}
});
},
qxMeeting() {
this.instance.post(`/app/appmeetinginfo/cancel`, null,
{
params: {
meetingId: this.detail.id
}
}
).then(res => {
if (res && res.code == 0) {
this.$message.success("取消会议成功!");
this.$parent.goBack();
}
});
},
editMeeting() {
this.$parent.goBack();
this.$emit('gotoEdit', this.info)
},
}
}
</script>
<style lang="scss" scoped>
.meetingDetail {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 1);
.conference_top_area {
display: flex;
align-items: center;
}
.user-search {
width: 100%;
height: 48px;
display: flex;
justify-content: space-between;
align-items: center;
.float-right {
width: calc(100% - 200px);
text-align: right;
}
.input-162 {
display: inline-block;
width: 162px;
}
}
.content {
width: 1000px;
height: calc(100% - 50px);
overflow: hidden;
margin: auto;
display: flex;
justify-content: space-around;
.content-left {
width: 160px;
height: 100%;
.content-left-nav {
width: 158px;
background-color: #ffffff;
border-radius: 4px;
border: solid 1px #eeeeee;
margin-top: 56px;
overflow: hidden;
li {
height: 48px;
line-height: 48px;
padding-left: 24px;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0;
color: #666666;
cursor: pointer;
border-left: 3px solid transparent;
&:hover {
border-left: 3px solid #5088ff;
}
a {
display: block;
}
}
.navActive {
border-left: 3px solid #5088ff;
color: #5088ff;
}
}
}
.content-right {
width: 780px;
height: calc(100% - 80px);
overflow-y: auto;
margin-left: 40px;
box-sizing: border-box;
overflow-x: hidden;
.content-right-title {
width: 780px;
height: 56px;
margin-bottom: 16px;
box-shadow: inset 0px -1px 0px 0px #dad5d5;
display: flex;
justify-content: space-between;
align-items: center;
span {
display: block;
width: 150px;
height: 56px;
line-height: 56px;
color: #333333;
font-weight: bold;
&:nth-of-type(2) {
text-align: right;
width: 200px;
}
}
}
.flie {
width: 100%;
height: 40px;
line-height: 40px;
padding: 0 8px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
color: rgba(51, 51, 51, 1);
background: rgba(255, 255, 255, 1);
border-radius: 4px;
border: 1px solid rgba(208, 212, 220, 1);
margin-bottom: 16px;
cursor: pointer;
p {
display: flex;
justify-content: flex-start;
align-items: center
}
}
.meeting_name {
width: 100%;
padding-bottom: 25px;
font-size: 16px;
box-shadow: inset 0px -1px 0px 0px #dad5d5;
position: relative;
overflow: hidden;
.title {
color: #333333;
height: 28px;
line-height: 28px;
margin-left: 0;
font-weight: bold;
margin-top: 14px;
}
ul {
overflow: hidden;
li {
width: 33.3%;
float: left;
line-height: 28px;
font-size: 14px;
span {
width: 70px;
display: block;
float: left;
color: rgba(153, 153, 153, 1)
}
p {
width: calc(100% - 70px);
float: left;
color: rgba(51, 51, 51, 1);
}
;
}
}
.svg {
width: 88px;
height: 88px;
position: absolute;
right: -20px;
bottom: -20px;
}
}
}
}
}
</style>

View File

@@ -1,259 +0,0 @@
<template>
<ai-list isTabs>
<template #content>
<ai-search-bar>
<template #left>
<el-button type="primary" @click="addMetting()">发起会议</el-button>
<ai-select
v-model="search.meetingStatus"
@change="getTableData()"
placeholder="会议状态"
:selectList="dict.getDict($parent.name==0 ? 'meetingStatusSelect' : 'meetingStatus')"
></ai-select>
<ai-select
v-if="$parent.name==0"
v-model="search.confirmStatus"
@change="getTableData()"
placeholder="确认状态"
:selectList="dict.getDict('confirmStatus')"
></ai-select>
</template>
<template #right>
<el-input
v-model="search.param"
v-throttle="() => {search.current=1,getTableData()}"
@keyup.enter.native="search.current=1,getTableData()"
placeholder="会议标题/地点"
size="small" suffix-icon="iconfont iconSearch" clearable @clear="getTableData()"></el-input>
</template>
</ai-search-bar>
<div class="list_main">
<div class="no-data" style="height:160px;" v-if="tableData.length==0"></div>
<ul v-if="tableData.length>0">
<li v-for="(item,index) in tableData" :key="index" @click="goDetail(item)">
<p>
<span class="conference_title">{{ item.title }}</span>
<span class="time" v-if="item.status==1">{{ item.expirationTime }}</span>
</p>
<p style="width:80%;">
<el-row type="flex" align="middle" class="unit">发起人{{ item.userName }}
</el-row>
<el-row type="flex" align="middle" class="unit">发起单位{{ item.unitName }}
</el-row>
</p>
<p style="width:80%;">
<span class="unit">会议时间{{ item.startTime.substring(0, 16) + '至' + item.endTime.substring(0, 16) }}</span>
<el-tooltip :content="item.address" placement="top-start" effect="light">
<span class="unit" v-if="item.address.length>12">会议地点{{
item.address.substring(0, 12) + '....'
}}</span>
<span class="unit" v-else>会议地点{{ item.address }}</span>
</el-tooltip>
</p>
<!-- <p style="width:80%;">
<span
class="unit">会议时间{{
item.startTime.substring(0, 16) + '至' + item.endTime.substring(0, 16)
}}</span>
<el-tooltip :content="item.address" placement="top-start" effect="light">
<span class="unit address"
v-if="item.address.length>12">会议地点{{ item.address.substring(0, 12) + '....' }}</span>
<span class="unit address" v-else>会议地点{{ item.address }}</span>
</el-tooltip>
</p> -->
<h5 :class="{color0:item.status==0,color1:item.status==1,color2:item.status==2,color3:item.status==3,color4:item.status==4}">
<span v-if="item.status==0">草稿箱</span>
<span v-if="item.status==1">未开始</span>
<span v-if="item.status==2">进行中</span>
<span v-if="item.status==3">已取消</span>
<span v-if="item.status==4">已结束</span>
</h5>
<ai-icon class="svg" v-if="item.joinStatus==0" type="svg" icon="iconunidentified"/>
<ai-icon class="svg" v-else-if="item.joinStatus==1" type="svg" icon="iconidentified"/>
<ai-icon class="svg" v-else-if="item.joinStatus==2" type="svg" icon="iconyiqingjia"/>
<ai-icon class="svg" v-else-if="item.joinStatus==3" type="svg" icon="icondaiding"/>
</li>
</ul>
</div>
<div class="pagination" v-if="tableData.length>0">
<el-pagination
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
background
:current-page.sync="search.current"
:page-sizes="[5, 10, 50, 100,200]"
:page-size="search.size"
layout="total,prev, pager, next,sizes,jumper"
:total="total">
</el-pagination>
</div>
</template>
</ai-list>
</template>
<script>
export default {
name: "list",
props: {
instance: Function,
dict: Object,
permissions: Function,
listType: String
},
data() {
return {
search: {
meetingStatus: '',
confirmStatus: '',
param: '',
current: 1,
size: 10,
listType: ''
},
tableData: [],
total: 0,
}
},
methods: {
goDetail(item) {
this.$emit('goPage', {
row: item,
comp: 'detail'
});
},
addMetting() {
this.$emit('goPage', {
row: {},
comp: 'addMeeting'
});
},
getTableData() {
this.instance.post(`/app/appmeetinginfo/list`, null, {
params: {
...this.search,
listType: this.listType
}
}).then(res => {
if (res && res.data) {
this.tableData = res.data.records;
this.total = res.data.total;
}
});
},
handleCurrentChange(val) {
this.search.current = val;
this.getTableData();
},
handleSizeChange(val) {
this.search.size = val;
this.getTableData();
},
},
created() {
this.dict.load("confirmStatus", "meetingStatus", "meetingStatusSelect").then(_ => this.getTableData())
}
}
</script>
<style lang="scss" scoped>
.list_main {
width: 100%;
ul {
overflow: hidden;
padding: 0;
margin: 0;
li {
width: 100%;
height: 107px;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
border: 1px solid rgba(216, 224, 232, 1);
box-sizing: border-box;
padding: 16px 16px 16px 50px;
margin-top: 8px;
cursor: pointer;
position: relative;
overflow: hidden;
p {
width: 100%;
height: 25px;
display: flex;
justify-content: space-between;
align-items: center;
.conference_title {
color: rgba(51, 51, 51, 1);
font-size: 16px;
font-weight: bold;
}
.time {
font-size: 14px;
color: #2266FF;
}
.unit {
font-size: 14px;
width: 50%;
}
}
h5 {
width: 100px;
height: 20px;
line-height: 20px;
text-align: center;
position: absolute;
left: -22px;
top: 10px;
box-sizing: border-box;
padding-right: 8px;
font-size: 12px;
transform: rotate(-45deg);
background: #FFF3E8;
color: rgba(255, 136, 34, 1);
box-shadow: -1px 1px 0px 0px rgba(216, 224, 232, 1), 1px -1px 0px 0px rgba(216, 224, 232, 1);
margin: 0;
}
.color0 {
color: #2244FF;
background: #EFF6FF;
}
.color1 {
background: #FFF3E8;
color: rgba(255, 136, 34, 1);
}
.color2 {
background: #EFF6FF;
color: #2266FF;
}
.color3 {
background-color: #D8E0E8;
color: #999999;
}
.color4 {
color: #2EA222;
background-color: #D8E0E8;
}
.svg {
width: 88px;
height: 88px;
position: absolute;
right: -20px;
bottom: -20px;
}
}
}
}
</style>

View File

@@ -1,186 +0,0 @@
<template>
<section class="AppCorporateSeal">
<ai-list v-if="showList">
<template slot="title">
<ai-title title="企业印章" :isShowBottomBorder="true"></ai-title>
</template>
<template slot="content">
<div class="signaturePane">
<div class="signatureCard" v-for="(op,i) in signatures" :key="i">
<div class="default" v-if="op.isDefault==1">默认</div>
<div class="body">
<el-image :src="`data:image/png;base64,${op.signSealData}`"/>
</div>
<div class="footer">
<el-button type="text" :disabled="op.isDefault==1" @click.stop="handleSetDefault(op.id)">设为默认</el-button>
<hr/>
<el-button type="text" :disabled="op.isDefault==1||op.signType==1" @click.stop="handleDelete(op.id)">删除
</el-button>
</div>
</div>
<div class="signatureCard add" @click="showList=false">
<ai-icon icon="iconAdd" size="32px"/>
<span>点击添加印章</span>
</div>
</div>
</template>
</ai-list>
<seal-detail v-else/>
</section>
</template>
<script>
import SealDetail from "./sealDetail";
export default {
name: "AppCorporateSeal",
label: "企业印章",
components: {SealDetail},
provide() {
return {
seal: this
}
},
props: {
instance: Function,
dict: Object,
permissions: Function
},
data() {
return {
signatures: [],
showList: true
}
},
created() {
this.getSignatures()
},
methods: {
getSignatures() {
this.instance.post("/app/syssignaccount/list", null, {
params: {
signType: 2,
size: 999
}
}).then(res => {
if (res?.data) {
this.signatures = res.data.records
}
})
},
handleSetDefault(id) {
this.$confirm("是否设置该印章为默认印章?").then(() => {
this.instance.post("/app/syssignaccount/default", null, {params: {id, listType: 1}}).then(res => {
if (res?.code == 0) {
this.$message.success("设置成功!")
this.getSignatures()
}
}).catch(() => 0)
})
},
handleDelete(ids) {
this.$confirm("是否删除该印章?").then(() => {
this.instance.post("/app/syssignaccount/delete", null, {params: {ids}}).then(res => {
if (res?.code == 0) {
this.$message.success("删除成功!")
this.getSignatures()
}
}).catch(() => 0)
})
},
}
}
</script>
<style lang="scss" scoped>
.AppCorporateSeal {
height: 100%;
background: #f3f6f9;
:deep( .signaturePane ){
display: flex;
gap: 16px;
flex-wrap: wrap;
padding: 16px;
.signatureCard {
width: 290px;
height: 258px;
background: #FFFFFF;
border-radius: 4px;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
&.add {
justify-content: center;
align-items: center;
color: #666666;
cursor: pointer;
.AiIcon {
width: 32px;
height: 32px;
font-size: 32px;
}
& > span {
font-size: 12px;
line-height: 16px;
}
}
.default {
position: absolute;
width: 56px;
height: 24px;
background: #3573FF;
border-radius: 0 0 4px 0;
top: 0;
left: 0;
text-align: center;
line-height: 24px;
font-size: 12px;
color: #FFF;
}
.body {
min-height: 0;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 50px;
cursor: pointer;
}
.footer {
flex-shrink: 0;
height: 40px;
background: rgba(#30426F, .5);
display: flex;
align-items: center;
padding: 8px 0;
box-sizing: border-box;
hr {
height: 100%;
border-color: rgba(#fff, .5);
}
& > .el-button {
flex: 1;
color: #fff;
&[disabled] {
color: rgba(#fff, .5);
}
}
}
}
}
}
</style>

View File

@@ -1,235 +0,0 @@
<template>
<section class="sealDetail">
<ai-detail>
<template #title>
<ai-title title="添加企业印章" isShowBack isShowBottomBorder @onBackClick="back"/>
</template>
<template #content>
<el-form size="small" ref="SealForm" :model="form" :rules="rules" label-suffix="" label-width="160px">
<ai-title title="单位信息" isShowBottomBorder/>
<el-form-item label="单位名称" prop="organizeName">
<el-input clearable v-model="form.organizeName" placeholder="请输入..." maxlength="25" show-word-limit/>
</el-form-item>
<el-form-item label="单位类型" prop="organizeType">
<el-select clearable v-model="form.organizeType" placeholder="请输入...">
<el-option v-for="(op,i) in $dict.getDict('organizeType')" :key="i" :value="op.dictValue"
:label="op.dictName"/>
</el-select>
</el-form-item>
<div class="flexFillRow">
<el-form-item label="企业注册类型" prop="organRegType">
<el-select clearable v-model="form.organRegType" placeholder="请输入...">
<el-option v-for="(op,i) in $dict.getDict('organRegType')" :key="i" :value="op.dictValue"
:label="op.dictName"/>
</el-select>
</el-form-item>
<el-form-item v-if="!!form.organRegType" :label="$dict.getLabel('organRegType',form.organRegType)"
prop="organCode">
<el-input clearable v-model="form.organCode" placeholder="请输入..."/>
</el-form-item>
<div v-else/>
</div>
<div class="flexFillRow">
<el-form-item label="注册类型" prop="registerType">
<el-select clearable v-model="form.registerType" placeholder="请输入...">
<el-option v-for="(op,i) in $dict.getDict('registerType')" :key="i" :value="op.dictValue"
:label="op.dictName"/>
</el-select>
</el-form-item>
<div/>
</div>
<template v-if="form.registerType==1">
<div class="flexFillRow">
<el-form-item label="代理人姓名" prop="agentName">
<el-input clearable v-model="form.agentName" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="代理人身份证号" prop="agentIdNumber">
<el-input clearable v-model="form.agentIdNumber" placeholder="请输入..."/>
</el-form-item>
</div>
<div class="flexFillRow">
<el-form-item label="代理人手机号" prop="signPhone">
<el-input clearable v-model="form.signPhone" placeholder="请输入..."/>
</el-form-item>
<div/>
</div>
</template>
<template v-if="form.registerType==2">
<div class="flexFillRow">
<el-form-item label="法人姓名" prop="legalName">
<el-input clearable v-model="form.legalName" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="法人身份证号" prop="legalIdNumber">
<el-input clearable v-model="form.legalIdNumber" placeholder="请输入..."/>
</el-form-item>
</div>
<div class="flexFillRow">
<el-form-item label="法人手机号" prop="signPhone">
<el-input clearable v-model="form.signPhone" placeholder="请输入..."/>
</el-form-item>
<div/>
</div>
</template>
<ai-title title="印章信息" isShowBottomBorder/>
<el-form-item class="sealImageTypes" label="生成印章类型" prop="organizeTemplateType">
<div v-for="(op,i) in sealImageTypes" :key="i" class="item" @click="form.organizeTemplateType=op.value">
<el-image :src="op.image" fit="contain"/>
<el-radio :label="op.value" v-model="form.organizeTemplateType">{{ op.name }}</el-radio>
</div>
</el-form-item>
<el-form-item label="横向文内容" prop="htext">
<el-input clearable v-model="form.htext" placeholder="0-8个字如合同专用章财务专用章等" maxlength="8" show-word-limit/>
</el-form-item>
<el-form-item label="下弦文内容" prop="qtext">
<el-input clearable v-model="form.qtext" placeholder="0-20个字下弦文是指的贵司公章底部一串防伪数字" maxlength="20"
show-word-limit/>
</el-form-item>
</el-form>
</template>
<template #footer>
<el-button @click="back">取消</el-button>
<el-button type="primary" @click="handleSubmit" v-loading="loading">提交</el-button>
</template>
</ai-detail>
</section>
</template>
<script>
import {ID} from "dui/lib/js/utils";
export default {
name: "sealDetail",
inject: ['seal'],
data() {
return {
form: {
organizeTemplateType: "STAR",
organizeType: "4",
organRegType: "NORMAL",
registerType: "1"
},
loading: false
}
},
computed: {
sealImageTypes() {
return this.$dict.getDict("organizeTemplateType")?.map(e => ({
image: e.dictColor,
value: e.dictValue,
name: e.dictName
})) || []
},
rules() {
return {
organizeName: [{required: true, message: "请填写单位名称"}],
organCode: [{required: true, message: `请填写${this.$dict.getLabel('organRegType', this.form.organRegType)}`}],
legalName: [{required: true, message: "请填写法人姓名"}],
agentName: [{required: true, message: "请填写代理人姓名"}],
organizeTemplateType: [{required: true}],
htext: [{required: true, message: "请填写横向文内容"}],
qtext: [{required: true, message: "请填写下弦文内容"}],
organizeType: [{required: true, message: "请选择单位类型"}],
organRegType: [{required: true, message: "请选择企业注册类型"}],
registerType: [{required: true, message: "请选择注册类型"}],
signPhone: [
{required: true, message: "请填写手机号码"},
{pattern: /^1[3456789]\d{9}$/, message: "手机号码格式有误"}
],
legalIdNumber: [
{required: true, message: "请填写法人身份证号码"},
{validator: (r, v, cb) => cb(ID.check(v) ? undefined : "身份证号码格式有误")}
],
agentIdNumber: [
{required: true, message: "请填写代理人身份证号码"},
{validator: (r, v, cb) => cb(ID.check(v) ? undefined : "身份证号码格式有误")}
],
}
}
},
created() {
this.$dict.load("registerType", "organRegType", "organizeType", "organizeTemplateType")
},
methods: {
back() {
this.seal.showList = true
this.seal.getSignatures()
},
handleSubmit() {
this.$refs.SealForm.validate(v => {
if (v) {
this.loading = true
this.seal.instance.post("/app/syssignaccount/register", {
userType: 0,
signType: 2,
signPhone: this.form.signPhone,
registerInfo: {...this.form, legalArea: 0},
style: {...this.form, sealColor: "RED"}
}).then(res => {
this.loading = false
if (res?.code == 0) {
this.$message.success("添加成功!")
this.back()
}
}).catch(() => this.loading = false)
}
})
}
}
}
</script>
<style lang="scss" scoped>
.sealDetail {
height: inherit;
:deep( .ai-detail__content--wrapper ){
.el-form {
display: flex;
flex-direction: column;
gap: 24px;
}
.el-form-item {
margin-bottom: 0;
.el-select {
width: 100%;
}
&.sealImageTypes > .el-form-item__content {
display: flex;
gap: 40px;
.item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
.el-image {
width: 80px;
height: 80px;
}
}
}
}
.flexFillRow {
display: flex;
align-items: center;
& > * {
flex: 1;
min-width: 0;
}
}
}
:deep( .ai-detail__footer > .el-button ){
width: 92px;
height: 32px;
}
}
</style>

View File

@@ -1,365 +0,0 @@
<template>
<section class="personal-signature">
<ai-list v-if="!showPhonePage">
<ai-title slot="title" title="个人签名" :isShowBottomBorder="false"/>
<template #custom>
<div class="signaturePane">
<div class="signatureCard" v-for="(op,i) in signatures" :key="i">
<div class="default" v-if="op.isDefault==1">默认</div>
<div class="body">
<el-image :src="`data:image/png;base64,${op.signSealData}`"/>
</div>
<div class="footer">
<el-button type="text" :disabled="op.isDefault==1" @click.stop="handleSetDefault(op.id)">设为默认</el-button>
<hr/>
<el-button type="text" :disabled="op.isDefault==1||op.signType>0" @click.stop="handleDelete(op.id)">删除
</el-button>
</div>
</div>
<div class="signatureCard add" @click="dialog=true">
<ai-icon icon="iconAdd" size="32px"/>
<span>点击添加签名</span>
</div>
</div>
</template>
</ai-list>
<ai-dialog :visible.sync="dialog" v-bind="dialogConf" @onConfirm="handleSubmit"
@closed="form={},drawPlaceholder=true,qrCode=null,showQRCode=false,getSignatures()">
<ai-drawer v-if="hasAuthed" :seal.sync="sealData" ref="aiDrawer">
<template #tools>
<el-popover trigger="manual" v-model="showQRCode">
<el-image :src="qrCode"/>
<div class="writeInPhone" slot="reference" @click.stop="showQR">
<ai-icon icon="iconEwm"/>
<span>手机签名</span>
</div>
</el-popover>
</template>
</ai-drawer>
<el-form size="small" :model="form" ref="authForm" :rules="rules" class="authZone" v-else label-suffix=""
label-width="100px">
<el-alert type="warning" title="第一次添加个人签名,需先进行实名认证" show-icon :closable="false"/>
<el-form-item label="姓名" prop="personName">
<el-input v-model="form.personName" clearable placeholder="姓名"/>
</el-form-item>
<el-form-item label="身份证号" prop="idNumber">
<el-input v-model="form.idNumber" clearable placeholder="身份证号"/>
</el-form-item>
<el-form-item label="手机号码" prop="signPhone">
<el-input v-model="form.signPhone" clearable placeholder="手机号码"/>
</el-form-item>
</el-form>
</ai-dialog>
<draw-in-phone v-if="showPhonePage"/>
</section>
</template>
<script>
import {mapState} from "vuex";
import DrawInPhone from "./drawInPhone";
export default {
name: "AppPersonalSignature",
label: "个人签名",
components: {DrawInPhone},
provide() {
return {
signature: this
}
},
props: {
instance: Function,
dict: Object,
permissions: Function
},
computed: {
...mapState(['user']),
hasAuthed() {
return this.signatures.length > 0
},
dialogConf() {
return this.hasAuthed ? {
title: "手写签名",
width: '720px'
} : {
title: "实名认证",
width: '520px'
}
},
rules() {
return {
personName: [{required: true, message: "请填写姓名"}],
signPhone: [
{required: true, message: "请填写手机号码"},
{pattern: /^1[3456789]\d{9}$/, message: "手机号码格式有误"}
],
idNumber: [
{required: true, message: "请填写身份证号码"},
{validator: (r, v, cb) => cb(ID.check(v) ? undefined : "身份证号码格式有误")}
],
}
}
},
data() {
return {
signatures: [],
dialog: false,
form: {},
sealData: null,
qrCode: null,
showQRCode: false,
showPhonePage: false,
loading: false,
}
},
created() {
if (this.$route.query.userId && this.$route.hash == "#phone") {
this.showPhonePage = true
} else {
this.getSignatures()
}
},
methods: {
getSignatures() {
this.instance.post("/app/syssignaccount/list", null, {
params: {
size: 999
}
}).then(res => {
if (res?.data) {
this.signatures = res.data.records
}
})
},
handleSubmit() {
if (this.loading) return
if (this.hasAuthed && this.$refs['aiDrawer'].drawPlaceholder) return this.$message.error("请签名")
this.loading = true
if (this.hasAuthed) {
let sealData = this.sealData?.replace(/data:image\/png;base64,/, '')
sealData && this.instance({
url: '/app/syssignaccount/upload-sealdata',
headers: {"Content-Type": "application/json"},
method: 'post',
params: {userId: this.user.info.id},
data: sealData
}).then(res => {
this.loading = false
if (res?.code == 0) {
this.dialog = false
this.$message.success("添加成功!")
this.getSignatures()
}
}).catch(() => {
this.loading = false
})
} else {
this.$refs.authForm.validate(v => {
if (v) {
this.instance.post("/app/syssignaccount/register", {
signPhone: this.form.signPhone,
signType: 1,
userType: 0,
registerInfo: {...this.form},
style: {personTemplateType: 'RECTANGLE', sealColor: 'RED'}
}).then(res => {
this.loading = false
if (res?.code == 0) {
this.dialog = false
this.$message.success("认证成功!")
this.getSignatures()
}
}).catch(() => {
this.loading = false
})
}
})
}
},
handleSetDefault(id) {
this.$confirm("是否设置该签名为默认签名?").then(() => {
this.instance.post("/app/syssignaccount/default", null, {params: {id, listType: 0}}).then(res => {
if (res?.code == 0) {
this.$message.success("设置成功!")
this.getSignatures()
}
}).catch(() => 0)
})
},
handleDelete(ids) {
this.$confirm("是否删除该签名?").then(() => {
this.instance.post("/app/syssignaccount/delete", null, {params: {ids}}).then(res => {
if (res?.code == 0) {
this.$message.success("删除成功!")
this.getSignatures()
}
}).catch(() => 0)
})
},
showQR() {
if (!this.qrCode) {
let url = `${location.href}?userId=${this.user.info.id}#phone`
this.instance.post("/app/syssignaccount/draw-qrcode", null, {
params: {url}
}).then(res => {
if (res?.data) {
this.showQRCode = true
this.qrCode = res.data
}
})
} else {
this.showQRCode = !this.showQRCode
}
}
}
}
</script>
<style lang="scss" scoped>
.personal-signature {
height: 100%;
background: #f3f6f9;
overflow: auto;
:deep( .signaturePane ){
display: flex;
gap: 16px;
flex-wrap: wrap;
padding: 16px;
.signatureCard {
width: 290px;
height: 258px;
background: #FFFFFF;
border-radius: 4px;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
&.add {
justify-content: center;
align-items: center;
color: #666666;
cursor: pointer;
.AiIcon {
width: 32px;
height: 32px;
font-size: 32px;
}
& > span {
font-size: 12px;
line-height: 16px;
}
}
.default {
position: absolute;
width: 56px;
height: 24px;
background: #3573FF;
border-radius: 0 0 4px 0;
top: 0;
left: 0;
text-align: center;
line-height: 24px;
font-size: 12px;
color: #FFF;
}
.body {
min-height: 0;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 25px;
pointer-events: none;
.el-image {
width: 100%;
height: 100%
}
}
.footer {
flex-shrink: 0;
height: 40px;
background: rgba(#30426F, .5);
display: flex;
align-items: center;
padding: 8px 0;
box-sizing: border-box;
hr {
height: 100%;
border-color: rgba(#fff, .5);
}
& > .el-button {
flex: 1;
color: #fff;
&[disabled] {
color: rgba(#fff, .5);
}
}
}
}
}
:deep( .writeInPhone ){
position: absolute;
width: 100px;
height: 32px;
background: rgba(#000, .5);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
color: rgba(#fff, .6);
cursor: pointer;
left: 16px;
top: 16px;
.AiIcon {
width: auto;
height: auto;
}
&:hover {
color: #fff;
}
}
:deep( .ai-dialog__wrapper ){
.ai-dialog__content--wrapper {
padding-right: 0 !important;
}
.el-dialog__body {
padding: 24px 0;
}
.authZone {
padding: 0 16px 24px;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 24px;
.el-alert {
border: 1px solid #FF8822;
}
.el-form-item {
margin-bottom: 0;
}
}
}
}
</style>

View File

@@ -1,110 +0,0 @@
<template>
<section class="drawInPhone" @touchmove.prevent>
<div class="endPage" v-if="finished">操作结束请关闭页面</div>
<ai-drawer :seal.sync="sealData" placeholder="请签名" :width="device.width" :height="device.height">
<template #tools>
<div class="writeInPhone" slot="reference" @click.stop="handleSubmit">
<ai-icon icon="iconPublish"/>
<span>提交</span>
</div>
</template>
</ai-drawer>
</section>
</template>
<script>
export default {
name: "drawInPhone",
inject: ['signature'],
data() {
return {
sealData: null,
device: {width: 0, height: 0},
finished: false
}
},
created() {
this.device.width = document.body.clientWidth
this.device.height = document.body.clientHeight
window.onresize = () => {
this.device.width = document.body.clientWidth
this.device.height = document.body.clientHeight
}
},
methods: {
handleSubmit() {
let sealData = this.sealData?.replace(/data:image\/png;base64,/, ''),
{userId} = this.$route.query
if (!userId) return alert("缺少必要参数")
sealData && this.signature.instance({
url: '/app/syssignaccount/upload-sealdata',
headers: {"Content-Type": "application/json"},
method: 'post',
params: {userId},
data: sealData,
withoutToken: true
}).then(res => {
if (res?.code == 0) {
alert("添加成功!")
this.finished = true
}
})
},
}
}
</script>
<style lang="scss" scoped>
.drawInPhone {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 20210205932;
.endPage {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 20210205933;
background: rgba(#000, .8);
color: #999;
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
}
.AiDrawer {
margin: 0;
}
.writeInPhone {
position: absolute;
width: 72px;
height: 32px;
background: rgba(#000, .5);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
color: rgba(#fff, .6);
cursor: pointer;
left: 16px;
top: 16px;
.AiIcon {
width: auto;
height: auto;
}
&:hover {
color: #fff;
}
}
}
</style>