You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
3.7 KiB
159 lines
3.7 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-05-29 13:25:09
|
|
@ 备注: 应用发布页面
|
|
-->
|
|
<script lang="ts" setup>
|
|
import { gainAppPageInfo, setCustomerFormState } from "@/api/DesignForm/requestapi";
|
|
const props = defineProps({
|
|
appCont: {
|
|
type: Object,
|
|
default() {
|
|
return {};
|
|
},
|
|
},
|
|
groupKey: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
});
|
|
const appStatue = ref(true);
|
|
const isEdit = ref(false);
|
|
onMounted(() => {
|
|
gainAppPageInfo({ id: props.appCont.uuid })
|
|
.then((data) => {
|
|
// console.log("获取初始化表单数据",data)
|
|
if (data.data.appForm.states == 1) {
|
|
appStatue.value = true;
|
|
props.appCont.state = 1;
|
|
} else {
|
|
appStatue.value = false;
|
|
props.appCont.state = 2;
|
|
}
|
|
})
|
|
.finally(() => {
|
|
isEdit.value = true;
|
|
});
|
|
});
|
|
// watch(()=>appStatue.value,(val:boolean) => {
|
|
|
|
// let sta = 1
|
|
// if(val){
|
|
// props.appCont.state = 1
|
|
// sta = 1
|
|
// }else{
|
|
// props.appCont.state = 2
|
|
// sta = 2
|
|
// }
|
|
|
|
// setUpState(sta)
|
|
|
|
// })
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-05-29 14:38:01
|
|
@ 功能: 设置状态
|
|
*/
|
|
const setUpState = (val: number) => {
|
|
setCustomerFormState({ id: props.appCont.uuid, state: val }).then((data) => {
|
|
props.appCont.state = appStatue.value;
|
|
// ElMessage({
|
|
// showClose: true,
|
|
// message: data.msg,
|
|
// type: 'success',
|
|
// })
|
|
});
|
|
};
|
|
const switchChang = () => {
|
|
if (appStatue.value == 1) {
|
|
setUpState(1);
|
|
} else {
|
|
setUpState(2);
|
|
}
|
|
};
|
|
</script>
|
|
<template>
|
|
|
|
<div class="appBox">
|
|
<el-card class="appCardBox" shadow="always">
|
|
<table>
|
|
<tr>
|
|
<td width="100px" align="center">
|
|
<el-image :src="props.appCont.appSvg">
|
|
<template #error>
|
|
<div class="image-slot">
|
|
<el-icon><icon-picture /></el-icon>
|
|
</div>
|
|
</template>
|
|
</el-image>
|
|
</td>
|
|
<td width="150px" align="center">
|
|
<el-text v-if="appStatue" class="mx-1 bigWord" type="success">已启用</el-text>
|
|
<el-text v-else class="mx-1 bigWord" type="danger">已停用</el-text>
|
|
</td>
|
|
<td align="left">
|
|
<el-text v-if="appStatue" class="mx-1" type="success"
|
|
>应用已启用，为可用状态。</el-text
|
|
>
|
|
<el-text v-else class="mx-1" type="danger"
|
|
>应用已停用，不可使用此App。</el-text
|
|
>
|
|
</td>
|
|
<td width="100px" align="right">
|
|
<el-switch
|
|
v-model="appStatue"
|
|
class="ml-2"
|
|
inline-prompt
|
|
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
|
|
active-text="已启用"
|
|
inactive-text="已停用"
|
|
@change="switchChang"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.appBox {
|
|
width: 100%;
|
|
background-color: #f5f7fa;
|
|
height: calc(100vh - 40px);
|
|
text-align: center;
|
|
.appCardBox {
|
|
max-width: 60%;
|
|
min-width: 40%;
|
|
margin: 20px auto;
|
|
td {
|
|
vertical-align: middle;
|
|
.bigWord {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
.el-image {
|
|
padding: 0 5px;
|
|
max-width: 80px;
|
|
max-height: 70px;
|
|
width: 100%;
|
|
height: 70px;
|
|
border: 1px solid #f0f2f5;
|
|
border-radius: 5px;
|
|
background: var(--el-fill-color-light);
|
|
}
|
|
.image-slot {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--el-fill-color-light);
|
|
color: var(--el-text-color-secondary);
|
|
font-size: 30px;
|
|
}
|
|
.image-slot .el-icon {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|