标签管理

components.d.ts

@@ -75,4 +75,7 @@ declare module 'vue' {
     VerifySlide: typeof import('./src/components/Verifition/Verify/VerifySlide.vue')['default']
     WangEditor: typeof import('./src/components/FormUI/wangEditor/index.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

src/views/recruit/enterprise/newTalentMap/tag/index.vue

@@ -1,9 +1,266 @@
 <template>
-	<div>标签</div>
+	<div>
+		<CtFilter :items="filterItems" @reset="handleReset" @search="handleSearch" />
+
+		<v-card elevation="5" class="mt-3">
+			<CtTable
+				:items="items"
+				class="pa-3"
+				:headers="headers"
+				:loading="loading"
+				:disable-sort="true"
+				:elevation="0"
+				:isTools="true"
+				height="calc(100vh - 400px)"
+				:showPage="true"
+				:showFixedLastItem="true"
+				:total="total"
+				:pageInfo="query"
+				itemKey="id"
+				@pageHandleChange="handleChangePage"
+				@add="handle"
+			>
+				<template #actions="{ item }">
+					<v-btn variant="text" color="primary" @click.stop="handle(1, item)">编 辑</v-btn>
+					<v-btn variant="text" color="warning" @click.stop="handle(2, item)">禁 用</v-btn>
+					<v-btn variant="text" color="error" @click.stop="handle(3, item)">删 除</v-btn>
+				</template>
+			</CtTable>
+		</v-card>
+
+		<!-- <v-navigation-drawer v-model="dialog" absolute location="right" rounded temporary width="700" class="pa-5">
+		</v-navigation-drawer> -->
+
+		<CtDialog :visible="dialog" :widthType="4" :footer="true" titleClass="text-h6" :title="title" @submit="handleSubmit" @close="dialog = false">
+			<CtForm ref="formPageRef" :items="formItems">
+			</CtForm>
+		</CtDialog>
+
+	</div>
 </template>
 
 <script setup>
 defineOptions({ name: 'newTalentMapTag'})
+import { ref } from 'vue'
+import { getNewAppointmentsPage } from '@/api/recruit/enterprise/newlyAppointed'
+import Snackbar from '@/plugins/snackbar'
+import Confirm from '@/plugins/confirm'
+import { timesTampChange } from '@/utils/date'
+
+const loading = ref(false)
+const total = ref(10)
+const query = ref({
+  pageSize: 10,
+	pageNo: 1
+})
+const items = ref([])
+const headers = [
+	{ title: '标签名称', key: 'announceTime', sortable: false },
+  { title: '标签分类', key: 'nameChinese', sortable: false },
+  { title: '描述', key: 'introduce', sortable: false },
+  { title: '标签状态', key: 'status', sortable: false },
+  { title: '创建时间', key: 'createTimeTamp', sortable: false },
+  { title: '创建人', key: 'createPerson', sortable: false },
+  { title: '更新时间', key: 'updateTimeTamp', sortable: false },
+  { title: '修改人', key: 'updatePerson', sortable: false },
+  { title: '操作', key: 'actions', sortable: false, align: 'center' }
+]
+const filterItems = ref({
+  options: [
+		{
+      type: 'text',
+      key: 'nameChinese',
+      value: '',
+      label: '标签分类',
+			clearable: true,
+			hideDetails: true,
+			width: 200
+    },
+		{
+      type: 'text',
+      key: 'nameEnglish',
+      value: '',
+      label: '标签名称',
+			clearable: true,
+			hideDetails: true,
+			width: 200
+    },
+		{
+      type: 'autocomplete',
+      key: 'status',
+      value: null,
+      label: '标签状态',
+			clearable: true,
+			hideDetails: true,
+			width: 200,
+			items: [{label: '禁用', value: '禁用'}, {label: '启用', value: '启用'}]
+    },
+  ]
+})
+
+const formItems = ref({
+  options: [
+    {
+      type: 'text',
+      key: 'announceTime',
+      value: '',
+      label: '标签名称 *',
+      rules: [v => !!v || '请输入标签名称']
+    },
+    {
+      type: 'text',
+      key: 'nameChinese',
+      value: '',
+      label: '标签分类 *',
+      rules: [v => !!v || '请输入标签分类']
+    },
+    {
+      type: 'textarea',
+      key: 'introduce',
+      value: null,
+      counter: 2000,
+      rows: 2,
+      label: '描述',
+      outlined: true
+    },
+    {
+      type: 'ifRadio',
+      key: 'type',
+      value: '0',
+      default: '0',
+      label: '是否启用 *',
+      width: 90,
+      items: [
+        { label: '启用', value: '0' },
+        { label: '禁用', value: '1' }
+      ]
+    },
+    {
+      type: 'text',
+      key: 'createTimeTamp',
+      value: '',
+      label: '创建时间',
+      noParam: true,
+      disabled: true,
+    },
+    {
+      type: 'text',
+      key: 'createPerson',
+      value: '',
+      label: '创建人',
+      noParam: true,
+      disabled: true,
+    },
+    {
+      type: 'text',
+      key: 'updateTimeTamp',
+      value: '',
+      label: '修改时间',
+      noParam: true,
+      disabled: true,
+    },
+    {
+      type: 'text',
+      key: 'updatePerson',
+      value: '',
+      label: '修改人',
+      noParam: true,
+      disabled: true,
+    },
+  ]
+})
+
+// 获取新任命分页
+const getList = async () => {
+	loading.value = true
+	try {
+		const result = await getNewAppointmentsPage(query.value)
+		items.value = result?.list?.map(e => {
+			const res = {
+				createTimeTamp: e.createTime ? timesTampChange(e.createTime) : null,
+				updateTimeTamp: e.updateTime ? timesTampChange(e.updateTime) : null,
+				...e
+			}
+			return res
+		})
+		console.log('items:', items.value)
+		total.value = result.total
+	} finally {
+		loading.value = false
+	}
+}
+getList()
+
+// 分页切换
+const handleChangePage = async (e) => {
+	query.value.pageNo = e
+	getList()
+}
+
+// 搜索
+const handleSearch = async (obj) => {
+	query.value = Object.assign(query.value, obj)
+	query.value.pageNo = 1
+	getList()
+}
+// 重置
+const handleReset = (obj) => {
+	query.value = Object.assign(query.value, obj)
+	query.value.pageNo = 1
+	getList()
+}
+
+const getValue = () => {
+  return formItems.value.options.reduce((res, item) => {
+    if (!e.noParam) res[item.key] = item.value
+    return res
+  }, {})
+}
+
+const handleSubmit = async () => {
+  const { valid } = await formPageRef.value.formRef.validate()
+  if (!valid) return
+  const obj = getValue()
+	if (itemObj.value) obj.id = itemObj.value.id
+  await getNewAppointmentsPage(obj)
+	Snackbar.success(`${title.value}成功`)
+}
+
+const setValue = (item) => {
+  formItems.value.options.forEach(e => {
+		e.value = item ? item[e.key] || null : e.default || null
+		e.hide = !item && e.noParam ? true : false
+  })
+}
+
+const title = ref('')
+const itemObj = ref(null)
+const dialog = ref(false)
+const handle = async (index, item) => {
+	if (index === 1) {
+		title.value = '编辑'
+		itemObj.value = item
+		setValue(item)
+	} else if (index === 2 || index === 3) {
+		// 禁用 // 删除
+		const del = Boolean(index === 3)
+		const tagTxt = item?.title ? `【${item.title}】` : '此'
+		const text = del ? `是否确认删除${tagTxt}标签？` : `是否确认禁用${tagTxt}标签？`
+		const api = del ? getNewAppointmentsPage : getNewAppointmentsPage
+		Confirm('系统提示', text).then(async () => {
+			if (!e?.id) return Snackbar.error('数据错误请刷新重试！')
+			await api(e.id)
+			Snackbar.success(del ? '删除成功！' : '禁用标签成功！')
+			getList()
+		})
+		return
+	} else {
+		title.value = '新增'
+		setValue(item)
+	}
+	dialog.value = true
+}
+
 </script>
 
 <style scoped lang="scss">