wangyifang
/
cz-hjjc-oa
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
master
xy 1 year ago
parent 3e26a1ba29
commit 45617ba587
8 changed files with 744 additions and 171 deletions
Show Stats Download Patch File Download Diff File

17
src/api/flow/index.js
Unescape View File

@ -0,0 +1,17 @@
import request from '@/utils/request'
export function flow(isLoading=false) {
return request({
method: 'get',
url: '/api/oa/flow',
isLoading
})
}
export function preConfig(custom_model_id,isLoading=false) {
return request({
method: 'get',
url: `/api/oa/flow/create-pre/${custom_model_id}`,
isLoading
})
}

1
src/main.js
Unescape View File

@ -47,6 +47,7 @@ Vue.config.productionTip = false
//vant
import Vant from 'vant'
import 'vant/lib/index.css';
Vue.use(Vant)
//moment

9
src/router/index.js
Unescape View File

@ -61,10 +61,15 @@ export const constantRoutes = [
redirect: '/flow/create',
meta: { title: '流程', icon: 'tree' },
children: [{
path: 'index',
name: 'flowIndex',
component: () => import('@/views/flow/index.vue'),
meta: { title: '流程创建', icon: 'tree' }
},{
path: 'create',
name: 'create',
component: () => import('@/views/flow/create'),
meta: { title: '流程创建', icon: 'tree' }
hidden: true
}]
}
@ -78,7 +83,7 @@ export const asyncRoutes = [
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
routes: constantRoutes,
})
const router = createRouter()

223
src/utils/formBuilder.js
Unescape View File

