11 changed files with 509 additions and 17 deletions
@ -0,0 +1,141 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 10:47:19 |
|||
@ 备注: 自定义表单组件 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import controlListData from '@/components/DesignForm/assembly' |
|||
import Draggable from 'vuedraggable-es' |
|||
import '@/assets/iconfont/iconfont.css' |
|||
|
|||
//引入页面 |
|||
import FormVersion from '@/components/DesignForm/formVersion.vue'; |
|||
|
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
tableKey?: number | string, |
|||
signCode?: number | string, |
|||
}>(), |
|||
{} |
|||
) |
|||
const designType = inject('formDesignType') as string //注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。 |
|||
// 默认搜索允许显示的字段 |
|||
const searchField = [ |
|||
'input', |
|||
'radio', |
|||
'checkbox', |
|||
'select', |
|||
'datePicker', |
|||
'timePicker', |
|||
'inputNumber', |
|||
'cascader', |
|||
'component', |
|||
'button' |
|||
] |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 10:58:56 |
|||
@ 功能: 表单组件数据 |
|||
*/ |
|||
const controlList = computed(() => { |
|||
if (designType === 'search') { |
|||
// 只返回基础字段 |
|||
const temp: any = [] |
|||
controlListData.forEach((item: any) => { |
|||
if (item.children) { |
|||
const filter = item.children.filter((ch: any) => { |
|||
return searchField.includes(ch.type) |
|||
}) |
|||
if (filter && filter.length) { |
|||
temp.push({ title: item.title, children: filter }) |
|||
} |
|||
} |
|||
}) |
|||
return temp |
|||
} else { |
|||
return controlListData |
|||
} |
|||
}) |
|||
const tableVersion = ref() //版本显示器 |
|||
|
|||
const emits = defineEmits<{ |
|||
(e: 'versionUpdateForm', value: string): void |
|||
}>() |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 11:36:59 |
|||
@ 功能: 启用和禁用版本 |
|||
*/ |
|||
const enableOrDisable = (val?:any) =>{ |
|||
console.log("启用和禁用版本",val) |
|||
emits('versionUpdateForm', val) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 11:40:15 |
|||
@ 功能: 打开版本选择页面 |
|||
*/ |
|||
const useVersionClick = () => { |
|||
tableVersion.value.open() |
|||
} |
|||
const activities = [ |
|||
{ |
|||
content: 'Event start', |
|||
timestamp: '2018-04-15', |
|||
}, |
|||
{ |
|||
content: 'Approved', |
|||
timestamp: '2018-04-13', |
|||
}, |
|||
{ |
|||
content: 'Success', |
|||
timestamp: '2018-04-11', |
|||
}, |
|||
] |
|||
</script> |
|||
<template> |
|||
<div class="components-list"> |
|||
<div v-for="(list, index) in controlList" :key="index"> |
|||
<div class="title"> |
|||
{{ list.title }} |
|||
<div |
|||
class="template" |
|||
@click="useVersionClick" |
|||
> |
|||
版本 |
|||
</div> |
|||
</div> |
|||
<draggable |
|||
v-model="list.children" |
|||
tag="ul" |
|||
:group="{ name: 'form', pull: 'clone', put: false }" |
|||
ghost-class="ghost" |
|||
:sort="false" |
|||
:clone="clone" |
|||
item-key="key123" |
|||
> |
|||
|
|||
<template #item="{ element }"> |
|||
<li class="fontIcon" :class="[element.type]"> |
|||
<i v-if="element.iconFont==''" :class="`icon-${element.icon}`"></i> |
|||
<i v-if="element.iconFont!=''" :class="`fa ${element.iconFont} `"></i> |
|||
<span :title="element.label">{{ element.label }}</span> |
|||
</li> |
|||
</template> |
|||
</draggable> |
|||
</div> |
|||
</div> |
|||
<FormVersion ref="tableVersion" :table-key="props.tableKey" :sign-code="props.signCode" @enableOrDisable="enableOrDisable" /> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.tab_pane_body{ |
|||
text-align: center; |
|||
|
|||
} |
|||
.fontIcon{ |
|||
i{ |
|||
padding: 4px 0px 0 0px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,139 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-08 14:52:03 |
|||
@ 备注: 版本管理 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { customerFormVersionCont } from '@/api/DesignForm/type' |
|||
import { haveCustomerFormVersion,enableVersion } from '@/api/DesignForm/requestapi' |
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
tableKey?: number | string, |
|||
signCode?: number | string, |
|||
}>(), |
|||
{} |
|||
) |
|||
|
|||
const emits = defineEmits<{ |
|||
(e: 'click', value: string): void |
|||
(e: 'enableOrDisable', value: string): void |
|||
}>() |
|||
const isOpen = ref(false) |
|||
const versionList = ref<customerFormVersionCont[]>([]) //版本内容列表 |
|||
const loading = ref(false) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 14:21:25 |
|||
@ 功能: 编辑状态 |
|||
*/ |
|||
const setupStatus = (val:any) =>{ |
|||
enableVersion({id:val.id.toString()}) |
|||
.then(() =>{ |
|||
|
|||
init() |
|||
emits('enableOrDisable', val.id.toString()) |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-08 14:55:50 |
|||
@ 功能: 打开页面 |
|||
*/ |
|||
const open = () => { |
|||
console.log("open",isOpen) |
|||
isOpen.value = true |
|||
init() |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-08 14:56:13 |
|||
@ 功能: 初始化数据 |
|||
*/ |
|||
const init = () => { |
|||
loading.value= true |
|||
haveCustomerFormVersion({id:props.tableKey}) |
|||
.then(({data})=>{ |
|||
console.log("加载异常-------------->",data) |
|||
versionList.value = data |
|||
// if(data.length > 0){ |
|||
// data.forEach((item:any) => { |
|||
// if(item.status == 1){ |
|||
// versionId.value = item.id.toString() |
|||
// emits('update:formVersion', item.id.toString()) |
|||
// } |
|||
// }); |
|||
// } |
|||
}) |
|||
.finally(()=>{loading.value= false}) |
|||
} |
|||
|
|||
defineExpose({ |
|||
open |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-05-09 14:03:54 |
|||
@ 功能: 设置颜色 |
|||
*/ |
|||
const setColor = (val:number) => { |
|||
if(val == 1){ |
|||
return "#67C23A" |
|||
}else{ |
|||
return "#F56C6C" |
|||
} |
|||
} |
|||
</script> |
|||
<template> |
|||
<div |
|||
v-if="isOpen" |
|||
class="use-template active" |
|||
v-loading="loading" |
|||
> |
|||
|
|||
<span class="close icon-close" @click="isOpen = false"></span> |
|||
<div v-if="versionList.length === 0" class="no-date">暂无版本</div> |
|||
<div v-else class="list"> |
|||
<el-scrollbar class="timeLineBox"> |
|||
<el-timeline style="max-width: 600px"> |
|||
<el-timeline-item v-for="item in versionList" :key="item.id" placement="top" :color="setColor(item.status)"> |
|||
<el-card v-if="item.status==1" > |
|||
<el-row> |
|||
<el-col>版本：V{{ item.version }}</el-col> |
|||
<el-col>创建人：{{ item.createrName }}</el-col> |
|||
<el-col>创建时间：{{ item.dayTime }}</el-col> |
|||
<el-col style="text-align:right"><el-button text type="success" size="small" disabled>使用中</el-button></el-col> |
|||
</el-row> |
|||
</el-card> |
|||
<el-card v-else > |
|||
<el-row> |
|||
<el-col>版本：V{{ item.version }}</el-col> |
|||
<el-col>创建人：{{ item.createrName }}</el-col> |
|||
<el-col>创建时间：{{ item.dayTime }}</el-col> |
|||
<el-col style="text-align:right"><el-button type="primary" size="small" @click="setupStatus(item)">启用</el-button></el-col> |
|||
</el-row> |
|||
</el-card> |
|||
</el-timeline-item> |
|||
|
|||
|
|||
</el-timeline> |
|||
</el-scrollbar> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.use-template{ |
|||
width:250px; |
|||
top: 40px; |
|||
.list{ |
|||
padding: 30px 5px; |
|||
} |
|||
} |
|||
.timeLineBox{ |
|||
height: calc(100vh - 80px); |
|||
::v-deep .el-card__body{ |
|||
padding:5px; |
|||
// color: #FFF; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue