Browse Source

用户端自定义表单新增记录页面万册完成

v1
超级管理员 2 years ago
parent
commit
80e53e9c76
  1. 10
      src/api/DesignForm/requestapi.ts
  2. 6
      src/api/DesignForm/type.ts
  3. 58
      src/api/taskapi/management.ts
  4. 57
      src/api/taskapi/types.ts
  5. 6
      src/assets/scss/form.scss
  6. 49
      src/components/DesignForm/formControlAttr.vue
  7. 103
      src/components/DesignForm/public/form/form.vue
  8. 27
      src/components/DesignForm/public/form/formGroup.vue
  9. 3
      src/components/DesignForm/public/form/formItem.vue
  10. 2
      src/permission.ts
  11. 1
      src/styles/index.scss
  12. 1
      src/views/sysworkflow/codepage/createform.vue
  13. 12
      src/views/sysworkflow/codepage/page.vue
  14. 238
      src/views/taskplatform/taskmanagement/edittaskcustomerform.vue
  15. 207
      src/views/taskplatform/taskmanagement/taskcustomerform.vue
  16. 112
      src/views/taskplatform/taskmanagement/taskentry.vue
  17. 167
      src/views/taskplatform/taskmanagement/tasklist.vue

10
src/api/DesignForm/requestapi.ts

@ -18,7 +18,7 @@ import {
getFormTableStruct, getFormTableStruct,
optimizeRepairForm, optimizeRepairForm,
publicFormTableStruct, publicFormTableStruct,
formTabelStruct, hanziToPinyin,
gogoBackFormTabelStruct gogoBackFormTabelStruct
} from './type'; } from './type';
//自定义表单列表 //自定义表单列表
@ -159,3 +159,11 @@ export function judgeSubmitCancel(data: any){
data: data data: data
}); });
} }
//中文转拼音
export function chineseToPinyin(data: hanziToPinyin){
return request({
url: '/systemapi/public/chinese_to_pinyin',
method: 'post',
data: data
});
}

6
src/api/DesignForm/type.ts

@ -125,3 +125,9 @@ export interface gogoBackFormTabelStruct extends formTabelStruct{
integer:string; integer:string;
decimal:string; decimal:string;
} }
//汉字转拼音
export interface hanziToPinyin{
title:string;
types:number;
connector:string;
}

58
src/api/taskapi/management.ts

@ -0,0 +1,58 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import {
TaskLogQuery,
taskLogPageResult,
gainTaskListQuery,
gainTaskListPageResult,
customerFormLogo,
customerFormVersionCont
} from '@/api/taskapi/types'
/**
*
*
* @param TaskLogQuery
*/
export function currencyFormApiSubmit(url:any,data:any){
return request({
url: url,
method: 'post',
data:data
});
}
/**
*
*
* @param TaskLogQuery
*/
export function appFormdataLog(data: TaskLogQuery): AxiosPromise<taskLogPageResult> {
return request({
url: '/systemapi/task_management/app_formdata_log',
method: 'post',
data:data
});
}
/**
*
*
* @param gainTaskListQuery
*/
export function gainTaskList(data: gainTaskListQuery): AxiosPromise<gainTaskListPageResult> {
return request({
url: '/systemapi/task_management/gain_task_list',
method: 'post',
data:data
});
}
//获取自定义表单版本列表
export function haveCustomerFormVersion(data: customerFormLogo):AxiosPromise<customerFormVersionCont> {
return request({
url: '/systemapi/task_management/gain_task_versioncont',
method: 'post',
data: data
});
}

57
src/api/taskapi/types.ts

@ -0,0 +1,57 @@
//任务记录
export interface TaskLogQuery extends PageQuery {
keywords?: string;
}
//任务记录列表
export interface taskLonCont{
id:number;
title:string;
creater:number;
creater_time:number;
edit_time:number;
types:number;
version_id:number;
status:number;
masters_key:string;
}
/**
*
*/
export type taskLogPageResult = PageResult<taskLonCont[]>;
//获取可执行得任务列表
export interface gainTaskListQuery extends PageQuery {
status?: number;
}
//执行得任务记录列表
export interface taskListCont{
id:string;
name:string;
createrName:string;
createrNumber:string;
createrTame:string;
}
/**
*
*/
export type gainTaskListPageResult = PageResult<taskListCont[]>;
//自定义表单标识符
export interface customerFormLogo{
id:string
}
//自定义表单版本内容
export interface customerFormVersionCont{
id:number;
tablekey:string;
version:number;
status:number;
mastesform:string;
mastesformjson:string;
creater:number;
time:number;
editTime:number;
table_structure:string;
dict:string;
}

6
src/assets/scss/form.scss

