@yxhl/specter-pui-vtk 1.0.0

package/src/components/assembly/VtkProj.vue

@@ -0,0 +1,539 @@
+<template>
+	<VContainer fluid class="vtk-height pa-0">
+		<VTabs v-model="examType" bg-color="transparent" height="38" style="width: 100%">
+			<VTab @click="examAll()">
+				<span><VIcon size="16" class="mr-1">mdi-clipboard-arrow-up</VIcon>全部</span>
+			</VTab>
+			<VTab @click="list">
+				<span><VIcon size="16" class="mr-1">mdi-star-circle</VIcon>审核</span>
+			</VTab>
+			<VTab @click="tip">
+				<span><VIcon size="16" class="mr-1">mdi-hand-heart</VIcon>实施</span>
+			</VTab>
+			<VTab @click="tip">
+				<span><VIcon size="16" class="mr-1">mdi-comment-minus</VIcon>评价</span>
+			</VTab>
+			<VTab @click="tip">
+				<span><VIcon size="16" class="mr-1">mdi-credit-card-check</VIcon>支付</span>
+			</VTab>
+			<VSpacer />
+		</VTabs>
+		<VCard elevation="0" style="min-height: calc(100% - 38px)">
+			<VCardTitle style="height: 88px">
+				<VMenu v-if="examType == '0' && (expShow || user.grole >= 2)" offset-y :close-on-content-click="false" location="bottom">
+					<template v-slot:activator="{ props }">
+						<VBtn @click="exv" v-bind="props" class="bg-orange text-white mr-3" elevation="0">
+							<VIcon>mdi-export-variant</VIcon> 导出
+						</VBtn>
+					</template>
+					<VCard class="pa-3" width="300">
+						<div>
+							<p class="mb-2 font-weight-bold">公共字段</p>
+							<p class="text-caption">
+								服务事项
+								<span class="text-grey mx-1">|</span>
+								所属区县
+								<span class="text-grey mx-1">|</span>
+								所属镇街
+								<span class="text-grey mx-1">|</span>
+								所属社区
+								<span class="text-grey mx-1">|</span>
+								申请人证件号
+								<span class="text-grey mx-1">|</span>
+								申请人姓名
+								<span class="text-grey mx-1">|</span>
+								残疾人证号
+								<span class="text-grey mx-1">|</span>
+								性别
+								<span class="text-grey mx-1">|</span>
+								申请人手机号
+								<span class="text-grey mx-1">|</span>
+								补助金额
+								<span class="text-grey mx-1">|</span>
+								开户银行
+								<span class="text-grey mx-1">|</span>
+								银行卡号
+								<span class="text-grey mx-1">|</span>
+								收款人姓名
+								<span class="text-grey mx-1">|</span>
+								收款人证件号
+								<span class="text-grey mx-1">|</span>
+								状态
+							</p>
+							<VDivider />
+							<div v-if="queryParam.servState == '1' && projName">
+								<VCardTitle class="pa-0 text-body-1 mb-2 pt-3">
+									<VCheckbox @update:model-value="chkAll" v-model="select" class="mt-n1" hide-details>
+										<template v-slot:append>
+											<VIcon class="active" style="display: none" size="18">mdi-check-circle</VIcon>
+										</template>
+									</VCheckbox>
+									<span class="font-weight-bold ml-n2">拓展字段</span>
+									<VSpacer />
+								</VCardTitle>
+								<p v-if="formArr?.length > 0" class="mb-0 expBox">
+									<VCheckbox
+										v-for="(item, index) in formArr"
+										:key="index"
+										v-model="expArr"
+										:label="item.label"
+										:value="{ name: item.name, valu: `${item.label}${item.valu && item.valu.includes('/') && item.valu.includes(':') ? `(${item.valu})` : ''}` }"
+										class="mt-2"
+										multiple
+										hide-details>
+										<template v-slot:append>
+											<VIcon class="active" style="display: none" size="18">mdi-check-circle</VIcon>
+										</template>
+									</VCheckbox>
+								</p>
+								<p v-else class="text-red text-body-2 mb-2">{{ projTip }}</p>
+							</div>
+							<div v-else>
+								<p class="mb-3 pt-3 font-weight-bold">导出提示</p>
+								<p :class="queryParam.servState == '1' ? 'text-green' : 'text-red'" class="mb-3 text-body-2">
+									<VIcon size="20" :color="queryParam.servState == '1' ? 'green' : 'red'">{{ queryParam.servState == "1" ? "mdi-progress-check" : "mdi-progress-close" }}</VIcon>
+									导出数据仅限已服务信息
+								</p>
+								<p class="mb-2 text-body-2" :class="projName ? 'text-green' : 'text-red'">
+									<VIcon size="20" :color="projName ? 'green' : 'red'">{{ projName ? "mdi-progress-check" : "mdi-progress-close" }}</VIcon>
+									至少选择一个服务事项导出
+								</p>
+							</div>
+						</div>
+						<VBtn @click="exp" :disabled="!(projName && queryParam.servState == '1')" elevation="0" color="primary" class="vtk-width mt-3" size="small">确认导出</VBtn>
+					</VCard>
+				</VMenu>
+				<VSpacer />
+				<vtk-search v-model="queryParam" @search="searchQuery" placeholder="输入姓名/身份证查询" :styles="'width:320px'">
+					<VTextField @click="searchProj" v-model="projName" :title="projName" clearable readonly variant="outlined" placeholder="服务事项" density="compact" hide-details class="my-3"></VTextField>
+					<vtk-area-tabs v-model="queryParam.areaCode" :styles="'width:100%'" />
+					<div v-if="examType == 0" style="width: 400px">
+						<vtk-select v-model="queryParam.servState" @change="searchQuery" placeholder="服务状态" list="0:服务中/1:已服务" class="mt-3 d-inline-block mr-3 mb-3" style="width: calc(50% - 6px)" hide-details density="compact" variant="outlined" clearable></vtk-select>
+						<vtk-select v-model="queryParam.rateState" @change="searchQuery" placeholder="是否评价" list="0:未评价/1:已评价" class="mt-3 d-inline-block" style="width: calc(50% - 6px)" hide-details density="compact" variant="outlined" clearable></vtk-select>
+						<VMenu v-model="menu" :close-on-content-click="false" transition="scale-transition" location="bottom" max-width="290px" min-width="auto">
+							<template v-slot:activator="{ props }">
+								<VTextField v-model="queryParam.servFtime0" placeholder="开始时间" persistent-hint append-icon="mdi-calendar" class="d-inline-block" style="width: calc(50% - 16px)" hide-details variant="outlined" density="compact" v-bind="props"></VTextField>
+							</template>
+							<VDatePicker v-model="queryParam.servFtime0" title="" @update:model-value="menu = false" view-mode="month" :max="queryParam.servFtime1"></VDatePicker>
+						</VMenu>
+						<span class="mx-2">至</span>
+						<VMenu v-model="menu1" :close-on-content-click="false" transition="scale-transition" location="bottom" max-width="290px" min-width="auto">
+							<template v-slot:activator="{ props }">
+								<VTextField v-model="queryParam.servFtime1" placeholder="结束时间" persistent-hint append-icon="mdi-calendar" class="d-inline-block" style="width: calc(50% - 15px)" hide-details variant="outlined" density="compact" v-bind="props"></VTextField>
+							</template>
+							<VDatePicker v-model="queryParam.servFtime1" title="" @update:model-value="menu1 = false" view-mode="month" :min="queryParam.servFtime0"></VDatePicker>
+						</VMenu>
+						<vtk-select v-if="queryParam.servState == '1'" @change="searchQuery" v-model="queryParam.state" class="mt-3" placeholder="状态" list="1:已通过/0:未通过" hide-details density="compact" variant="outlined" clearable></vtk-select>
+					</div>
+				</vtk-search>
+			</VCardTitle>
+			<VCardText>
+				<VDataTable :headers="headers" :items="desserts" :loading="loading" disable-pagination loading-text="数据加载中..." class="elevation-0" hide-default-footer>
+					<template v-slot:[`item.objsName`]="{ item }">
+						<div class="py-3" @click="toView(item)">
+							<p class="vtk-cursor-pointer text-body-1 font-weight-bold mb-2">
+								{{ item.objsName }}<span class="ml-3 text-grey">{{ formatIdCard(item.objsCode) }} </span>
+								<VChip class="ml-2" :class="getServStateClass(item.servState)" size="small" label>{{ getServStateText(item.servState) }} </VChip>
+								<VChip class="ml-2" :class="getRateStateClass(item.rateState)" size="small" label>{{ getRateStateText(item.rateState) }} </VChip>
+							</p>
+							<span>
+								<VChip class="bg-orange-lighten-5 text-orange" size="small" label> 事项编码:{{ item.projCode }} </VChip>
+								<VChip class="text-primary ml-2" size="small" label> 办件编号:{{ item.inst }} </VChip>
+							</span>
+							<div class="mb-0 mt-2 text-grey">
+								<div class="d-inline-block" style="min-width: 320px">
+									服务名称:<span class="text-blue">{{ item.projName }}</span>
+								</div>
+								<span>补助金额:{{ item.servAmts }}元</span>
+							</div>
+							<VRow class="py-2" style="color: #979797c2">
+								<VCol style="max-width: 320px">
+									<span :title="item.name" class="d-block" style="color: #979797c2">申请途径:{{ getServFromText(item.servFrom) }}</span>
+								</VCol>
+								<VCol>
+									<span :title="item.name" class="d-block" style="color: #979797c2">申请时间:{{ formatDate(item.servCtime) }}</span>
+								</VCol>
+							</VRow>
+						</div>
+					</template>
+					<template v-slot:[`item.actions`]="{ item }">
+						<a v-if="item.state != 0 && user.areacode?.length == 6 && item.servState == '1'" @click="del(item)" class="text-error" text>作废</a>
+						<div v-if="item.state == 0" class="state_btg text-right"></div>
+					</template>
+					<template v-slot:no-data>
+						<vtk-empty />
+					</template>
+				</VDataTable>
+				<vtk-page :page-sizes="[10, 20]" :page-data="pageData" @pageChange="getListPage" />
+			</VCardText>
+		</VCard>
+		<!-- 服务事项 -->
+		<vtk-proj ref="MprojRef" @toPage="toPage" />
+		<!-- 删除服务 -->
+		<VDialog v-model="dialog" persistent max-width="500">
+			<VCard>
+				<VCardTitle>作废</VCardTitle>
+				<VCardText class="pb-0">
+					服务作废后将无法恢复,请谨慎操作!!!
+					<VTextarea v-model="delNote" variant="outlined" label="请填写作废原因" class="mt-3" hide-details density="compact"></VTextarea>
+				</VCardText>
+				<VCardActions>
+					<VSpacer />
+					<VBtn @click="dialog = false" variant="text">取消</VBtn>
+					<VBtn @click="delSave(true)" variant="text">确定</VBtn>
+				</VCardActions>
+			</VCard>
+		</VDialog>
+	</VContainer>
+</template>
+
+<script setup>
+import { ref, watch, onActivated } from 'vue';
+import { useMixins } from '../../composables/useMixins'
+import Request from '../../commons/request';
+
+// 定义组件选项
+defineOptions({
+	name: 'VtkProj',
+	inheritAttrs: false,
+});
+
+// 表单列表 URL 配置
+const urlConfig = {
+	list: '/kudas/xfwez/page',
+	exp: '/kudas/xfwez/exp',
+	delete: '/kudas/xfwez/delete'
+};
+
+// 使用 mixins composable
+const {
+	pageData,
+	getListPage,
+	loadPage,
+	expData,
+	desserts,
+	loading,
+	queryParam: mixinQueryParam,
+	url
+} = useMixins(urlConfig);
+
+// 合并 queryParam
+Object.assign(mixinQueryParam, {});
+const queryParam = mixinQueryParam;
+
+// 响应式数据
+const user = ref({});
+const examType = ref(1);
+
+const headers = ref([
+	{ title: '事项', key: 'objsName', sortable: false },
+	{ title: '状态', key: 'actions', sortable: false, align: 'end' },
+]);
+
+// 主题筛选
+const permits = ref([]);
+const projName = ref('');
+const projTip = ref('');
+const bizType = ref('');
+const expShow = ref(false);
+const menu = ref(false);
+const menu1 = ref(false);
+
+// 导出
+const expArr = ref([]);
+const formArr = ref([]);
+const select = ref(false);
+const selectAll = ref([]);
+
+// 删除
+const dialog = ref(false);
+const delItem = ref({});
+const delNote = ref('');
+
+// ref
+const MprojRef = ref(null);
+
+// 监听器
+watch(expArr, (newVal) => {
+	if (newVal.length < selectAll.value.length) {
+		select.value = false;
+	}
+}, { deep: true });
+
+// 生命周期
+onActivated(() => {
+	alert('onActivated');
+	list();
+	// 监听接收消息,刷新页面
+	window.addEventListener('storage', (event) => {
+		if (JSON.parse(event?.newValue)?.fwez) {
+			examType.value == '0' ? examAll() : loadPage();
+		}
+	});
+});
+
+// 方法
+// 全选
+const chkAll = (e) => {
+	expArr.value = e ? selectAll.value : [];
+};
+
+const list = () => {
+	bizType.value = '';
+	expShow.value = false;
+	user.value = getUserInfo();
+	permits.value = [];
+	user.value.permits?.forEach((e) => {
+		if (e.permNkey.includes('biz_type')) {
+			permits.value.push(e);
+			bizType.value = bizType.value + e.permNkey.slice(9) + ',';
+		} else if (e.permNkey == 'btn_expo') {
+			expShow.value = true;
+		}
+	});
+	queryParam.bizType = bizType.value;
+	examWait();
+};
+
+// 获取用户信息
+const getUserInfo = () => {
+	try {
+		// 实际项目中从存储或状态管理获取
+		return window.$vtk?.storage?.get('user') || {};
+	} catch (error) {
+		console.warn('获取用户信息失败:', error);
+		return {};
+	}
+};
+
+// 待审
+const examWait = () => {
+	examType.value = 1;
+	queryParam.operateLeve = user.value.areacode?.length;
+	queryParam.servState = '0';
+	loadPage();
+};
+
+// 全部审核
+const examAll = () => {
+	examType.value = 0;
+	delete queryParam.operateLeve;
+	delete queryParam.servState;
+	loadPage();
+};
+
+// 审核
+const toView = (item) => {
+	const url = item.servState == 1
+		? `#/mino/suse/view/${item.inst}?ddtab=true`
+		: `#/mino/suse/exam/${item.inst}?ddtab=true`;
+	window.open(url);
+};
+
+// 服务事项查询/筛选
+const searchProj = () => {
+	MprojRef.value?.add(queryParam.projCode);
+};
+
+const toPage = (param) => {
+	projName.value = param.projName;
+	queryParam.projCode = param.projCode;
+	delete queryParam.bizType;
+	searchQuery();
+};
+
+const searchQuery = () => {
+	// 搜索查询逻辑
+	loadPage();
+};
+
+// 导出相关
+const exv = () => {
+	if (projName.value && queryParam.servState == '1') {
+		expArr.value = [];
+		formArr.value = [];
+		// 显示加载状态
+		Request.postJson('/kudas/xfwez/exv', { codex: queryParam }).then((res) => {
+			if (res.meta.success) {
+				JSON.parse(res.data.formJson).forEach((item) => {
+					if (['text', 'radio', 'number', 'time', 'checkbox', 'textarea', 'select'].includes(item.type)) {
+						item.value = {
+							name: item.name,
+							valu: `${item.label}${item.valu && item.valu.includes('/') && item.valu.includes(':') ? `(${item.valu})` : ''}`
+						};
+						formArr.value.push(item);
+						selectAll.value.push(item.value);
+					}
+				});
+			} else {
+				projTip.value = res.meta.message;
+			}
+		});
+	}
+};
+
+const exp = () => {
+	queryParam.fields = expArr.value;
+	expData();
+};
+
+// 服务作废
+const del = (item) => {
+	dialog.value = true;
+	delItem.value = item;
+	delNote.value = '';
+};
+
+const delSave = () => {
+	if (delNote.value) {
+		Request.postForm(url.delete, { id: delItem.value.id, note: delNote.value }).then((res) => {
+			if (res.meta.success) {
+				// 显示成功消息
+				dialog.value = false;
+				loadPage();
+			} else {
+				// 显示失败消息
+			}
+		});
+	} else {
+		// 显示错误消息
+	}
+};
+
+// 提示
+const tip = () => {
+	// 显示应用开发中的消息
+};
+
+// 工具函数
+const formatIdCard = (idcard) => {
+	if (!idcard) return '';
+	return idcard.replace(/^(.{6})(?:\d+)(.{4})$/, '$1********$2');
+};
+
+const formatDate = (dateStr) => {
+	if (!dateStr) return '';
+	const date = new Date(dateStr);
+	return `${date.getFullYear()}年${String(date.getMonth() + 1).padStart(2, '0')}月${String(date.getDate()).padStart(2, '0')}日 ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
+};
+
+const getServStateClass = (state) => {
+	return state == '0' ? 'bg-blue-lighten-5 text-blue' : 'bg-green-lighten-5 text-green';
+};
+
+const getServStateText = (state) => {
+	return state == '0' ? '服务中' : '已服务';
+};
+
+const getRateStateClass = (state) => {
+	return state == '0' ? 'bg-orange-lighten-5 text-orange' : 'bg-blue-lighten-5 text-blue';
+};
+
+const getRateStateText = (state) => {
+	return state == '0' ? '未评价' : '已评价';
+};
+
+const getServFromText = (from) => {
+	const fromMap = {
+		'100': '特殊渠道',
+		'101': '移动端代办',
+		'102': '窗口端通办',
+		'200': '特殊渠道',
+		'210': '浙里办App',
+		'211': '浙里办微信小程序',
+		'212': '浙里办支付宝小程序',
+		'230': '微信小程序',
+		'240': '支付宝小程序',
+		'250': '自助机',
+		'300': '特殊渠道',
+		'310': '服务外包代办'
+	};
+	return fromMap[from] || from;
+};
+</script>
+
+<style lang="scss" scoped>
+.state_btg {
+	padding-right: 0;
+	height: 100%;
+	background: url(../../assets/img/objs_btg.png) no-repeat;
+	background-size: 80px;
+	background-position: 100% 100%;
+}
+
+:deep(.v-tab) {
+	background: url(../../assets/img/tab-2.png) no-repeat;
+	background-size: 100% 100%;
+	width: 150px;
+	margin-left: -11px;
+	border-top-left-radius: 20px;
+	border-top-right-radius: 20px;
+	span {
+		z-index: 99;
+	}
+}
+
+/* Dark theme */
+.v-theme--dark {
+	:deep(.v-tab) {
+		background: url(../../assets/img/tab-4.png) no-repeat;
+		background-size: 100% 100%;
+	}
+
+	:deep(.v-tabs__slider) {
+		background: url(../../assets/img/tab-3.png) no-repeat !important;
+		background-size: 100% 100% !important;
+	}
+}
+
+:deep(.v-tab::before),
+:deep(.v-tab:focus::before),
+:deep(.v-tab:hover::before) {
+	background-color: transparent !important;
+	opacity: 0 !important;
+}
+
+:deep(.v-tabs__slider) {
+	height: 38px !important;
+	background: url(../../assets/img/tab-1.png) no-repeat;
+	background-size: 100% 100%;
+}
+
+.expBox {
+	:deep(td) {
+		border-bottom: thin solid rgba(123, 123, 123, 0.22);
+	}
+
+	:deep(.v-data-table__empty-wrapper td) {
+		border: none;
+	}
+
+	:deep(.v-checkbox.v-selection-control--dirty) {
+		background-color: rgba(33, 149, 243, 0.06) !important;
+
+		.v-label {
+			color: rgb(33, 150, 243) !important;
+		}
+
+		.active {
+			color: rgb(33, 150, 243);
+			display: inline-block !important;
+		}
+	}
+
+	:deep(.v-selection-control__input) {
+		display: none;
+	}
+
+	:deep(.v-checkbox) {
+		padding: 4px 8px 4px 10px;
+		border-radius: 6px;
+		background-color: rgba(117, 117, 117, 0.06);
+
+		.v-label {
+			margin-top: 3px;
+			font-size: 12px;
+		}
+	}
+}
+</style>

package/src/components/assembly/VtkRadio.vue

@@ -0,0 +1,82 @@
+<template>
+  <VRadioGroup v-bind="attrs" :modelValue="modelValue" @update:modelValue="onUpdate">
+    <VRadio
+      v-for="item in items"
+      :key="item.id || item.code"
+      :label="item.codeValue"
+      :value="item.code"
+    />
+  </VRadioGroup>
+</template>
+
+<script setup>
+import { ref, onMounted, useAttrs } from 'vue';
+import Request from '../../commons/request';
+
+// 定义组件名称
+defineOptions({
+  name: "VtkRadio",
+  inheritAttrs: false,
+});
+// 定义 props
+const props = defineProps({
+  /**
+   * 字典来源：
+   * - 静态数据，如："0:否/1:是"
+   * - 字典键名，如："DISABLE_TYPE"
+   */
+  list: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number],
+    default: null,
+  },
+});
+
+// 定义 emit 事件
+const emit = defineEmits(['update:modelValue']);
+
+// 获取透传属性（替代 $attrs）
+const attrs = useAttrs();
+
+// 响应式数据
+const items = ref([]);
+
+// 处理静态数据
+const statc = () => {
+  props.list.split('/').forEach(it => {
+    const [code, codeValue] = it.split(':');
+    items.value.push({ code, codeValue });
+  });
+};
+
+// 请求远程字典
+const miscs = async () => {
+  try {
+    const res = await Request.getForm(`dict/misc/list/${props.list}`);
+    items.value = res.data || [];
+  } catch (error) {
+    console.error('[VtkRadio] Failed to load dictionary:', error);
+    items.value = [];
+  }
+};
+
+// 更新 v-model 值
+const onUpdate = (val) => {
+  emit('update:modelValue', val);
+};
+
+// 初始化数据
+onMounted(() => {
+  if (props.list.includes(':')) {
+    statc();
+  } else {
+    miscs();
+  }
+});
+</script>
+
+<style scoped>
+</style>