You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
339 lines
16 KiB
339 lines
16 KiB
<template>
|
|
<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">
|
|
<template v-if="!flow.url">
|
|
<div class="done" @click.stop="toMy">
|
|
<span :style="{ color: flow.my_apply_total===0 ? '#bfc0c1' : 'var(--theme-color)' }">{{ flow.my_apply_total }}</span>
|
|
<span>已申请</span>
|
|
</div>
|
|
<div class="todo" @click.stop="toTodo">
|
|
<span :style="{ color: flow.my_wait_total===0 ? '#bfc0c1' : 'var(--theme-color)' }">{{ flow.my_wait_total }}</span>
|
|
<span>待办</span>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<el-button type="primary" size="small" @click="toCreate(flow,cate)">查看</el-button>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getToken } from '@/utils/auth'
|
|
import { isExternal } from '@/utils/validate'
|
|
import { flow } from "@/api/flow"
|
|
export default {
|
|
data() {
|
|
return {
|
|
cates: []
|
|
}
|
|
},
|
|
methods: {
|
|
async getFlow() {
|
|
try {
|
|
const res = await flow(true)
|
|
this.cates = res.cates || [];
|
|
console.log(res)
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
},
|
|
|
|
toCreate(flow,cate) {
|
|
// 如果 flow.url 是字符串格式 "{url:xxx}"，解析并提取 URL
|
|
if (flow.url && typeof flow.url === 'string' && flow.url.startsWith('{url:')) {
|
|
const match = flow.url.match(/\{url:(.+?)\}/)
|
|
if (match && match[1]) {
|
|
const urlPath = match[1]
|
|
this.$router.push(urlPath)
|
|
return
|
|
}
|
|
}
|
|
|
|
if(isExternal(flow.url)) {
|
|
const url = new URL(flow.url)
|
|
window.open(flow.url,'_blank')
|
|
} else if (flow.url) {
|
|
if (/\?.+/g.test(flow.url)) {
|
|
window.open(window.location.origin + flow.url,'_blank')
|
|
}
|
|
} else {
|
|
this.$router.push({
|
|
path: '/flow/create',
|
|
query: {
|
|
module_id: flow.id
|
|
}
|
|
})
|
|
}
|
|
},
|
|
toMy() {
|
|
this.$router.push('/flow/list/my')
|
|
},
|
|
toTodo() {
|
|
this.$router.push('/flow/list/todo')
|
|
},
|
|
},
|
|
computed: {},
|
|
created() {
|
|
this.getFlow()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.create-flow-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
padding: 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.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: 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: 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>
|