@ -2,19 +2,21 @@ import formBuilderMap from './formBuilderMap'
import { CreateElement } from 'vue'
import moment from 'moment'
import { getToken } from "@/utils/auth";
import {deepCopy} from "@/utils/index";
/**
* @param {String} device 'desktop' or 'mobile'
* @param {Object} info field参数
* @param {CreateElement} h
* @param {Object} pForm 父级表单对象
**/
export default function (device, info,h ) {
export default function formBuilder (device, info,h,pForm) {
let formItem;
if (device === 'desktop') {
switch (info.type) {
case 'text':
formItem = h(formBuilderMap(device).get(info.type),{
props: {
value: this.form[info.name],
value: pForm ? pForm[info.name] : this.form[info.name],
clearable: true,
placeholder: info.help_text
},
@ -23,7 +25,7 @@ export default function (device, info,h ) {
},
on: {
input: e => {
this.form[info.name] = e
pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
}
}
})
@ -35,7 +37,7 @@ export default function (device, info,h ) {
autosize: {
minRows: 2
},
value: this.form[info.name],
value: pForm ? pForm[info.name] : this.form[info.name],
clearable: true,
placeholder: info.help_text
},
@ -44,7 +46,7 @@ export default function (device, info,h ) {
},
on: {
input: e => {
this.form[info.name] = e
pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
}
}
})
@ -55,7 +57,7 @@ export default function (device, info,h ) {
type: 'date',
'value-format': 'yyyy-MM-dd',
format: 'yyyy年MM月dd日',
value: this.form[info.name],
value: pForm ? pForm[info.name] : this.form[info.name],
clearable: true,
placeholder: info.help_text,
'picker-options': {
@ -114,7 +116,7 @@ export default function (device, info,h ) {
},
on: {
input: e => {
this.$set(this.form,info.name,e)
pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
}
}
})
@ -125,7 +127,7 @@ export default function (device, info,h ) {
type: 'datetime',
'value-format': 'yyyy-MM-dd',
format: 'yyyy年MM月dd日',
value: this.form[info.name],
value: pForm ? pForm[info.name] : this.form[info.name],
clearable: true,
placeholder: info.help_text,
'picker-options': {
@ -184,7 +186,7 @@ export default function (device, info,h ) {
},
on: {
input: e => {
this.$set(this.form,info.name,e)
pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
}
}
})
@ -192,7 +194,7 @@ export default function (device, info,h ) {
case 'select':
formItem = h(formBuilderMap(device).get(info.type),{
props: {
value: this.form[info.name],
value: pForm ? pForm[info.name] : this.form[info.name],
clearable: true,
placeholder: info.help_text
},
@ -201,7 +203,7 @@ export default function (device, info,h ) {
},
on: {
input: e => {
this.$set(this.form,info.name,e)
pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
}
}
},[1,2,3].map(option => (
@ -216,14 +218,14 @@ export default function (device, info,h ) {
case 'radio':
formItem = h(formBuilderMap(device).get(info.type),{
props: {
value: this.form[info.name],
value: pForm ? pForm[info.name] : this.form[info.name],
},
attrs: {
placeholder: info.help_text
},
on: {
input: e => {
this.$set(this.form,info.name,e)
pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
}
}
},[1,2,3].map(option => (
@ -354,7 +356,7 @@ export default function (device, info,h ) {
type: 'primary'
},
attrs: {
href: this.form[info.name],
href: pForm ? pForm[info.name] : this.form[info.name],
target: "_blank"
}
},info.label)
@ -366,7 +368,7 @@ export default function (device, info,h ) {
case 'choice':
formItem = h(formBuilderMap(device).get(info.type),{
props: {
value: this.form[info.name],
value: pForm ? pForm[info.name] : this.form[info.name],
clearable: true,
placeholder: info.help_text
},
@ -375,7 +377,7 @@ export default function (device, info,h ) {
},
on: {
input: e => {
this.$set(this.form,info.name,e)
pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
}
}
},[1,2,3].map(option => (
@ -390,7 +392,7 @@ export default function (device, info,h ) {
case 'choices':
formItem = h(formBuilderMap(device).get(info.type),{
props: {
value: this.form[info.name],
value: pForm ? pForm[info.name] : this.form[info.name],
clearable: true,
placeholder: info.help_text,
multiple: true
@ -400,7 +402,7 @@ export default function (device, info,h ) {
},
on: {
input: e => {
this.$set(this.form,info.name,e)
pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
}
}
},[1,2,3].map(option => (
@ -412,6 +414,78 @@ export default function (device, info,h ) {
})
)))
break;
case 'relation':
formItem = h('div',{
},[
h('vxe-toolbar',[
h('el-button',{
slot: 'buttons',
props: {
type: 'primary',
size: 'small',
icon: "el-icon-plus"
},
on: {
click: _ => {
this.form[info.name].push(deepCopy(pForm))
}
}
},'增加')
]),
h('vxe-table',{
style: {
'margin-top': '10px'
},
props: {
stripe: true,
data: this.form[info.name]
}
},this.subForm.get(info.sub_custom_model_id)?.customModel?.fields?.map((subField,subIndex) => h('vxe-column',{
props: {
field: subField.name,
title: subField.label,
align: 'center'
}
},formBuilder.bind(this)(device, subField, h, this.form[info.name][subIndex]))))
])
// formItem = h('div', [
// h('div',[
// h('el-button',{
// props: {
// size: "small",
// type: "primary",
// icon: "el-icon-plus"
// },
// on: {
// click: _ => {
// this.form[info.name].push(deepCopy(pForm))
// }
// }
// },'增加')
// ]),
// ...this.form[info.name]?.map((i,subIndex) => h('el-card',[
// h('el-button',{
// props: {
// size: 'small',
// type: 'primary'
// },
// on: {
// click: _ => {
// this.form[info.name].splice(subIndex,1)
// }
// }
// },'删除'),
// h('el-form', {
// class: 'form',
// props: {
// model: this.form[info.name][subIndex],
// 'label-position': 'top'
// }
// },this.subForm.get(info.sub_custom_model_id)?.customModel?.fields.map(subField => formBuilder.bind(this)(device, subField, h, this.form[info.name][subIndex])))
// ]))
// ])
break;
}
return h('el-form-item',{
props: {
@ -419,11 +493,116 @@ export default function (device, info,h ) {
label: info.label
},
style: {
'grid-column-start': info.gs_x,
'grid-column-end': info.gs_x + info.gs_width,
'grid-row-start': info.gs_y,
'grid-row-end': info.gs_y + info.gs_height
'grid-column-start': info.gs_x+1,
'grid-column-end': info.gs_x+1 + info.gs_width,
'grid-row-start': info.gs_y+1,
'grid-row-end': info.gs_y+1 + info.gs_height
}
},[formItem])
}
if(device === 'mobile') {
switch (info.type) {
case 'text':
formItem = h(formBuilderMap(device).get(info.type),{
props: {
name: info.name,
label: info.label,
value: this.form[info.name],
clearable: true,
placeholder: info.help_text
},
attrs: {
placeholder: info.help_text
},
on: {
input: e => {
this.$set(this.form,info.name,e)
}
}
})
break;
case 'textarea':
formItem = h(formBuilderMap(device).get(info.type),{
props: {
name: info.name,
label: info.label,
type: 'textarea',
value: this.form[info.name],
clearable: true,
placeholder: info.help_text
},
attrs: {
placeholder: info.help_text
},
on: {
input: e => {
this.$set(this.form,info.name,e)
}
}
})
break;
case 'date':
formItem = h('van-field',{
props: {
readonly: true,
clickable: true,
name: info.name,
label: info.label,
value: this.form[info.name],
clearable: true,
placeholder: info.help_text,
},
attrs: {
placeholder: info.help_text
},
on: {
click: _ => {
this.vanCalendarOption.forFormName = info.name;
this.$set(this.vanCalendarOption,'isShow',true);
}
}
})
break;
case 'datetime':
formItem = h('van-field',{
props: {
readonly: true,
clickable: true,
name: info.name,
label: info.label,
value: this.form[info.name],
clearable: true,
placeholder: info.help_text,
},
on: {
click:_ => {
this.vanTimePickerOption.forFormName = info.name;
this.$set(this.vanTimePickerOption,'isShow',true);
}
}
})
break;
case 'select':
formItem = h('van-field',{
props: {
readonly: true,
clickable: true,
name: info.name,
label: info.label,
value: this.form[info.name],
clearable: true,
placeholder: info.help_text,
},
on: {
click:_ => {
this.vanPopupOption.forFormName = info.name;
this.$set(this.vanPopupOption,'columns',['杭州', '宁波', '温州', '嘉兴', '湖州']);
this.$set(this.vanPopupOption,'isShow',true);
}
}
})
break;
}
return formItem
}
}

160
src/views/flow/DesktopForm.vue
Unescape View File

@ -1,148 +1,31 @@
<script>
import { deepCopy } from "@/utils"
import formBuilder from '@/utils/formBuilder'
export default {
props: {
originalForm: {
type: Object,
default: () => ({}),
required: true
},
subForm: {
type: Map,
default: () => new Map()
},
device: {
type: String,
default: 'desktop',
required: true
},
info: {
type: Array,
default: () => [],
required: true
}
},
data() {
return {
info: [
{
id: 1,
type: "text",
gs_x: 1,
gs_y: 1,
gs_height: 1,
gs_width: 6,
name: "aaa",
label: "aaa",
help_text: 'write aaa'
},
{
id: 2,
type: "textarea",
gs_x: 7,
gs_y: 1,
gs_height: 1,
gs_width: 6,
name: "bbb",
label: "bbb",
help_text: 'write bbb'
},
{
id: 3,
type: "date",
gs_x: 1,
gs_y: 2,
gs_height: 1,
gs_width: 4,
name: "ccc",
label: "ccc",
help_text: 'write ccc'
},
{
id: 4,
type: "datetime",
gs_x: 5,
gs_y: 2,
gs_height: 1,
gs_width: 4,
name: "ddd",
label: "ddd",
help_text: 'write ddd'
},
{
id: 5,
type: "select",
gs_x: 1,
gs_y: 3,
gs_height: 1,
gs_width: 6,
name: "eee",
label: "eee",
help_text: 'write eee'
},
{
id: 6,
type: "radio",
gs_x: 1,
gs_y: 4,
gs_height: 1,
gs_width: 6,
name: "fff",
label: "fff",
help_text: 'write fff'
},
{
id: 7,
type: "file",
gs_x: 1,
gs_y: 5,
gs_height: 1,
gs_width: 6,
name: "ggg",
label: "ggg",
help_text: 'write ggg'
},
{
id: 8,
type: "label",
gs_x: 1,
gs_y: 6,
gs_height: 1,
gs_width: 6,
name: "hhh",
label: "hhh",
},
{
id: 9,
type: "static",
gs_x: 1,
gs_y: 7,
gs_height: 1,
gs_width: 6,
name: "iii",
label: "iii",
},
{
id: 10,
type: "hr",
gs_x: 1,
gs_y: 8,
gs_height: 1,
gs_width: 6,
name: "jjj",
label: "jjj",
},
{
id: 11,
type: "choice",
gs_x: 1,
gs_y: 9,
gs_height: 1,
gs_width: 6,
name: "kkk",
label: "kkk",
},
{
id: 12,
type: "choices",
gs_x: 1,
gs_y: 10,
gs_height: 1,
gs_width: 6,
name: "lll",
label: "lll",
},
],
form: {
aaa: "",
bbb: ""
},
form: {},
file: {
ggg: []
}
@ -152,6 +35,17 @@ export default {
},
computed: {
},
watch: {
info(newVal) {
let keys = newVal.map(i => i.name)
keys.forEach(key => {
this.form[key] = ''
})
},
originalForm(newVal) {
this.form = deepCopy(newVal)
}
},
render(h) {
return h('el-form', {

134
src/views/flow/MobileForm.vue
Unescape View File

@ -1,15 +1,137 @@
<template>
<div>
</div>
</template>
<script>
import formBuilder from '@/utils/formBuilder'
import moment from "moment/moment";
export default {
props: {
device: {
type: String,
default: 'desktop',
required: true
},
info: {
type: Array,
default: () => [],
required: true
}
},
data() {
return {}
return {
form: {},
file: {
ggg: []
},
showControl: {},
vanCalendarOption: {
isShow: false,
forFormName: ""
},
vanTimePickerOption: {
isShow: false,
forFormName: ""
},
vanPopupOption: {
isShow: false,
forFormName: "",
columns: []
}
}
},
methods: {},
computed: {},
watch: {
info(newVal) {
let keys = newVal.map(i => i.name)
keys.forEach(key => {
this.form[key] = ''
})
}
},
render(h) {
return h('div',[
h('van-form',{
props: {
'scroll-to-error': true
}
},this.info.map(field => formBuilder.bind(this)(this.device, field, h))),
//calendar
this.info.findIndex(i => i.type === 'date') !== -1 ?
h('van-calendar',{
ref: `vanCalendar`,
props: {
value: this.vanCalendarOption.isShow,
'min-date': this.$moment().subtract('years',10).toDate(),
'max-date': this.$moment().add('years',10).toDate(),
},
on: {
input: e => {
this.$set(this.vanCalendarOption,'isShow',e)
},
confirm: date => {
this.$set(this.form,this.vanCalendarOption.forFormName,moment(date).format('YYYY-MM-DD'))
this.$set(this.vanCalendarOption,'isShow',false)
}
}
}) : '',
//datetimepicker
this.info.findIndex(i => i.type === 'datetime') !== -1 ?
h('van-popup',{
props: {
value: this.vanTimePickerOption.isShow,
position: 'bottom',
},
on: {
input: e => {
this.$set(this.vanTimePickerOption,'isShow',e)
},
}
},[
h('van-datetime-picker',{
props: {
type: 'datetime'
},
on: {
confirm: time => {
this.$set(this.form,this.vanTimePickerOption.forFormName,moment(time).format('YYYY-MM-DD HH:mm:ss'))
},
cancel: _ => {
this.$set(this.vanTimePickerOption,'isShow',false)
}
}
})
]) : '',
//popup
this.info.findIndex(i => i.type === 'datetime') !== -1 ?
h('van-popup',{
props: {
value: this.vanPopupOption.isShow,
position: 'bottom',
},
on: {
input: e => {
this.$set(this.vanPopupOption,'isShow',e)
},
}
},[
h('van-picker',{
props: {
'show-toolbar': true,
columns: this.vanPopupOption.columns,
},
on: {
confirm: value => {
console.log(value)
this.$set(this.form,this.vanPopupOption.forFormName,value)
},
cancel: _ => {
this.$set(this.vanPopupOption,'isShow',false)
}
}
})
]) : '',
])
}
}
</script>

71
src/views/flow/create.vue
Unescape View File

@ -2,16 +2,16 @@
<div class="container">
<el-card shadow="always">
<template #header>
<p>流程</p>
<p>{{ config.customModel ? config.customModel.name : '办理' }}</p>
</template>
<template>
<div class="form-container">
<template v-if="device === 'desktop'">
<DesktopForm :device="device"></DesktopForm>
<DesktopForm :device="device" :sub-form="subConfig" :info="fields" :original-form="form"></DesktopForm>
</template>
<template v-else>
<MobileForm></MobileForm>
<MobileForm :device="device" :info="fields"></MobileForm>
</template>
</div>
</template>
@ -22,20 +22,81 @@
<script>
import DesktopForm from "./DesktopForm.vue";
import MobileForm from "./MobileForm.vue";
import { preConfig } from "@/api/flow"
export default {
components: {
DesktopForm,
MobileForm
},
data() {
return {}
return {
info: [],
config: {},
subConfig: new Map(),
form: {},
fileList: {}
}
},
methods: {
generateForm(object,fields) {
fields.forEach(field => {
if(field.type === 'relation') {
object[field.name] = [{}]
this.generateForm(object[field.name][0], this.subConfig.get(field.sub_custom_model_id)?.customModel?.fields)
} else {
object[field.name] = ""
}
})
},
async getConfig() {
const loading = this.$loading({
lock: true,
text: '拼命加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.8)'
});
try {
const res = await preConfig(this.$route.query.id)
const { fields } = res?.customModel;
let subFormRequest = []
const getSubForm = (id) => {
subFormRequest.push(preConfig(id))
}
fields.forEach(field => {
if(field.sub_custom_model_id) {
getSubForm(field.sub_custom_model_id)
}
})
const subConfigs = await Promise.all(subFormRequest)
subConfigs.forEach(sub => {
if(sub.customModel?.id) {
this.subConfig.set(sub.customModel?.id, sub)
}
})
this.config = res;
this.generateForm(this.form, fields)
this.form = Object.assign({},this.form)
loading.close()
} catch (err) {
console.error(err)
this.$message.error("配置失败")
loading.close()
}
}
},
methods: {},
computed: {
device() {
return this.$store.state.app.device
},
fields() {
return this.config?.customModel?.fields || []
}
},
created() {
this.getConfig()
}
}
</script>

300
src/views/flow/index.vue
Unescape View File

@ -1,17 +1,311 @@
<template>
<div>
<div class="create-flow-container">
<div class="create-flow-card" v-for="(cate, i1) in cates" :key="cate.id">
<div class="create-flow-card__header">
<div class="create-flow-card__header--icon">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="26" height="26"><path d="M885.4 665.6H624.3c-16.7 0-31.8 10.3-37.5 26-10.7 29.7-39.1 51-72.5 51s-61.8-21.3-72.5-51c-5.6-15.7-20.8-26-37.5-26h-267c-22.1 0-40 17.9-40 40v211.3c0 22.1 17.9 40 40 40h748.1c22.1 0 40-17.9 40-40V705.6c0-22.1-17.9-40-40-40zM139.3 623.6V166.8c0-22.1 17.9-40 40-40h88v496.8h-128z" fill="#ffffff"></path><path d="M844.2 65.5H350.3c-22.1 0-40 17.9-40 40v518.6h110.3c19.3 0 51.9 25.5 61.8 52.9 4.8 13.5 17.7 22.5 32 22.5s27.2-9 32-22.5c11.7-32.6 43-54.5 77.9-54.5h251.1c3 0 5.9 0.2 8.8 0.5V105.5c0-22.1-17.9-40-40-40zM663.6 444.6c0 11.9-9.6 21.5-21.5 21.5H429c-11.9 0-21.5-9.6-21.5-21.5s9.6-21.5 21.5-21.5h213c12 0 21.6 9.7 21.6 21.5z m0-110.6c0 11.9-9.6 21.5-21.5 21.5H429c-11.9 0-21.5-9.6-21.5-21.5s9.6-21.5 21.5-21.5h213c12 0 21.6 9.6 21.6 21.5z m0-110.7c0 11.9-9.6 21.5-21.5 21.5H429c-11.9 0-21.5-9.6-21.5-21.5s9.6-21.5 21.5-21.5h213c12 0 21.6 9.7 21.6 21.5z" fill="#ffffff"></path></svg>
</div>
<div class="create-flow-card__header--text">
{{ cate.name }}
</div>
</div>
<div class="create-flow-card__body">
<template v-for="(flow,i2) in cate.customer_models">
<template v-if="flow.flow_lock_remark">
<el-tooltip effect="dark" :content="flow.flow_lock_remark" placement="top">
<div class="create-flow-card__body-item" style="cursor: not-allowed;">
<div class="create-flow-card__body-item-left">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<path d="M993.371558 489.73913c-19.080745-19.080745-44.521739-25.440994-69.962733-25.440993-25.440994 0-50.881988 12.720497-69.962733 31.801242l-356.173913 356.173913c-6.360248 6.360248-6.360248 12.720497-12.720497 19.080745 0 0 0 6.360248-6.360248 12.720497l-19.080746 69.962733c0 19.080745 0 31.801242 12.720497 50.881988 12.720497 12.720497 31.801242 19.080745 44.521739 19.080745h6.360249l76.322981-19.080745c6.360248 0 25.440994-6.360248 31.801242-12.720497l356.173913-356.173913c38.161491-44.521739 38.161491-108.124224 6.360249-146.285715z m-394.335404 451.57764l-63.602484 12.720497 12.720496-69.962733 292.571429-292.571428 50.881988 57.242236-292.571429 292.571428z m349.813665-349.813664l-12.720497 12.720496-50.881988-50.881987 12.720497-12.720497c6.360248-6.360248 12.720497-12.720497 25.440994-12.720497s25.440994 0 31.801242 6.360249c6.360248 6.360248 6.360248 12.720497 6.360249 25.440993s-6.360248 25.440994-12.720497 31.801243zM344.626216 941.31677h-228.968944c-19.080745 0-44.521739-19.080745-44.521739-44.521739v-788.670807c0-19.080745 19.080745-44.521739 44.521739-44.52174h750.509317c19.080745 0 44.521739 19.080745 44.521739 44.52174v133.565217c0 12.720497 12.720497 25.440994 31.801242 25.440994s31.801242-12.720497 31.801242-25.440994v-133.565217c0-63.602484-50.881988-108.124224-108.124223-108.124224h-750.509317c-57.242236 0-108.124224 44.521739-108.124224 101.763975V890.434783c0 57.242236 44.521739 101.763975 108.124224 101.763975h228.968944c19.080745 0 31.801242-12.720497 31.801242-31.801242 6.360248-19.080745-19.080745-19.080745-31.801242-19.080746z" fill="#bdbdbd"></path>
<path d="M815.284601 190.807453c-6.360248-6.360248-12.720497-6.360248-25.440994-6.360248h-578.782608c-19.080745 0-31.801242 6.360248-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h578.782608c19.080745 0 31.801242-12.720497 31.801243-31.801242 0-12.720497 0-25.440994-6.360249-25.440994zM211.060999 591.503106c-19.080745 0-31.801242 6.360248-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h337.093167c19.080745 0 31.801242-12.720497 31.801243-31.801242s-12.720497-31.801242-31.801243-31.801242h-337.093167zM815.284601 400.695652c0-19.080745-6.360248-31.801242-31.801242-31.801242h-572.42236c-19.080745 0-31.801242 12.720497-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h578.782608c12.720497 0 25.440994-19.080745 25.440994-31.801242zM942.48957 286.21118c-19.080745 0-31.801242 12.720497-31.801242 25.440994v25.440994c0 12.720497 12.720497 25.440994 31.801242 25.440993s31.801242-12.720497 31.801242-25.440993v-25.440994c0-12.720497-19.080745-25.440994-31.801242-25.440994z" fill="#bdbdbd"></path>
</svg>
</div>
<div class="create-flow-card__body-item-right">
<div class="create-flow-card__body-item-right--title" style="color: #bdbdbd;">{{ flow.name }}</div>
<div class="create-flow-card__body-item-right--value">
<div class="done">
<span :style="{ color: flow.my_apply_total===0 ? '#bfc0c1' : '#0279fd' }">{{ flow.my_apply_total }}</span>
<span>已申请</span>
</div>
<div class="todo">
<span :style="{ color: flow.my_wait_total===0 ? '#bfc0c1' : '#0279fd' }">{{ flow.my_wait_total }}</span>
<span>待办</span>
</div>
</div>
</div>
</div>
</el-tooltip>
</template>
<template v-else>
<div class="create-flow-card__body-item" @click="toCreate(flow,cate)">
<div class="create-flow-card__body-item-left">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M993.371558 489.73913c-19.080745-19.080745-44.521739-25.440994-69.962733-25.440993-25.440994 0-50.881988 12.720497-69.962733 31.801242l-356.173913 356.173913c-6.360248 6.360248-6.360248 12.720497-12.720497 19.080745 0 0 0 6.360248-6.360248 12.720497l-19.080746 69.962733c0 19.080745 0 31.801242 12.720497 50.881988 12.720497 12.720497 31.801242 19.080745 44.521739 19.080745h6.360249l76.322981-19.080745c6.360248 0 25.440994-6.360248 31.801242-12.720497l356.173913-356.173913c38.161491-44.521739 38.161491-108.124224 6.360249-146.285715z m-394.335404 451.57764l-63.602484 12.720497 12.720496-69.962733 292.571429-292.571428 50.881988 57.242236-292.571429 292.571428z m349.813665-349.813664l-12.720497 12.720496-50.881988-50.881987 12.720497-12.720497c6.360248-6.360248 12.720497-12.720497 25.440994-12.720497s25.440994 0 31.801242 6.360249c6.360248 6.360248 6.360248 12.720497 6.360249 25.440993s-6.360248 25.440994-12.720497 31.801243zM344.626216 941.31677h-228.968944c-19.080745 0-44.521739-19.080745-44.521739-44.521739v-788.670807c0-19.080745 19.080745-44.521739 44.521739-44.52174h750.509317c19.080745 0 44.521739 19.080745 44.521739 44.52174v133.565217c0 12.720497 12.720497 25.440994 31.801242 25.440994s31.801242-12.720497 31.801242-25.440994v-133.565217c0-63.602484-50.881988-108.124224-108.124223-108.124224h-750.509317c-57.242236 0-108.124224 44.521739-108.124224 101.763975V890.434783c0 57.242236 44.521739 101.763975 108.124224 101.763975h228.968944c19.080745 0 31.801242-12.720497 31.801242-31.801242 6.360248-19.080745-19.080745-19.080745-31.801242-19.080746z" fill="#535353"></path><path d="M815.284601 190.807453c-6.360248-6.360248-12.720497-6.360248-25.440994-6.360248h-578.782608c-19.080745 0-31.801242 6.360248-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h578.782608c19.080745 0 31.801242-12.720497 31.801243-31.801242 0-12.720497 0-25.440994-6.360249-25.440994zM211.060999 591.503106c-19.080745 0-31.801242 6.360248-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h337.093167c19.080745 0 31.801242-12.720497 31.801243-31.801242s-12.720497-31.801242-31.801243-31.801242h-337.093167zM815.284601 400.695652c0-19.080745-6.360248-31.801242-31.801242-31.801242h-572.42236c-19.080745 0-31.801242 12.720497-31.801242 31.801242s12.720497 31.801242 31.801242 31.801242h578.782608c12.720497 0 25.440994-19.080745 25.440994-31.801242zM942.48957 286.21118c-19.080745 0-31.801242 12.720497-31.801242 25.440994v25.440994c0 12.720497 12.720497 25.440994 31.801242 25.440993s31.801242-12.720497 31.801242-25.440993v-25.440994c0-12.720497-19.080745-25.440994-31.801242-25.440994z" fill="#535353"></path></svg>
</div>
<div class="create-flow-card__body-item-right">
<div class="create-flow-card__body-item-right--title">{{ flow.name }}</div>
<div class="create-flow-card__body-item-right--value">
<div class="done">
<span :style="{ color: flow.my_apply_total===0 ? '#bfc0c1' : '#0279fd' }">{{ flow.my_apply_total }}</span>
<span>已申请</span>
</div>
<div class="todo">
<span :style="{ color: flow.my_wait_total===0 ? '#bfc0c1' : '#0279fd' }">{{ flow.my_wait_total }}</span>
<span>待办</span>
</div>
</div>
</div>
</div>
</template>
</template>
</div>
</div>
</div>
</template>
<script>
import { flow } from "@/api/flow"
export default {
data() {
return {}
return {
cates: []
}
},
methods: {
async getFlow() {
try {
const res = await flow()
this.cates = res.cates || [];
console.log(res)
} catch (err) {
console.error(err)
}
},
toCreate(flow,cate) {
if(flow.url) {
window.open(flow.url,'_blank')
} else {
this.$router.push({
path: '/flow/create',
query: {
id: flow.id
}
})
}
}
},
methods: {},
computed: {},
created() {
this.getFlow()
}
}
</script>
<style scoped lang="scss">
.create-flow-container {
column-count: 2;
column-gap: 10px;
padding: 20px;
}
.create-flow-container .create-flow-card {
border-radius: 10px;
filter: drop-shadow(0.5px 0.866px 14.5px rgba(59,66,82,0.11));
background-color: #ffffff;
break-inside: avoid;
grid-row-start: auto;
}
.create-flow-card + .create-flow-card {
margin-top: 10px;
}
.create-flow-card__header {
display: flex;
align-items: center;
padding: 16px 0 16px 16px;
}
.create-flow-card:nth-child(5n+1) .create-flow-card__header--icon {
filter: drop-shadow(0 0 5px rgba(254,102,94,0.35));
background-image: linear-gradient(90deg, #ffa175 0%, #fd635d 99%, #fd635d 100%);
}
.create-flow-card:nth-child(5n+2) .create-flow-card__header--icon {
filter: drop-shadow(0px 6px 6px rgba(43,188,255,0.5));
background-color: #0279fd;
}
.create-flow-card:nth-child(5n+3) .create-flow-card__header--icon {
filter: drop-shadow(1.462px 4.782px 10px rgba(11,196,208,0.35));
background-image: linear-gradient(90deg, #4bcbf1 0%, #3ba7ef 99%, #3ba7ef 100%);
}
.create-flow-card:nth-child(5n+4) .create-flow-card__header--icon {
filter: drop-shadow(1.462px 4.782px 10px rgba(255,159,60,0.35));
background-image: linear-gradient(90deg, #ffb737 0%, #ff9f3b 100%);
}
.create-flow-card:nth-child(5n) .create-flow-card__header--icon {
filter: drop-shadow(1.462px 4.782px 10px rgba(195,89,251,0.35));
background-image: linear-gradient(90deg, #d38ff3 0%, #c359fb 99%, #c359fb 100%);
}
.create-flow-card__header--icon {
flex-shrink: 0;
width: 50px;
height: 50px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.create-flow-card__header--text {
flex: 1;
font-size: 18px;
letter-spacing: 1px;
color: #3b4252;
white-space: nowrap;
margin-left: 15px;
padding-bottom: 8px;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
}
.create-flow-card:nth-child(5n+1) .create-flow-card__header--text::after {
content: "";
width: 100%;
height: 2px;
background: linear-gradient(90deg, #ffa175 0%, #fd635d 34%, #fd635d 37%,#dbdbdd 37%,#dbdbdd 100%);
position: absolute;
bottom: 0;
right: 0;
}
.create-flow-card:nth-child(5n+2) .create-flow-card__header--text::after {
content: "";
width: 100%;
height: 2px;
background: linear-gradient(90deg, #0279fd 0%, #0279fd 37%,#dbdbdd 37%,#dbdbdd 100%);
position: absolute;
bottom: 0;
right: 0;
}
.create-flow-card:nth-child(5n+3) .create-flow-card__header--text::after {
content: "";
width: 100%;
height: 2px;
background: linear-gradient(90deg, #4bcbf1 0%, #3ba7ef 34%,#3ba7ef 37%,#dbdbdd 37%,#dbdbdd 100%);
position: absolute;
bottom: 0;
right: 0;
}
.create-flow-card:nth-child(5n+4) .create-flow-card__header--text::after {
content: "";
width: 100%;
height: 2px;
background: linear-gradient(90deg, #ffb737 0%, #ff9f3b 34%,#ff9f3b 37%,#dbdbdd 37%,#dbdbdd 100%);
position: absolute;
bottom: 0;
right: 0;
}
.create-flow-card:nth-child(5n) .create-flow-card__header--text::after {
content: "";
width: 100%;
height: 2px;
background: linear-gradient(90deg, #d38ff3 0%, #c359fb 34%,#c359fb 37%,#dbdbdd 37%,#dbdbdd 100%);
position: absolute;
bottom: 0;
right: 0;
}
.create-flow-card__body {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
padding: 0 16px 20px 16px;
}
.create-flow-card__body-item {
border-radius: 10px;
background-color: #f5f7fa;
border: 1px solid rgba(227,234,240,0.5);
padding: 10px;
display: flex;
align-items: center;
}
.create-flow-card__body-item-left {
background: #fff;
border-radius: 100%;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
cursor: pointer;
}
.create-flow-card__body-item-right {
flex: 1;
}
.create-flow-card__body-item-right--title {
color: #000000;
}
.create-flow-card__body-item-right--value {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 18px;
position: relative;
}
.create-flow-card__body-item-right--value:has(.todo)::after {
content: "";
width: 1px;
background: #ededee;
left: calc(50%);
position: absolute;
top: 10%;
bottom: 10%;
}
.create-flow-card__body-item-right--value .done,.create-flow-card__body-item-right--value .todo {
flex-basis: 50%;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
cursor: pointer;
}
.create-flow-card__body-item-right--value .done > span:nth-child(1),.create-flow-card__body-item-right--value .todo > span:nth-child(1) {
font-size: 14px;
font-weight: 600;
}
.create-flow-card__body-item-right--value .done > span:nth-child(2),.create-flow-card__body-item-right--value .todo > span:nth-child(2) {
font-size: 11px;
color: #999999;
word-break: keep-all;
}
@media (max-width: 992px) {
.create-flow-container {
display: flex;
flex-direction: column;
}
.create-flow-card__body {
grid-template-columns: repeat(2, 1fr);
}
.create-flow-card__header--icon {
width: 40px;
height: 40px;
}
.create-flow-card__header--text {
font-size: 16px;
}
.create-flow-card__body-item-right--title {
font-size: 14px;
}
.create-flow-card__body-item-left {
margin-right: 6px;
}
.create-flow-card__body-item-left {
width: 30px;
height: 30px;
}
.create-flow-card__body-item {
padding: 10px 8px;
}
}
</style>

Write Preview
Loading…
Cancel
Save