@ -2,7 +2,7 @@
// 左侧栏 // 左侧栏
$mainColor: #66b1ff; $mainColor: #66b1ff;
.design-container {margin: 10px !important;display: flex; background-color: #FFFFFF;} .design-container {margin: 10px !important;display: flex; background-color: #FFFFFF;}
.components-list {width: 250px;padding: 8px 0;overflow-y: auto;height: calc(100vh - 104px);position: relative;overflow-x: hidden; .components-list {width: 250px;padding: 8px 0;overflow-y: auto;height: calc(100vh - 20px);position: relative;overflow-x: hidden;
.title {padding: 8px 12px;position: relative; .title {padding: 8px 12px;position: relative;
.template {position: absolute;right: 12px;top: 0;padding: 8px;cursor: pointer} .template {position: absolute;right: 12px;top: 0;padding: 8px;cursor: pointer}
} }
@ -35,7 +35,7 @@ $mainColor: #66b1ff;
.main-body {flex: 2; border-left: 1px solid #e0e0e0;border-right: 1px solid #e0e0e0;margin: 0;overflow: hidden; .main-body {flex: 2; border-left: 1px solid #e0e0e0;border-right: 1px solid #e0e0e0;margin: 0;overflow: hidden;
.empty-tips {text-align: center;width: 100%;font-size: 20px;color: #ccc;position: absolute;left: 0;top: 100px; .empty-tips {text-align: center;width: 100%;font-size: 20px;color: #ccc;position: absolute;left: 0;top: 100px;
} }
.main-form { background: #fff;border: 1px dashed #999;margin: 10px;height: calc(100vh - 165px);overflow-y: auto;overflow-x: hidden;position: relative} .main-form { background: #fff;border: 1px dashed #999;margin: 10px;height: calc(100vh - 85px);overflow-y: auto;overflow-x: hidden;position: relative}
} }
// 中间按钮工具 // 中间按钮工具
.main-tools {line-height: 26px;border-bottom: 2px solid #e4e7ed;margin-right: 10px;padding: 8px 0;display: flex;align-items: center;justify-content: flex-end; .main-tools {line-height: 26px;border-bottom: 2px solid #e4e7ed;margin-right: 10px;padding: 8px 0;display: flex;align-items: center;justify-content: flex-end;
@ -119,7 +119,7 @@ $mainColor: #66b1ff;
.group {width: 25%} .group {width: 25%}
} }
} }
.sidebar-tools {width: 300px;right: 0;top: 0;overflow-y: auto;box-sizing: border-box;padding-bottom: 10px;bottom: 0; height: calc(100vh - 60px); .sidebar-tools {width: 300px;right: 0;top: 0;overflow-y: auto;box-sizing: border-box;padding-bottom: 10px;bottom: 0; height: calc(100vh - 30px);
.form { .form {
.el-form-item {margin-bottom: 10px;} .el-form-item {margin-bottom: 10px;}
} }

49
src/components/DesignForm/formControlAttr.vue

@ -12,6 +12,8 @@ import { ElMessage } from 'element-plus'
import { formatNumber } from '@/api/DesignForm/utils' import { formatNumber } from '@/api/DesignForm/utils'
import { PublicAtrr } from '@/api/DesignForm/types' import { PublicAtrr } from '@/api/DesignForm/types'
import { chineseToPinyin } from '@/api/DesignForm/requestapi'
const props = withDefaults( // const props = withDefaults( //
defineProps<{ defineProps<{
formData: any formData: any
@ -797,8 +799,42 @@ const controlChange = (obj: any, val: any) => {
// value:type===inputSlot使v-model // value:type===inputSlot使v-model
break break
case 'labelNameVal': case 'labelNameVal':
chineseToPinyin({title:val,types:8,connector:""})
.then((data:any)=>{
if(data.code == 0){
if(data.data != ""){
if(!fileSignAry.includes(data.data)){
controlData.value.name = data.data
fileSignAry.push(data.data)
}else{
let isEnd = true;
do{
let titleVal = data.data + Rand(10000000,99999999)
if(!fileSignAry.includes(titleVal)){
controlData.value.name = titleVal;
fileSignAry.push(titleVal);
isEnd=false;
}
}while(isEnd);
}
}else{
if(!fileSignAry.includes(val)){
controlData.value.name = val controlData.value.name = val
fileSignAry.push(val) fileSignAry.push(val)
}else{
let titleVal = val + Rand(10000000,99999999)
if(!fileSignAry.includes(titleVal)){
controlData.value.name = titleVal;
fileSignAry.push(titleVal);
}
}
}
}
})
console.log("字段编辑--fileSignAry--》",fileSignAry) console.log("字段编辑--fileSignAry--》",fileSignAry)
break break
} }
@ -807,6 +843,19 @@ const controlChange = (obj: any, val: any) => {
obj.path && getPropByPath(controlData.value, obj.path, newVal) obj.path && getPropByPath(controlData.value, obj.path, newVal)
} }
} }
/**
* 获取非负整数随机数
* @param Min 最小整数
* @param Max 最大整数
* @returns 随机数
*/
const Rand = (Min: number, Max: number) => {
switch (Min) {
case 0: return Math.round(Math.random() * Max);
case 1: return Math.ceil(Math.random() * Max);
default: return Math.round(Math.random() * (Max - Min) + Min);
}
}
// //
const getPropByPath = (obj: any, path: string, val: any) => { const getPropByPath = (obj: any, path: string, val: any) => {
let tempObj = obj let tempObj = obj

103
src/components/DesignForm/public/form/form.vue

@ -19,6 +19,8 @@ import {
import formatResult from '@/utils/DesignForm/formatResult' import formatResult from '@/utils/DesignForm/formatResult'
import formChangeValue from '@/utils/DesignForm/formChangeValue' import formChangeValue from '@/utils/DesignForm/formChangeValue'
import { jsonParseStringify } from '@/utils/DesignForm' import { jsonParseStringify } from '@/utils/DesignForm'
//
import { currencyFormApiSubmit } from '@/api/taskapi/management'
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@ -32,10 +34,12 @@ const props = withDefaults(
editUrl?: string // url editUrl?: string // url
beforeSubmit?: Function | string // beforeSubmit?: Function | string //
afterSubmit?: Function // return false afterSubmit?: Function // return false
closeAppSubmit?: Function
value?: { [key: string]: any } // setValue value?: { [key: string]: any } // setValue
options?: { [key: string]: any } // setOptions options?: { [key: string]: any } // setOptions
dict?: object // dict?: object //
isSearch?: boolean // 使 isSearch?: boolean // 使
}>(), }>(),
{ {
type: 1, // 123 4 5 type: 1, // 123 4 5
@ -120,6 +124,7 @@ const model = ref<any>({})
const getInitModel = () => { const getInitModel = () => {
const obj = {} const obj = {}
forEachGetFormModel(props.formData.list, obj) forEachGetFormModel(props.formData.list, obj)
console.log("obj===>",obj)
model.value = obj model.value = obj
} }
watch( watch(
@ -220,6 +225,11 @@ provide(constGetControlByName, getControlByName)
const ruleForm = ref() const ruleForm = ref()
const validate = (callback: any) => { const validate = (callback: any) => {
ruleForm.value.validate((valid: boolean, fields: any) => { ruleForm.value.validate((valid: boolean, fields: any) => {
console.log("ruleForm.value--->filter-->",ruleForm.value)
console.log("getValue--->fields-->",fields)
console.log("getValue--->valid-->",valid)
let fieldValue = fields let fieldValue = fields
if (valid) { if (valid) {
// //
@ -230,6 +240,8 @@ const validate = (callback: any) => {
} }
// //
const getValue = (filter?: boolean) => { const getValue = (filter?: boolean) => {
console.log("getValue--->filter-->",filter)
console.log("getValue--->model-->",model)
if (filter) { if (filter) {
const obj: any = {} const obj: any = {}
for (const key in model.value) { for (const key in model.value) {
@ -292,18 +304,33 @@ provide(constFormBtnEvent, (obj: any) => {
resetFields() // resetFields() //
break break
case 'cancel': // case 'cancel': //
router.go(-1) // // router.go(-1) //
let notReturn
if (typeof props.closeAppSubmit === 'function') {
notReturn = props.closeAppSubmit()
}
break break
} }
}) })
// //
const getData = (params = {}) => { const getData = (params = {}) => {
const requestUrl = props.formData.config?.requestUrl || props.requestUrl let requestUrl = props.formData.config?.requestUrl || props.requestUrl
if (props.type === 5 || !requestUrl || props.isSearch) { if (props.type === 5 || !requestUrl || props.isSearch) {
console.error('执行了获取数据方法,但配置有误!') console.error('执行了获取数据方法,但配置有误!')
return return
} }
switch(requestUrl){
case "getFormContent":
requestUrl ="/systemapi/task_management/look_customer_formdata"
break;
case "saveFormContent":
requestUrl ="/systemapi/task_management/customer_form_adddata"
break;
case "editFormContent":
requestUrl ="/systemapi/task_management/customer_form_editdata"
break;
default:
}
loading.value = true loading.value = true
const newParams: any = params const newParams: any = params
// 使propsevents使使 // 使propsevents使使
@ -319,14 +346,11 @@ const getData = (params = {}) => {
// //
return return
} }
currencyFormApiSubmit(requestUrl, newParams2 ?? newParams)
console.log("res------执行了获取数据方法,但配置有误----->", requestUrl,newParams2,newParams) .then((res: any) => {
getRequest(requestUrl, newParams2 ?? newParams)
.then(res => {
// console.log(res)
loading.value = false loading.value = false
const result = res.data const result = res.data
console.log("停止数据请求--->",res)
if (result) { if (result) {
let formatRes: any = result let formatRes: any = result
// //
@ -354,15 +378,18 @@ const getData = (params = {}) => {
}) })
} }
}) })
.catch((res: any) => { .catch(res => {
loading.value = false loading.value = false
return ElMessage.error(res.message) return ElMessage.error(res.message)
}) })
console.log("res------执行了获取数据方法,但配置有误----->", requestUrl,newParams2,newParams)
} }
const submit = (params = {}) => { const submit = (params = {}) => {
const addUrl = props.formData.config?.addUrl || props.addUrl let addUrl = props.formData.config?.addUrl || props.addUrl
const editUrl = props.formData.config?.editUrl || props.editUrl let editUrl = props.formData.config?.editUrl || props.editUrl
const apiUrl = props.type === 1 ? addUrl : editUrl let apiUrl = props.type === 1 ? addUrl : editUrl
if (props.isSearch || !apiUrl || loading.value) { if (props.isSearch || !apiUrl || loading.value) {
if (!props.isSearch && !apiUrl) { if (!props.isSearch && !apiUrl) {
console.error( console.error(
@ -372,9 +399,28 @@ const submit = (params = {}) => {
// //
return return
} }
switch(apiUrl){
case "getFormContent":
apiUrl ="/systemapi/task_management/look_customer_formdata"
break;
case "saveFormContent":
apiUrl ="/systemapi/task_management/customer_form_adddata"
break;
case "editFormContent":
apiUrl ="/systemapi/task_management/customer_form_editdata"
break;
default:
}
validate((valid: boolean, fields: any) => { validate((valid: boolean, fields: any) => {
if (valid) { if (valid) {
const formatParams = Object.assign({}, fields, params) const formatParams = Object.assign({}, fields, params)
// console.log("params--->",params)
// console.log("fields--->",fields)
// console.log("formatParams-Object-->",formatParams)
let submitParams let submitParams
const beforeSubmit = props.formData.events?.beforeSubmit const beforeSubmit = props.formData.events?.beforeSubmit
if (beforeSubmit) { if (beforeSubmit) {
@ -392,15 +438,29 @@ const submit = (params = {}) => {
if (submitParams === false) { if (submitParams === false) {
return return
} }
loading.value = true // console.log("beforeSubmit--->",beforeSubmit)
// console.log("props.beforeSubmit--->",props.beforeSubmit)
// console.log("props.beforeSubmit--->",props.beforeSubmit)
// loading.value = true
// console.log("apiUrl--->",apiUrl)
// console.log("submitParams--->",submitParams)
console.log("formatParams--->",formatParams)
// //
getRequest(apiUrl, submitParams ?? formatParams) currencyFormApiSubmit(apiUrl, submitParams ?? formatParams)
.then((res: any) => { .then((res: any) => {
afterSubmit('success', res) afterSubmit('success', res)
}) })
.catch(res => { .catch(res => {
afterSubmit('fail', res) afterSubmit('fail', res)
}) })
// getRequest(apiUrl, submitParams ?? formatParams)
// .then((res: any) => {
// afterSubmit('success', res)
// })
// .catch(res => {
// afterSubmit('fail', res)
// })
} else { } else {
// //
afterSubmit('validate', fields) afterSubmit('validate', fields)
@ -415,7 +475,16 @@ const afterSubmit = (type: string, res: any) => {
notReturn = afterSubmit(type, res) notReturn = afterSubmit(type, res)
} else if (typeof props.afterSubmit === 'function') { } else if (typeof props.afterSubmit === 'function') {
notReturn = props.afterSubmit(type, res) notReturn = props.afterSubmit(type, res)
} // console.log("notReturn--123456->",props.afterSubmit)
}
// console.log("notReturn--->",notReturn)
// console.log("afterSubmit--->",afterSubmit)
// console.log("typeof afterSubmit--->",typeof afterSubmit)
// console.log("type--->",type)
// console.log("res--->",res)
// console.log("props.formData.events--->",props.formData.events)
// console.log("props.formData.events?.afterSubmit--->",props.formData.events?.afterSubmit)
loading.value = false loading.value = false
// //
// resetFields() // resetFields()
@ -424,7 +493,7 @@ const afterSubmit = (type: string, res: any) => {
return return
} }
if (type === 'success') { if (type === 'success') {
ElMessage.success(res.message || '保存成功!') ElMessage.success(res.msg || '保存成功!')
} else if (type === 'fail') { } else if (type === 'fail') {
ElMessage.error(res.message || '保存失败!') ElMessage.error(res.message || '保存失败!')
} }

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

@ -52,8 +52,19 @@ const activeKey = computed(() => {
}) })
// //
const notNested = (type: string) => { const notNested = (type: string) => {
// const controlType = ['grid', 'table', 'tabs', 'div', 'flex', 'card']
const controlType = ['grid', 'tabs', 'div', 'card']
// let kjkdh = controlType.includes(type)
// console.log("",kjkdh,controlType)
return controlType.includes(type)
// return false
}
const notNestedTableFlex = (type: string) => {
const controlType = ['grid', 'table', 'tabs', 'div', 'flex', 'card'] const controlType = ['grid', 'table', 'tabs', 'div', 'flex', 'card']
// let kjkdh = controlType.includes(type)
// console.log("",kjkdh,controlType)
return controlType.includes(type) return controlType.includes(type)
// return false
} }
// //
const click = (action: string, index: number, item?: any) => { const click = (action: string, index: number, item?: any) => {
@ -86,7 +97,8 @@ const draggableAdd = (evt: any) => {
const key = new Date().getTime().toString() const key = new Date().getTime().toString()
const obj: any = dataList.value[newIndex] const obj: any = dataList.value[newIndex]
const isNested = evt.target && evt.target.getAttribute('data-type') // const isNested = evt.target && evt.target.getAttribute('data-type') //
if (isNested === 'not-nested' && notNested(obj.type)) { // console.log("",obj,isNested)
if ((isNested === 'not-nested' && notNested(obj.type)) || ((isNested === 'not-table' || isNested === 'not-flex') && notNestedTableFlex(obj.type))) {
dataList.value.splice(newIndex, 1) dataList.value.splice(newIndex, 1)
return return
} }
@ -158,7 +170,8 @@ const groupClick = (item: any, ele?: string) => {
store.setControlAttr(item) store.setControlAttr(item)
// grid // grid
state.gridAdd = item.type === 'grid' state.gridAdd = item.type === 'grid'
state.clone = !notNested(item.type) // state.clone = !notNested(item.type)
state.clone = !notNestedTableFlex(item.type)
} }
// //
const getFormItemStyle = (ele: FormList) => { const getFormItemStyle = (ele: FormList) => {
@ -307,7 +320,8 @@ onUnmounted(() => {
<!--表格组件--> <!--表格组件-->
<template v-else-if="element.type === 'table'"> <template v-else-if="element.type === 'table'">
<div class="form-table" v-if="type === 5"> <div class="form-table" v-if="type === 5">
<form-group :data="element.list" data-type="not-nested" /> <!-- <form-group :data="element.list" data-type="not-nested" /> -->
<form-group :data="element.list" data-type="not-table" />
</div> </div>
<child-table v-else :data="element" /> <child-table v-else :data="element" />
</template> </template>
@ -370,10 +384,15 @@ onUnmounted(() => {
</template> </template>
<!--弹性布局--> <!--弹性布局-->
<template v-else-if="element.type === 'flex'"> <template v-else-if="element.type === 'flex'">
<form-group <!-- <form-group
:data="element.list" :data="element.list"
data-type="not-nested" data-type="not-nested"
v-if="type === 5" v-if="type === 5"
/> -->
<form-group
:data="element.list"
data-type="not-flex"
v-if="type === 5"
/> />
<flex-box :data="element" v-else /> <flex-box :data="element" v-else />
<el-button <el-button

3
src/components/DesignForm/public/form/formItem.vue

@ -556,6 +556,7 @@ const imgUploadApiUrl = import.meta.env.VITE_APP_BASE_API+"/api/upordown"
:options="options" :options="options"
v-model="value" v-model="value"
/> />
<el-time-picker v-if="data.type=='timePicker'" v-model="value" />
<component <component
v-if=" v-if="
[ [
@ -564,7 +565,7 @@ const imgUploadApiUrl = import.meta.env.VITE_APP_BASE_API+"/api/upordown"
'switch', 'switch',
'inputNumber', 'inputNumber',
'colorPicker', 'colorPicker',
'timePicker',
'datePicker', 'datePicker',
'component', 'component',
'expand-user' 'expand-user'

2
src/permission.ts

@ -41,7 +41,7 @@ router.beforeEach(async (to, from, next) => {
// const { roles } = await userStore.getInfo(); // const { roles } = await userStore.getInfo();
const { perms } = await userStore.getInfo(); const { perms } = await userStore.getInfo();
const accessRoutes = await permissionStore.generateRoutes(perms); const accessRoutes = await permissionStore.generateRoutes(perms);
// console.log("路由权限--perms--》",perms); // console.log("路由权限--perms--》",accessRoutes);
accessRoutes.forEach((route) => { accessRoutes.forEach((route) => {
router.addRoute(route); router.addRoute(route);
}); });

1
src/styles/index.scss

@ -33,3 +33,4 @@
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: #b6b7b9; background-color: #b6b7b9;
} }

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

@ -378,6 +378,7 @@ const getInitData = () => {
case 'beforeSubmit': case 'beforeSubmit':
case 'afterResponse': case 'afterResponse':
case 'afterSubmit': case 'afterSubmit':
case 'closeSubmit':
case 'change': case 'change':
if (!state.formData.events) { if (!state.formData.events) {
state.formData.events = {} state.formData.events = {}

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

@ -96,14 +96,14 @@ onMounted(() => {
<el-card v-loading="state.loading" shadow="never" style="min-height: 300px"> <el-card v-loading="state.loading" shadow="never" style="min-height: 300px">
<ak-form <ak-form
ref="formEl" ref="formEl"
:formData="state.formData" :form-data="state.formData"
:type="formType" :type="formType"
:dict="state.dict" :dict="state.dict"
requestUrl="getFormContent" request-url="getFormContent"
addUrl="saveFormContent" add-url="saveFormContent"
editUrl="editFormContent" edit-url="editFormContent"
:beforeSubmit="beforeSubmit" :before-submit="beforeSubmit"
:afterSubmit="afterSubmit" :after-submit="afterSubmit"
/> />
</el-card> </el-card>
</template> </template>

238
src/views/taskplatform/taskmanagement/edittaskcustomerform.vue

@ -0,0 +1,238 @@
<!--
@ 作者: 秦东
@ 时间: 2023-09-26 09:12:55
@ 备注: 编辑自定义表单数据
-->
<script lang='ts' setup>
import { ref, reactive, onMounted, computed, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import {
string2json,
stringToObj
} from '@/utils/DesignForm/form'
import { haveCustomerFormVersion } from '@/api/taskapi/management'
import { judgeSubmitCancel } from '@/api/DesignForm/requestapi'
import '@/assets/scss/element-var.scss'
import '@/assets/scss/index.scss'
import '@/assets/iconfont/iconfont.css'
import 'element-plus/dist/index.css'
const props = defineProps({
iseditopen:{
type:Boolean,
default:true
},
versionid:{
type:String,
default:""
},
versiontitle:{
type:String,
default:""
},
masterskey:{
type:String,
default:""
},
infoid:{
type:String,
default:""
}
})
const submitButton = {
type: "div",
control:{},
config:{
textAlign: "center",
span: ""
},
list: [
{
type: "button",
control:{
label: "保存",
type: "primary",
key: "submit"
},
config:{
textAlign: "center"
}
}
]
}
const cancelButton = {
type: "div",
control:{},
config:{
textAlign: "center",
span: ""
},
list: [
{
type: "button",
control:{
label: "返回",
type: "danger",
key: "cancel"
},
config:{
textAlign: "center"
}
}
]
}
const submitAndCancelButton = {
type: "div",
control:{},
config:{
span: 24,
textAlign: "center"
},
list: [
{
type: "button",
control:{
label: "保存",
type: "primary",
key: "submit"
},
config:{
span: 0
}
},
{
type: "button",
control:{
label: "返回",
type: "danger",
key: "cancel"
},
config:{
span: 0
}
}
]
};
const loadingData = ref(false)
const formEl = ref()
const state = reactive<any>({
type: 1, // 123 4 5
formData: {
list: [],
form: {},
config: {}
},
dict: {},
formId: props.versionid,
id: props.masterskey,
loading: true
})
const formType = computed(() => {
// id
if (props.infoid) {
return 2
} else {
return 1
}
})
const emits = defineEmits(["update:iseditopen"]);
const isShow = computed({
get: () => props.iseditopen,
set: (val) => {
emits("update:iseditopen", val);
},
});
//
const getTaskFormData = () =>{
loadingData.value = true;
haveCustomerFormVersion({id:props.versionid})
.then(({ data }) =>{
console.log("表单数据",data)
state.id=props.versionid
state.formData = stringToObj(data.mastesform)
state.dict = string2json(data.dict)
judgeSubmitCancel({"name":data.mastesformjson})
.then((data:any) =>{
if(data.code == 0){
if (data.data == 3 || data.data == 4){
state.formData.list.push(submitButton)
}
}
})
})
.finally(()=>{
formEl.value.getData({ formId: props.versionid, id: props.masterskey})
loadingData.value = false;
})
}
const drawerWith = ref<number>(0);
onMounted(()=>{
drawerWith.value = window.innerWidth - 220
});
window.addEventListener("resize", function(){
drawerWith.value = window.innerWidth -220
})
const beforeSubmit = (params: any) => {
params.formId = props.masterskey
params.id = props.versionid
// emits("update:isopen", false);
console.log(params,"===========================>")
return params
}
const afterSubmit = (type: string) => {
if (type === 'success') {
// router.go(-1)
console.log("表单提交成功")
closeAppSubmit();
}
}
const closeAppSubmit = () => {
emits("update:iseditopen", false);
initData();
}
const initData = () => {
state.formData = {
list: [],
form: {},
config: {}
};
state.dict = {};
state.formId = 0;
state.id = 0;
state.loading = true;
}
watch(()=>props.iseditopen,()=>{
if(props.iseditopen){
getTaskFormData();
}else{
initData()
}
})
</script>
<template>
<el-drawer v-model="isShow" v-loading="loadingData" :title="versiontitle" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="drawerWith" class="drawerClass" >
<div class="drawerBody">
<ak-form
ref="formEl"
:form-data="state.formData"
:type="formType"
:dict="state.dict"
request-url="getFormContent"
add-url="saveFormContent"
edit-url="editFormContent"
:before-submit="beforeSubmit"
:after-submit="afterSubmit"
:close-app-submit="closeAppSubmit"
/>
</div>
</el-drawer>
</template>
<style lang='scss' scoped>
</style>

207
src/views/taskplatform/taskmanagement/taskcustomerform.vue

@ -0,0 +1,207 @@
<!--
@ 作者: 秦东
@ 时间: 2023-09-22 15:26:36
@ 备注: 回显表单
-->
<script lang='ts' setup>
import { ref, reactive, onMounted, computed, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import {
string2json,
stringToObj
} from '@/utils/DesignForm/form'
import { haveCustomerFormVersion } from '@/api/taskapi/management'
import { judgeSubmitCancel } from '@/api/DesignForm/requestapi'
import '@/assets/scss/element-var.scss'
import '@/assets/scss/index.scss'
import '@/assets/iconfont/iconfont.css'
import 'element-plus/dist/index.css'
const props = defineProps({
isopen:{
type:Boolean,
default:true
},
versionid:{
type:String,
default:""
},
versiontitle:{
type:String,
default:""
},
infoid:{
type:String,
default:""
}
})
const submitButton = {
type: "div",
control:
{},
config:
{
textAlign: "center",
span: ""
},
list: [
{
type: "button",
control:
{
label: "保存",
type: "primary",
key: "submit"
},
config:
{
textAlign: "center"
}
}]
}
const loadingData = ref(false)
const formEl = ref()
const router = useRouter()
const state = reactive<any>({
type: 1, // 123 4 5
formData: {
list: [],
form: {},
config: {}
},
dict: {},
formId: props.versionid,
id: 0,
loading: true
})
const formType = computed(() => {
// id
if (props.infoid) {
return 2
} else {
return 1
}
})
const emits = defineEmits(["update:isopen","searchquery"]);
const drawerOpenOrClose = computed({
get: () => props.isopen,
set: (val) => {
emits("update:isopen", val);
},
});
//
const getTaskFormData = () =>{
loadingData.value = true;
haveCustomerFormVersion({id:props.versionid})
.then(({ data }) =>{
console.log("表单数据",data)
state.id=props.versionid
state.formData = stringToObj(data.mastesform)
state.dict = string2json(data.dict)
judgeSubmitCancel({"name":data.mastesformjson})
.then((data:any) =>{
if(data.code == 0){
if (data.data == 3 || data.data == 4){
state.formData.list.push(submitButton)
}
}
})
})
.finally(()=>{
loadingData.value = false;
})
}
const drawerWith = ref<number>(0);
onMounted(()=>{
drawerWith.value = window.innerWidth - 220
});
window.addEventListener("resize", function(){
drawerWith.value = window.innerWidth -220
})
const beforeSubmit = (params: any) => {
params.formId = props.versionid
params.id = ""
// emits("update:isopen", false);
return params
}
const afterSubmit = (type: string) => {
if (type === 'success') {
// router.go(-1)
console.log("表单提交成功")
emits("searchquery");
closeAppSubmit();
}
}
const closeAppSubmit = () => {
emits("update:isopen", false);
initData();
}
const initData = () => {
state.formData = {
list: [],
form: {},
config: {}
};
state.dict = {};
state.formId = 0;
state.id = 0;
state.loading = true;
}
watch(()=>props.isopen,()=>{
if(props.isopen){
getTaskFormData();
}else{
initData()
}
})
</script>
<template>
<el-drawer v-model="drawerOpenOrClose" v-loading="loadingData" :title="versiontitle" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="drawerWith" class="drawerClass" >
<div class="drawerBody">
<ak-form
ref="formEl"
:form-data="state.formData"
:type="formType"
:dict="state.dict"
request-url="getFormContent"
add-url="saveFormContent"
edit-url="editFormContent"
:before-submit="beforeSubmit"
:after-submit="afterSubmit"
:close-app-submit="closeAppSubmit"
/>
</div>
</el-drawer>
</template>
<style lang='scss'>
.drawerClass ::v-deep.el-drawer__header {
font-size: 22px;
text-align: center;
margin-bottom: 0px;
padding: 0;
.el-drawer__close-btn{
background-color: rgb(255, 77, 79);
color: white;
}
}
::v-deep .el-drawer__body {
padding: 0px;
}
.details {
width: 80%;
margin-right: 0px;
margin-left: 20%;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.drawerBody{
padding: 20px;
}
</style>

112
src/views/taskplatform/taskmanagement/taskentry.vue

@ -0,0 +1,112 @@
<!--
@ 作者: 秦东
@ 时间: 2023-09-22 08:59:47
@ 备注: 任务列表
-->
<script lang='ts' setup>
import { gainTaskListQuery,taskListCont } from '@/api/taskapi/types'
import { gainTaskList } from '@/api/taskapi/management'
const props = defineProps({
isshow:{
type:Boolean,
default:true
}
})
const taskLoding = ref(false);
const gainTaskListInfo = reactive<gainTaskListQuery>({
page:1,
pagesize:9,
status:1
});
const taskTotal = ref<number>(0)
const taskList = ref<taskListCont[]>();
const emits = defineEmits(["update:isshow","opencustomerform"]);
const isShow = computed({
get: () => props.isshow,
set: (val) => {
emits("update:isshow", val);
},
});
//
const gainTaskContAry = () => {
taskLoding.value = true
gainTaskList(gainTaskListInfo)
.then(({data})=>{
console.log(data)
if(data != null){
taskList.value = data.list;
taskTotal.value = data.total;
}
})
.finally(()=>{
taskLoding.value = false
})
}
//
const initData = () => {
gainTaskListInfo.page = 1;
gainTaskListInfo.pagesize = 9;
gainTaskListInfo.status = 1;
}
//
const taskEntryClose = () => {
emits("update:isshow", false);
initData();
}
//
watch(() => props.isshow,(val:boolean)=>{
if(val) {
gainTaskContAry();
}
})
//使
const startUsing = (id:string,title:string) => {
taskEntryClose();
emits("opencustomerform",id,title)
}
</script>
<template>
<el-dialog
v-model="isShow"
title="选择任务"
width="845"
:before-close="taskEntryClose"
>
<el-space v-loading="taskLoding" wrap >
<el-card v-for="item in taskList" :key="item.id" style="width: 260px">
<el-space direction="vertical" style="width: 100%;">
<div>
<el-space wrap>
<el-text class="mx-1">{{ item.name }}</el-text>
<el-text class="mx-1">设计者{{ item.createrName }}{{ item.createrNumber }}</el-text>
<el-text class="mx-1">发布时间{{ item.createrTame }}</el-text>
</el-space>
</div>
<div class="taskButton"><el-button type="primary" @click.stop="startUsing(item.id,item.name)">使用</el-button></div>
</el-space>
</el-card>
</el-space>
<template #footer>
<pagination
v-if="taskTotal > 0"
v-model:total="taskTotal"
v-model:page="gainTaskListInfo.page"
v-model:limit="gainTaskListInfo.pagesize"
align="center"
@pagination="gainTaskContAry"
/>
</template>
</el-dialog>
</template>
<style lang='scss' scoped>
.taskButton{
width: 100%;
text-align: center;
}
</style>

167
src/views/taskplatform/taskmanagement/tasklist.vue

@ -4,10 +4,175 @@
@ 备注: 任务 @ 备注: 任务
--> -->
<script lang='ts' setup> <script lang='ts' setup>
import { TaskLogQuery,taskLonCont } from '@/api/taskapi/types'
import { appFormdataLog } from '@/api/taskapi/management'
//
import TaskEntry from '@/views/taskplatform/taskmanagement/taskentry.vue'
import TaskCustomerForm from '@/views/taskplatform/taskmanagement/taskcustomerform.vue'
import EditTaskCustomerForm from '@/views/taskplatform/taskmanagement/edittaskcustomerform.vue'
const loading = ref(false)
const searckFormRef = ref(ElForm);
const ids = ref<number[]>([]); //Id
const total = ref<number>(0)
const searchData = reactive<TaskLogQuery>({
page:1,
pagesize:15
})
const formLogList = ref<taskLonCont[]>()
const openTaskDialog = ref(false)
const versionId = ref<string>()
const mastersKey = ref<string>()
const versionTitle = ref<string>()
const openTaskDrawer = ref(false)
const openEditTaskDrawer = ref(false)
//
const searchQuery = () =>{
loading.value = true;
appFormdataLog(searchData)
.then(({data}) =>{
console.log(data)
if(data != null){
formLogList.value = data.list;
total.value = data.total;
}
})
.finally(()=>{
loading.value = false
})
}
//
const resetQuery = () =>{
searckFormRef.value.resetFields();
initData();
}
//
const initData = () =>{
searchData.page = 1;
searchData.pagesize = 15;
searchData.keywords = ""
}
/**
* 行checkbox change事件
*/
function handleSelectionChange(selection: any) {
ids.value = selection.map((item: any) => item.id);
}
//
const addDialog = () =>{
openTaskDialog.value = true;
}
//
const batchDeleteLog = () =>{
}
//
const editFormLogDialog = (val:any) =>{
console.log("编辑表单",val)
versionId.value = val.version_id.toString()
versionTitle.value = val.title
mastersKey.value = val.mastersKeyStr.toString()
openEditTaskDrawer.value = true
}
//
const DeleteFormLog = (id:any) =>{
}
//
onMounted(() => {
searchQuery();
});
//
const openCustomerForm = (id:string,title:string) =>{
versionId.value = id
versionTitle.value = title
openTaskDrawer.value = true
// console.log(id,title)
}
</script> </script>
<template> <template>
<div>任务列表</div> <div class="app-container">
<div class="search">
<el-form ref="searckFormRef" :model="searchData" :inline="true">
<el-form-item label="关键字" prop="name">
<el-input
v-model="searchData.keywords"
placeholder="标题"
clearable
@keyup.enter="searchQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchQuery()"><i-ep-search />搜索</el-button>
<el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
</el-form-item>
</el-form>
</div>
<el-card shadow="never">
<template #header>
<el-button type="success" @click="addDialog()"><i-ep-plus />新增</el-button>
<el-button
type="danger"
:disabled="ids.length === 0"
@click="batchDeleteLog()"
>
<i-ep-delete />删除
</el-button>
</template>
<el-table
v-loading="loading"
highlight-current-row
:data="formLogList"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column fixed label="标题" prop="title" />
<el-table-column label="发起人" >
<template #default="scope">
{{ scope.row.createrName }}({{ scope.row.createrNumber }})
</template>
</el-table-column>
<el-table-column label="发起时间" prop="createrTame" />
<el-table-column fixed="right" label="操作" align="center" width="220">
<template #default="scope">
<el-button
type="primary"
link
size="small"
@click.stop="editFormLogDialog(scope.row)"
>
<i-ep-edit />编辑
</el-button>
<el-button
type="primary"
link
size="small"
@click.stop="DeleteFormLog(scope.row.id)"
>
<i-ep-delete />删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-if="total > 0"
v-model:total="total"
v-model:page="searchData.page"
v-model:limit="searchData.pagesize"
@pagination="searchQuery"
/>
</el-card>
<TaskEntry v-model:isshow="openTaskDialog" @opencustomerform="openCustomerForm" />
<TaskCustomerForm v-model:isopen="openTaskDrawer" :versionid="versionId" :versiontitle="versionTitle" @searchquery="searchQuery" />
<EditTaskCustomerForm v-model:iseditopen="openEditTaskDrawer" :versionid="versionId" :versiontitle="versionTitle" :masterskey="mastersKey" />
</div>
</template> </template>
<style lang='scss' scoped> <style lang='scss' scoped>

Loading…
Cancel
Save