Browse Source

设置回显页面

v1
超级管理员 2 years ago
parent
commit
cfd9fae9e7
  1. 2
      docs/index.html
  2. 10
      index.html
  3. 1
      package.json
  4. 32
      src/api/DesignForm/requestapi.ts
  5. 19
      src/api/DesignForm/type.ts
  6. 1
      src/components/DesignForm/public/form/formGroup.vue
  7. 3
      src/views/matrix/matrixcont/setupmatrixuser.vue
  8. 73
      src/views/sysworkflow/codepage/createform.vue
  9. 77
      src/views/sysworkflow/codepage/index.vue
  10. 123
      src/views/sysworkflow/codepage/page.vue
  11. 147
      src/views/sysworkflow/codepage/setupconfig.vue
  12. 2
      vite.config.ts

2
docs/index.html

@ -7,7 +7,7 @@
<meta http-equiv="pragram" content="no-cache"> <meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<link rel="stylesheet" href="./static/iconfont/iconfont.css"> <link rel="stylesheet" href="./static/iconfont/iconfont.css">
<title>AK低代码快速开发平台</title> <title>数通智联化工平台</title>
<script type="module" crossorigin src="./assets/index-3679850f.js"></script> <script type="module" crossorigin src="./assets/index-3679850f.js"></script>
<link rel="stylesheet" href="./assets/index-eb370731.css"> <link rel="stylesheet" href="./assets/index-eb370731.css">
</head> </head>

10
index.html

@ -12,11 +12,11 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="./src/main.ts"></script>
<script type="module" src="/docs/static/plugins/ace/ace.js"></script> <script type="module" src="./docs/static/plugins/ace/ace.js"></script>
<script type="module" src="/docs/static/plugins/ace/ext-language_tools.js"></script> <script type="module" src="./docs/static/plugins/ace/ext-language_tools.js"></script>
<script type="module" src="/docs/static/plugins/tinymce/tinymce.min.js?v=6.1.2"></script> <script type="module" src="./docs/static/plugins/tinymce/tinymce.min.js?v=6.1.2"></script>
<script type="module" src="/docs/static/plugins/echarts.min.js"></script> <script type="module" src="./docs/static/plugins/echarts.min.js"></script>
</body> </body>
</html> </html>

1
package.json

@ -58,6 +58,7 @@
"path-to-regexp": "^6.2.0", "path-to-regexp": "^6.2.0",
"pinia": "^2.0.33", "pinia": "^2.0.33",
"screenfull": "^6.0.0", "screenfull": "^6.0.0",
"tinymce": "^6.7.0",
"ts-md5": "^1.3.1", "ts-md5": "^1.3.1",
"vue": "^3.3.1", "vue": "^3.3.1",
"vue-i18n": "9.2.2", "vue-i18n": "9.2.2",

32
src/api/DesignForm/requestapi.ts

@ -4,7 +4,10 @@ import {
customerFormCont, customerFormCont,
CustomerFormPageResult, CustomerFormPageResult,
SearchForm, SearchForm,
customerFormConfig customerFormConfig,
getContForId,
editFormStatus,
setupCustomerFormCont
} from './type'; } from './type';
//自定义表单列表 //自定义表单列表
export function getCustomerFormList(queryParams: SearchForm): AxiosPromise<CustomerFormPageResult> { export function getCustomerFormList(queryParams: SearchForm): AxiosPromise<CustomerFormPageResult> {
@ -21,7 +24,7 @@ export function getProductionMarkForm(): AxiosPromise<customerFormConfig> {
method: 'post', method: 'post',
}); });
} }
//保存自定义表单
export function saveProductionForm(data: any) { export function saveProductionForm(data: any) {
return request({ return request({
url: '/systemapi/customer_form/save_customer_form', url: '/systemapi/customer_form/save_customer_form',
@ -29,3 +32,28 @@ export function saveProductionForm(data: any) {
data: data data: data
}); });
} }
//获取单一表单内容
export function getOneProductionForm(data: getContForId) {
return request({
url: '/systemapi/customer_form/look_customer_form',
method: 'post',
data: data
});
}
//编辑自定义表单状态
export function editProductionFormStatus(data: editFormStatus) {
return request({
url: '/systemapi/customer_form/edit_customer_form_status',
method: 'post',
data: data
});
}
//编辑自定义表单设置
export function saveSetupCont(data: setupCustomerFormCont) {
return request({
url: '/systemapi/customer_form/save_setup_cont',
method: 'post',
data: data
});
}

19
src/api/DesignForm/type.ts

@ -21,3 +21,22 @@ export interface customerFormConfig{
formname:string; formname:string;
formlogo:string; formlogo:string;
} }
//根据Id获取信息
export interface getContForId{
id:string;
}
//编辑表单状态
export interface editFormStatus{
id:string[];
status:number;
is_delete:boolean;
}
//自定义表单设置字段
export interface setupCustomerFormCont{
id:number;
name:string;
permit:any;
states:number;
status:boolean;
}

