import { defineComponent, Fragment, ref } from 'vue'
|
import BaseDialog from '../BaseDialog/BaseDialog'
|
import { useVModel } from '@vueuse/core'
|
import styles from './ProjectConfig.module.scss'
|
import { getProjectConfig, createWidget } from '@/api/project-api'
|
import { menu, menuMap } from '@/config/menu'
|
import Icon from '../Icon/Icon'
|
import IconButton from '../IconButton/IconButton'
|
import DyForm from '../DyForm/DyForm'
|
import { ElLoading, ElMessage } from 'element-plus'
|
|
export default defineComponent({
|
name: 'project',
|
props: {
|
modelValue: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
setup(props, { emit }) {
|
const visible = useVModel(props, 'modelValue', emit)
|
const baseVisible = ref(false)
|
const build = ref([])
|
const local = ref([])
|
const formData = ref({})
|
const formRef = ref()
|
const openType = ref(1)
|
const onOpenDialog = async () => {
|
const buildProd = await getProjectConfig('.build.prod')
|
const localProd = await getProjectConfig('.build.local')
|
if (buildProd) {
|
try {
|
build.value = (
|
(buildProd.data && buildProd.data.split('\n')) ||
|
[]
|
).filter((v) => v)
|
local.value = (
|
(localProd.data && localProd.data.split('\n')) ||
|
[]
|
).filter((v) => v)
|
} catch (error) {
|
console.error(error)
|
}
|
}
|
}
|
const onConfirm = () => {
|
visible.value = false
|
}
|
const onClose = () => {
|
visible.value = false
|
}
|
const onAddWidget = (type: number) => {
|
baseVisible.value = true
|
openType.value = type
|
}
|
const onBaseConfirm = async () => {
|
await formRef.value.validate()
|
const loading = ElLoading.service({
|
lock: true,
|
text: '创建中，请稍后...',
|
background: 'rgba(0, 0, 0, 0.7)',
|
})
|
loading.close()
|
await createWidget({
|
...formData.value,
|
type: openType.value,
|
menu,
|
menuMap,
|
})
|
|
onBaseClose()
|
}
|
const onBaseClose = () => {
|
baseVisible.value = false
|
}
|
return () => {
|
return (
|
<Fragment>
|
<BaseDialog
|
onOpen={onOpenDialog}
|
width="1400px"
|
title="项目配置"
|
v-model={visible.value}
|
onConfirm={onConfirm}
|
onClose={onClose}
|
>
|
<div class={styles.projectConfig}>
|
<div class={styles.leftPane}>
|
<div class={styles.header}>
|
<h3 style="margin:0;">业务组件</h3>
|
<IconButton
|
onClick={() => onAddWidget(1)}
|
icon="add-p"
|
status="add"
|
>
|
添加
|
</IconButton>
|
</div>
|
<div class={styles.list}>
|
{local.value.length ? (
|
local.value.map((item) => (
|
<div class={styles.item}>
|
<div class={styles.itemContent}>
|
<span class={styles.span}>{menuMap[item]?.name}</span>
|
</div>
|
<el-tag>{item}</el-tag>
|
</div>
|
))
|
) : (
|
<el-empty style="margin-left: 39%;" />
|
)}
|
</div>
|
</div>
|
<div class={styles.rightPane}>
|
<div class={styles.header}>
|
<h3 style="margin:0;">LMES组件</h3>
|
<IconButton
|
onClick={() => onAddWidget(2)}
|
icon="add-p"
|
status="add"
|
>
|
添加
|
</IconButton>
|
</div>
|
<div class={styles.list}>
|
{build.value.length ? (
|
build.value.map((item) => (
|
<div class={styles.item}>
|
<div class={styles.itemContent}>
|
<span class={styles.span}>{menuMap[item]?.name}</span>
|
</div>
|
<el-tag>{item}</el-tag>
|
</div>
|
))
|
) : (
|
<el-empty style="margin-left: 39%;" />
|
)}
|
</div>
|
</div>
|
</div>
|
</BaseDialog>
|
<BaseDialog
|
title="添加组件"
|
v-model={baseVisible.value}
|
onConfirm={onBaseConfirm}
|
onClose={onBaseClose}
|
>
|
<DyForm
|
v-model:formData={formData.value}
|
ref={formRef}
|
formItemProps={[
|
{
|
prop: 'widgetName',
|
label: '组件名称',
|
el: 'input',
|
placeholder: '请输入组件名称',
|
rules: [
|
{
|
required: true,
|
message: '请输入组件名称',
|
},
|
],
|
},
|
{
|
prop: 'widgetId',
|
label: '组件ID',
|
placeholder: 'ProcessManagement',
|
el: 'input',
|
rules: [
|
{
|
required: true,
|
message: '请输入组件ID',
|
},
|
{
|
message: '首字母必须为大写，不能有数字和特殊符号',
|
pattern: /^[A-Z][A-Za-z]*$/,
|
trigger: 'blur',
|
},
|
],
|
},
|
]}
|
></DyForm>
|
</BaseDialog>
|
</Fragment>
|
)
|
}
|
},
|
})
|
