wxc
2 years ago
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