1
src/components/DesignForm/public/form/formGroup.vue

@ -32,6 +32,7 @@ const props = withDefaults(
const store = useDesignFormStore() as any const store = useDesignFormStore() as any
const formProps = inject(constFormProps, {}) as any const formProps = inject(constFormProps, {}) as any
const type = computed(() => { const type = computed(() => {
console.log("11111",formProps.value.type)
return formProps.value.type return formProps.value.type
}) })
const state = reactive({ const state = reactive({

3
src/views/matrix/matrixcont/setupmatrixuser.vue

@ -11,8 +11,7 @@ import { Search } from '@element-plus/icons-vue'
* 引入页面 * 引入页面
*/ */
import PickOrg from '@/views/matrix/orgoruser/pickorg.vue' import PickOrg from '@/views/matrix/orgoruser/pickorg.vue'
import PickUser from '@/views/matrix/orgoruser/pickuser.vue'
import { th } from 'element-plus/es/locale';
const props = defineProps({ const props = defineProps({
userShow:{ userShow:{

73
src/views/sysworkflow/codepage/createform.vue

@ -33,7 +33,7 @@ import { ElMessage } from 'element-plus'
import { useLayoutStore } from '@/store/DesignForm/layout' import { useLayoutStore } from '@/store/DesignForm/layout'
import { FormData,formStruct,DrawerStruct } from '@/api/DesignForm/types' import { FormData,formStruct,DrawerStruct } from '@/api/DesignForm/types'
import { saveProductionForm } from '@/api/DesignForm/requestapi' import { saveProductionForm,getOneProductionForm } from '@/api/DesignForm/requestapi'
const isSave = ref(false) const isSave = ref(false)
@ -42,6 +42,10 @@ const props = defineProps({
type:Boolean, type:Boolean,
default:true default:true
}, },
formid:{
type:String,
default:""
},
formconfigcont:{ formconfigcont:{
type:Object, type:Object,
default(){ default(){
@ -100,35 +104,70 @@ const vueFileEl = ref()
const formControlAttrEl = ref() const formControlAttrEl = ref()
// //
provide('formDesignType', state.designType) provide('formDesignType', state.designType)
const getInitData = () => { const getInitData = () => {
const id = route.id // id const id = props.formid // id
if (id) { if (id) {
// //
state.loading = true state.loading = true
getRequest('designById', { id: id })
.then(res => { getOneProductionForm({id: id.toString()})
.then((res:any) => {
state.loading = false
console.log(" 获取初始表单数据",res)
if(res.code == 0){
const result = res.data const result = res.data
// res.data='' // res.data=''
if (result.data) { if (result.mastesform) {
state.formData = stringToObj(result.data) state.formData = stringToObj(result.mastesform)
} }
state.formDict = string2json(result.dict) state.formDict = string2json(result.dict)
// //
state.formOtherData.source = result.source state.formOtherData.source = result.source
state.formOtherData.formName = result.name state.formOtherData.formName = result.name
state.formOtherData.formName = result.name
state.formData.form.name = result.tablename
state.formData.form.formName = result.name
if (result.source && state.designType !== 'search') { if (result.source && state.designType !== 'search') {
// //
formControlAttrEl.value.getFormFieldBySource(result.source) formControlAttrEl.value.getFormFieldBySource(result.source)
} }
state.loading = false }else{
ElMessage.error(res.msg || '加载异常')
}
})
.finally(()=>{
isSave.value = true
}) })
.catch((res: any) => { .catch((res: any) => {
// console.log(res) // console.log(res)
ElMessage.error(res.message || '加载异常') ElMessage.error(res.msg || '加载异常')
state.loading = false state.loading = false
}) })
// getRequest('designById', { id: id })
// .then(res => {
// const result = res.data
// // res.data=''
// if (result.data) {
// state.formData = stringToObj(result.data)
// }
// state.formDict = string2json(result.dict)
// //
// state.formOtherData.source = result.source
// state.formOtherData.formName = result.name
// if (result.source && state.designType !== 'search') {
// //
// formControlAttrEl.value.getFormFieldBySource(result.source)
// }
// state.loading = false
// })
// .catch((res: any) => {
// // console.log(res)
// ElMessage.error(res.message || '')
// state.loading = false
// })
} }
} }
const headToolClick = (type: string) => { const headToolClick = (type: string) => {
switch (type) { switch (type) {
case 'del': case 'del':
@ -172,7 +211,12 @@ provide('formDesignType', state.designType)
break break
case 'close': case 'close':
console.log("关闭") console.log("关闭")
if(isSave.value){ if(isSave.value){
state.formData.list = []
store.setActiveKey('')
store.setControlAttr({})
emits("update:draweropenclose", false); emits("update:draweropenclose", false);
}else{ }else{
ElMessageBox.confirm( ElMessageBox.confirm(
@ -188,6 +232,10 @@ provide('formDesignType', state.designType)
saveDataNew(); saveDataNew();
}) })
.catch(() => { .catch(() => {
state.formData.list = []
store.setActiveKey('')
store.setControlAttr({})
emits("update:draweropenclose", false); emits("update:draweropenclose", false);
}) })
} }
@ -462,7 +510,7 @@ const saveDataNew = () => {
const searchCheckField = (data: FormData) => { const searchCheckField = (data: FormData) => {
state.formData.list.push(data) state.formData.list.push(data)
} }
getInitData()
// source // source
onMounted(() => { onMounted(() => {
if (route.source) { if (route.source) {
@ -470,6 +518,7 @@ const saveDataNew = () => {
} }
}) })
onMounted(() => { onMounted(() => {
getInitData()
console.log("监听数据",route.type,props.formconfigcont.formname,props.formconfigcont.formlogo,state) console.log("监听数据",route.type,props.formconfigcont.formname,props.formconfigcont.formlogo,state)
state.formOtherData.formName = props.formconfigcont.formname state.formOtherData.formName = props.formconfigcont.formname
state.formData.form.name = props.formconfigcont.formlogo state.formData.form.name = props.formconfigcont.formlogo
@ -481,9 +530,11 @@ onMounted(() => {
watch(() => props.draweropenclose,() => { watch(() => props.draweropenclose,() => {
console.log("监听数据",props.draweropenclose,state) console.log("监听数据",props.draweropenclose,state)
if(props.draweropenclose){ if(props.draweropenclose){
getInitData()
state.formOtherData.formName = props.formconfigcont.formName state.formOtherData.formName = props.formconfigcont.formName
state.formData.form.name = props.formconfigcont.formlogo state.formData.form.name = props.formconfigcont.formlogo
state.formData.form.formName = props.formconfigcont.formName state.formData.form.formName = props.formconfigcont.formName
}else{ }else{
state.formOtherData.formName = "未命名表单" state.formOtherData.formName = "未命名表单"
state.formData.form.name = props.formconfigcont.formlogo state.formData.form.name = props.formconfigcont.formlogo

77
src/views/sysworkflow/codepage/index.vue

@ -5,24 +5,30 @@
--> -->
<script lang='ts' setup> <script lang='ts' setup>
import { SearchForm,customerFormCont,customerFormConfig } from "@/api/DesignForm/type"; import { SearchForm,customerFormCont,customerFormConfig } from "@/api/DesignForm/type";
import { getCustomerFormList,getProductionMarkForm } from '@/api/DesignForm/requestapi' import { getCustomerFormList,getProductionMarkForm,editProductionFormStatus } from '@/api/DesignForm/requestapi'
// //
import CreateForm from '@/views/sysworkflow/codepage/createform.vue' import CreateForm from '@/views/sysworkflow/codepage/createform.vue'
import SetupConfig from '@/views/sysworkflow/codepage/setupconfig.vue'
const queryParams = reactive<SearchForm>({ const queryParams = reactive<SearchForm>({
page: 1, page: 1,
pagesize:15 pagesize:15
}); });
const ids = ref<number[]>([]); // const ids = ref<number[]>([]); //
const editIds = reactive<string[]>([]); //
const loading =ref(false); // const loading =ref(false); //
const show =ref(false); //
const drawerOpenOrClose = ref(false); const drawerOpenOrClose = ref(false);
const total = ref(0); // const total = ref(0); //
const contList = ref<customerFormCont[]>() const contList = ref<customerFormCont[]>()
const drawerWith = ref<number>(0); const drawerWith = ref<number>(0);
const editid = ref<string>("")
const formConfigCont = reactive<customerFormConfig>({ const formConfigCont = reactive<customerFormConfig>({
formname:"", formname:"",
formlogo:"" formlogo:""
}) })
const formId = ref<string>("");
// //
function handleQuery(){ function handleQuery(){
getCustomerFormList(queryParams) getCustomerFormList(queryParams)
@ -37,6 +43,7 @@ function handleQuery(){
function resetQuery(){} function resetQuery(){}
// //
function openDialog(){ function openDialog(){
formId.value = ""
getProductionMarkForm() getProductionMarkForm()
.then(({data})=>{ .then(({data})=>{
formConfigCont.formlogo = data.formlogo formConfigCont.formlogo = data.formlogo
@ -49,7 +56,55 @@ function openDialog(){
} }
// //
function handleDelete(){} function handleDelete(){
if(ids.value.length < 1){
ElMessage.error('没有选中要删除得数据!')
}else{
ElMessageBox.confirm(
'请问是否真的删除?删除后数据将无法找回!',
'温馨提示!',
{
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning',
draggable: true,
})
.then(() => {
editProductionFormStatus({id:ids.value.map(String),status:3,is_delete:false})
.then(({data})=>{
handleQuery()
})
})
.catch(() => {
handleQuery()
})
}
}
//
function editCustomerFormState(cont:customerFormCont){
console.log("删除单一自定义表单",cont)
editIds.push(cont.id)
ElMessageBox.confirm(
'请问是否真的删除?删除后数据将无法找回!',
'温馨提示!',
{
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning',
draggable: true,
})
.then(() => {
editProductionFormStatus({id:editIds,status:3,is_delete:false})
.then(({data})=>{
handleQuery()
editIds.splice(0,editIds.length);
})
})
.catch(() => {
handleQuery()
})
}
/** /**
* 行checkbox change事件 * 行checkbox change事件
*/ */
@ -58,7 +113,8 @@ function handleSelectionChange(selection: any) {
} }
// //
function setupCustomerForm(cont:customerFormCont){ function setupCustomerForm(cont:customerFormCont){
editid.value = cont.id
show.value = true
} }
onMounted(()=>{ onMounted(()=>{
handleQuery(); handleQuery();
@ -68,7 +124,11 @@ window.addEventListener("resize", function(){
drawerWith.value = window.innerWidth -220 drawerWith.value = window.innerWidth -220
console.log("搜索表单-->",window.innerWidth); console.log("搜索表单-->",window.innerWidth);
}) })
// //
function editCustomerForm(cont:customerFormCont){
formId.value = cont.id.toString();
drawerOpenOrClose.value = true;
}
</script> </script>
<template> <template>
@ -149,7 +209,7 @@ window.addEventListener("resize", function(){
type="primary" type="primary"
link link
size="small" size="small"
@click.stop="editCustomerForm(scope.row)"
><i-ep-edit />编辑</el-button ><i-ep-edit />编辑</el-button
> >
<el-button <el-button
@ -157,7 +217,7 @@ window.addEventListener("resize", function(){
type="danger" type="danger"
link link
size="small" size="small"
@click.stop="editCustomerFormState(scope.row)"
><i-ep-delete />删除</el-button ><i-ep-delete />删除</el-button
> >
</template> </template>
@ -172,9 +232,10 @@ window.addEventListener("resize", function(){
/> />
</el-card> </el-card>
</div> </div>
<el-drawer v-model="drawerOpenOrClose" title="I am the title" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="drawerWith" class="drawerClass"> <el-drawer v-model="drawerOpenOrClose" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="drawerWith" class="drawerClass">
<CreateForm v-model:draweropenclose="drawerOpenOrClose" :formconfigcont="formConfigCont" @handlequery="handleQuery" /> <CreateForm v-model:draweropenclose="drawerOpenOrClose" :formid="formId" :formconfigcont="formConfigCont" @handlequery="handleQuery" />
</el-drawer> </el-drawer>
<SetupConfig v-model:show="show" :editid="editid" @handle_query="handleQuery" />
</template> </template>
<style lang='scss' scoped> <style lang='scss' scoped>
.drawerClass{ .drawerClass{

123
src/views/sysworkflow/codepage/page.vue

@ -0,0 +1,123 @@
<!--
@ 作者: 秦东
@ 时间: 2023-09-01 16:16:54
@ 备注:
-->
<script lang='ts' setup>
import '@/assets/scss/element-var.scss'
import '@/assets/scss/index.scss'
import '@/assets/iconfont/iconfont.css'
import 'element-plus/dist/index.css'
import {
constGetControlByName,
constSetFormOptions,
constFormBtnEvent,
constControlChange,
constFormProps,
appendOrRemoveStyle
} from '@/api/DesignForm/utils'
const formData = {
list: [
{
type: "radio",
control:
{
modelValue: ""
},
options: [],
config:
{
optionsType: 0
},
name: "radio1693383929154",
item:
{
label: "单选框组"
}
},
{
type: "select",
control:
{
modelValue: "",
appendToBody: true
},
options: [],
config:
{
optionsType: 0
},
name: "select1693383931223",
item:
{
label: "下拉选择框"
}
},
{
type: "inputNumber",
control:
{
modelValue: 0
},
config:
{},
name: "inputNumber1693383932808",
item:
{
label: "计数器"
}
},
{
type: "button",
control:
{
label: "保存",
type: "success",
key: "submit"
},
config:
{
span: 6,
textAlign: "center"
}
},
{
type: "button",
control:
{
label: "取消",
type: "danger",
key: "reset"
},
config:
{
span: 6,
textAlign: "center"
}
}],
form:
{
size: "default",
name: "customer_form_157524328231997440",
formName: "未命名表单_157524328231997440"
},
config:
{}
}
const formProps = computed(() => {
return {
type: 3
}
})
provide(constFormProps, formProps)
</script>
<template>
<el-card shadow="never">
<ak-form :formData="formData"></ak-form>
</el-card>
</template>
<style lang='scss' scoped>
</style>

147
src/views/sysworkflow/codepage/setupconfig.vue

@ -0,0 +1,147 @@
<!--
@ 作者: 秦东
@ 时间: 2023-09-01 10:37:02
@ 备注: setupCustomerFormCont
-->
<script lang='ts' setup>
import { Hide, View } from '@element-plus/icons-vue'
import { setupCustomerFormCont } from "@/api/DesignForm/type";
import { getOneProductionForm,saveSetupCont } from '@/api/DesignForm/requestapi'
import { getOrgTreeList } from '@/api/hr/org/index'
const orgOptionsList = ref<any>(); //
const props = defineProps({
show:{
type:Boolean,
default:true
},
editid:{
type:String,
default:""
},
})
const emits = defineEmits(["update:show","handlequery"]);
const isShow = computed({
get: () => props.show,
set: (val) => {
emits("update:show", val);
},
});
const dataInfo = reactive<setupCustomerFormCont>({
id:0,
name:"",
permit:[],
states:1,
status:true
})
//
const caseProps = {
value: "id",
label: "name",
children: "child",
multiple: true,
}
//
function closeDialog(){
emits("update:show", false);
initData();
}
//
function setupSave(){
// console.log("---->",dataInfo)
dataInfo.permit = JSON.stringify(dataInfo.permit)
saveSetupCont(dataInfo)
.then((res:any) => {
// console.log("---->",res)
if(res.code == 0){
ElMessage.success(res.msg || '加载异常')
}else{
ElMessage.error(res.msg || '加载异常')
}
})
.finally(() => {
closeDialog()
})
}
//
function initData(){
dataInfo.id = 0,
dataInfo.name = "",
dataInfo.permit = [],
dataInfo.states = 1,
dataInfo.status = true
orgOptionsList.value?.splice(orgOptionsList.value.length);
}
//
watch(()=>props.show,()=>{
if(props.show){
getOneProductionForm({id:props.editid})
.then((res:any) => {
dataInfo.id = res.data.id
dataInfo.name = res.data.name
dataInfo.permit = res.data.permit_list
dataInfo.states = res.data.states
if(res.data.states == 1){
dataInfo.status = true
}else{
dataInfo.status = false
}
console.log(dataInfo)
})
.finally(()=>{})
getOrgTreeList({})
.then(({ data })=>{
orgOptionsList.value = data
})
}else{
initData()
}
})
watch(()=>dataInfo.status,()=>{
if(dataInfo.status){
dataInfo.states = 1
}else{
dataInfo.states = 2
}
})
</script>
<template>
<el-dialog v-model="isShow" title="Tips" width="30%" draggable>
<el-form :model="dataInfo" label-width="80px">
<el-form-item label="表单名称">
<el-input v-model="dataInfo.name" />
</el-form-item>
<el-form-item label="可见范围">
<el-cascader
v-model="dataInfo.permit"
collapse-tags
collapse-tags-tooltip
clearable
:options="orgOptionsList"
:props="caseProps"
/>
</el-form-item>
<el-form-item label="状态">
<el-switch
v-model="dataInfo.status"
:active-action-icon="View"
:inactive-action-icon="Hide"
active-text="启用"
inactive-text="禁用"
style=" --el-switch-off-color: #ff4949"
inline-prompt
size="large"
/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" @click="setupSave">设置</el-button>
</span>
</template>
</el-dialog>
</template>
<style lang='scss' scoped>
</style>

2
vite.config.ts

@ -52,7 +52,9 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
}, },
}, },
}, },
plugins: [ plugins: [
vue(), vue(),
UnoCSS({ UnoCSS({
/* options */ /* options */

Loading…
Cancel
Save