15 changed files with 237 additions and 112 deletions
@ -0,0 +1,135 @@ |
|||||||
|
<template> |
||||||
|
<div class="tabs"> |
||||||
|
<header class="flex gap"> |
||||||
|
<div :active="active === '全部'" @click="getRows('全部')"> |
||||||
|
<span>全部</span> |
||||||
|
</div> |
||||||
|
<div v-for="item in tabs" :key="item.name" :active="active === item.name" @click="getRows(item.name)"> |
||||||
|
<el-badge :value="item.total" class="item"> |
||||||
|
<span>{{ item.name }}</span> |
||||||
|
</el-badge> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
<div> |
||||||
|
<el-table :data="rows.slice(0, Math.min(rows.length, 8))" style="width: 100%" stripe> |
||||||
|
<el-table-column |
||||||
|
prop="mailTime" |
||||||
|
label="来信时间" |
||||||
|
align="center" |
||||||
|
width="180" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="contactName" |
||||||
|
label="姓名" |
||||||
|
align="center" |
||||||
|
width="120" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="contactPhone" |
||||||
|
label="联系电话" |
||||||
|
width="120" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="content" |
||||||
|
label="信件内容" |
||||||
|
show-overflow-tooltip |
||||||
|
/> |
||||||
|
<el-table-column prop="mailState" label="信件状态"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<span>{{ |
||||||
|
getDictLable(dictData.mail_state, row.mailState) |
||||||
|
}}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="流程节点"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<el-tag :type="getFlowTagType(row.flowName)">{{ |
||||||
|
row.flowName |
||||||
|
}}</el-tag> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<el-button type="primary" link @click="handleMail(row)" |
||||||
|
>立即处理</el-button |
||||||
|
> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<MailDialog |
||||||
|
v-model:show="showModel" |
||||||
|
:mail-id="activeMailId" |
||||||
|
:work-id="activeWorkId" |
||||||
|
:work-type="activeWorkType" |
||||||
|
@update="emits('update')" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
<script setup> |
||||||
|
import MailDialog from "@/views/work/components/MailDialog.vue"; |
||||||
|
import { useDictData } from "@/hooks/useDictOptions"; |
||||||
|
const { dictData } = useDictData(["mail_state"]); |
||||||
|
import { getDictLable, getFlowTagType } from "@/utils/util"; |
||||||
|
|
||||||
|
const tabs = ref([]); |
||||||
|
const active = ref('全部') |
||||||
|
const rows = ref([]) |
||||||
|
const showModel = ref(false); |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
data: { |
||||||
|
type: Array, |
||||||
|
default: () => [] |
||||||
|
} |
||||||
|
}) |
||||||
|
const emits = defineEmits(['update']) |
||||||
|
|
||||||
|
watch(() => props.data, (data) => { |
||||||
|
getRows(active.value) |
||||||
|
const flowNames = [...new Set(data.map(item => item.flowName))]; |
||||||
|
tabs.value = flowNames.map(name => ({ |
||||||
|
name, |
||||||
|
total: data.filter(item => item.flowName == name).length |
||||||
|
})) |
||||||
|
}) |
||||||
|
|
||||||
|
function getRows(name) { |
||||||
|
active.value = name |
||||||
|
if (name == '全部') { |
||||||
|
rows.value = props.data |
||||||
|
return |
||||||
|
} |
||||||
|
rows.value = props.data.filter(item => item.flowName == name) |
||||||
|
} |
||||||
|
|
||||||
|
const activeMailId = ref(""); |
||||||
|
const activeWorkId = ref(0); |
||||||
|
const activeWorkType = ref(""); |
||||||
|
function handleMail(row) { |
||||||
|
showModel.value = true; |
||||||
|
activeMailId.value = row.mailId; |
||||||
|
activeWorkId.value = row.id; |
||||||
|
activeWorkType.value = row.workType; |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
header { |
||||||
|
border-bottom: 1px solid var(--primary-color); |
||||||
|
> div { |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 400; |
||||||
|
padding: 10px 12px 6px; |
||||||
|
border-bottom: 4px solid transparent; |
||||||
|
&:hover, &[active=true] { |
||||||
|
font-weight: 700; |
||||||
|
border-color: var(--primary-color); |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.el-badge { |
||||||
|
padding-right: 6px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue