Leo_Ding/Hai_Lin_admin
1
0
Fork 0
generated from Leo_Ding/web-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

即将修改网站-联系我们-混乱中

Browse Source
This commit is contained in:
qingyu 2025-06-24 10:20:53 +08:00
parent bbd5816522
commit c561186c46
2 changed files with 326 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

371
src/views/product/components/EditDialog.vue
View File

@ -1,154 +1,191 @@
<template>
<a-modal
:open="modal.open"
:title="modal.title"
:width="640"
:confirm-loading="modal.confirmLoading"
:after-close="onAfterClose"
:cancel-text="cancelText"
:ok-text="okText"
@ok="handleOk"
@cancel="handleCancel">
<a-form
ref="formRef"
:model="formData"
:rules="formRules"
:label-col="{ style: { width: '90px' } }">
<a-modal :open="modal.open" :title="modal.title" :width="640" :confirm-loading="modal.confirmLoading"
:after-close="onAfterClose" :cancel-text="cancelText" :ok-text="okText" @ok="handleOk" @cancel="handleCancel">
<a-spin :spinning="spining">
<a-form ref="formRef" :model="formData" :rules="formRules">
<a-card class="mb-8-2">
<a-row :gutter="12">
<a-col :span="12">
<a-form-item
:label="$t('pages.system.user.form.username')"
name="username">
<a-input
:placeholder="$t('pages.system.user.form.username.placeholder')"
v-model:value="formData.username"></a-input>
<a-col :span="24">
<a-form-item :label="'产品名称'" name="title">
<a-input :placeholder="'请输入产品名称'" v-model:value="formData.title"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
:label="$t('pages.system.user.form.password')"
name="password">
<a-input-password
v-model:value="formData.password"
:placeholder="$t('pages.system.user.form.password.placeholder')" />
<a-col :span="24">
<a-form-item :label="'产品类别'" name="categoryID">
<div style="display: flex;justify-content: space-between;">
<a-select v-model:value="formData.categoryID" allowClear>
<a-select-option v-for="item in areaList" :value="item.code">{{ item.name }}</a-select-option>
</a-select>
<a-button type="primary" @click="childOpen = true">新增产品类别</a-button>
</div>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="12">
<a-form-item
:label="$t('pages.system.user.form.name')"
name="name">
<a-input
:placeholder="$t('pages.system.user.form.name.placeholder')"
v-model:value="formData.name"></a-input>
<a-col :span="24">
<a-form-item :label="'原料组成'" name="compose">
<a-textarea :placeholder="'请输入岗位要求'" v-model:value="formData.compose"></a-textarea>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
:label="$t('pages.system.user.form.roles')"
name="roles">
<a-col :span="24">
<a-form-item :label="'适用对象'" name="target">
<a-textarea :placeholder="'请输入岗位职责'" v-model:value="formData.target"></a-textarea>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item :label="'功能特点'" name="feature">
<a-select
v-model:value="formData.roles"
mode="multiple"
style="width: 100%"
:placeholder="$t('pages.system.user.form.roles.placeholder')"
:options="roles"
@change="handleChange"></a-select>
v-model:value="formData.feature"
mode="tags"
:placeholder="'请输入功能特点，按回车分隔'"
:token-separators="[',']"
style="width: 100%;"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="12">
<a-form-item
:label="$t('pages.system.user.form.phone')"
type="tel"
name="phone">
<a-input
:placeholder="$t('pages.system.user.form.phone.placeholder')"
type="tel"
v-model:value="formData.phone"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
:label="$t('pages.system.user.form.email')"
type="email"
name="email">
<a-input
:placeholder="$t('pages.system.user.form.email.placeholder')"
type="email"
v-model:value="formData.email"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="24">
<a-form-item
:label="$t('pages.system.user.form.remark')"
name="remark">
<a-textarea
:placeholder="$t('pages.system.user.form.remark.placeholder')"
v-model:value="formData.remark"></a-textarea>
v-for="(item, index) in formData.standard"
:key="index"
:label="`产品标准 ${index + 1}`">
<a-input
v-model:value="item.label"
placeholder="请输入标准名称（label）"
class="inputPhone"
/>
<a-input
v-model:value="item.value"
placeholder="请输入标准值（value）"
class="inputPhone"
style="margin-top: 8px"
/>
<a-button
danger
@click="removeStandard(index)"
size="small"
style="margin-top: 8px">
删除
</a-button>
</a-form-item>
<a-form-item>
<a-button type="dashed" block @click="addStandard">
新增产品标准
</a-button>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item v-for="(img, index) in formData.images" :key="index" :label="`产品图片 ${index + 1}`">
<x-upload-image v-model="formData.images[index]" @imgChange="(value) => imgChange(index, value)" />
<a-button danger @click="removeImage(index)" size="small">删除</a-button>
</a-form-item>
<a-form-item>
<a-button type="dashed" block @click="addImage">
新增产品图片
</a-button>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :span="24">
<a-form-item
:label="$t('pages.system.user.form.status')"
name="status">
<a-radio-group
v-model:value="formData.status"
:options="[
{ label: $t('pages.system.user.form.status.activated'), value: 'activated' },
{ label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
]"></a-radio-group>
<a-form-item :label="'产品排序'" name="sequence">
<a-input-number v-model:value="formData.sequence" :placeholder="'请输入排序'" style="width: 100%;" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item :label="'状态'" name="status">
<a-radio-group v-model:value="formData.status" :options="[
{ label: '启用', value: 'enabled' },
{ label: '停用', value: 'disabled' },]"></a-radio-group>
</a-form-item>
</a-col>
</a-row>
</a-card>
</a-form>
</a-spin>
<a-modal ref="modalRef" v-model:open="childOpen" :wrap-style="{ overflow: 'hidden' }" @ok="childHandleOk">
<a-card class="mb-8-2">
<a-form ref="areaFormRef" :model="formArea" :rules="areaFormRules">
<a-row :gutter="12">
<a-col :span="24">
<a-form-item :label="'产品类别名称'" name="name">
<a-input v-model:value="formArea.name" :placeholder="'请输入产品类别名称'" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item :label="'状态'" name="status" style="width: 100%;">
<a-radio-group v-model:value="formArea.status" :options="[
{ label: '启用', value: 'enabled' },
{ label: '停用', value: 'disabled' },
]"></a-radio-group>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-card>
<template #title>
<div ref="modalTitleRef" style="width: 100%; cursor: move">新增产品类别</div>
</template>
</a-modal>
</a-modal>
</template>
<script setup>
import { cloneDeep } from 'lodash-es'
import { ref } from 'vue'
import { ref, onBeforeMount } from 'vue'
import { config } from '@/config'
import apis from '@/apis'
import { useForm, useModal } from '@/hooks'
import { useForm, useModal,useSpining } from '@/hooks'
import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n'
import dayjs from 'dayjs'
const areaFormRef = ref()
const emit = defineEmits(['ok'])
const { t } = useI18n() // 解构出t方法
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formRecord, formData, formRef, formRules, resetForm } = useForm()
const { spining,showSpining,hideSpining} = useSpining()
const cancelText = ref(t('button.cancel'))
const okText = ref(t('button.confirm'))
const rolesValue = ref([])
const roles = ref([])
const imgUrl = ref('')
const areaList = ref([])
const childOpen = ref(false)
const formArea = ref({ name: '', status: 'enabled' })
formRules.value = {
name: { required: true, message: t('pages.system.user.form.username.placeholder') },
username: { required: true, message: t('pages.system.user.form.code.placeholder') },
status: { required: true, message: t('pages.system.user.form.status') },
roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }],
title: { required: true, message: '请输入产品名称' },
categoryID: { required: true, message: '请选择产品类别', trigger: 'change' },
compose: { required: true, message: '请选择产品适用对象', trigger: 'change' },
feature: [{ required: true, message: '请输入产品功能特点' }],
standard: [{ required: true, message: '请输入产品标准' }],
images: [{ required: true, message: '请上传产品图片' }],
sequence: [{ required: true, message: '请输入产品排序' }],
status: [{ required: true, message: '请选择状态', trigger: 'change' }],
}
/**
* 请求角色
*/
getRole()
/**
* select 选择框
*/
const handleChange = (value) => {
rolesValue.value = value
const areaFormRules = {
categoryIDName: [{ required: true, message: '请输入产品类别' }],
composeName: [{ required: true, message: '请输入产品适用对象' }],
status: [{ required: true, message: '请选择状态', trigger: 'change' }],
}
const initData = async () => {
try {
showSpining()
const { success, data, total } = await apis.products.getAreasList({ pageSize: 999, page: 1, })
if (config('http.code.success') === success) {
hideSpining()
areaList.value = data.map(item => {
if (item.status === 'enabled') {
return { code: item.id, name: item.name }
}
})
}
} catch (error) {
message.error({ content: error.message })
hideSpining()
}
}
/**
@ -157,26 +194,28 @@ const handleChange = (value) => {
function handleCreate() {
showModal({
type: 'create',
title: t('pages.system.user.add'),
title: '薪资招聘岗位',
})
initData()
formData.value.status = 'enabled'
}
async function getRole() {
const { success, data } = await apis.role.getRoleList().catch(() => {
throw new Error()
})
if (!success) {
return message.error('当前角色信息错误')
//新建基地
const childHandleOk = async () => {
areaFormRef.value.validateFields().then(async (values) => {
try {
const params = { ...formArea.value }
const { success } = await apis.recruitment.createAreaItem(params)
if (success) message.success('新增成功')
childOpen.value = false
formArea.value = { name: '', status: 'enabled' }
initData()
} catch (error) {
message.error(error.message)
}
let roleArr = []
if (data.length) {
data.forEach((item) => {
roleArr.push({
label: item.name,
value: item.id,
})
})
}
roles.value = roleArr
}
/**
* 编辑
@ -186,45 +225,38 @@ async function handleEdit(record = {}) {
type: 'edit',
title: t('pages.system.user.edit'),
})
const { data, success } = await apis.users.getUsers(record.id).catch()
const { data, success } = await apis.recruitment.getItem(record.id).catch()
if (!success) {
hideModal()
return
}
let roles = []
if (data.roles) {
roles = formatArr(data.roles, 'edit')
}
data.roles = roles
formRecord.value = data
formData.value = cloneDeep(data)
formData.value = { ...data }
imgUrl.value = config('http.apiBasic') + data.img
}
/**
* 确定
*/
function handleOk() {
formRef.value
.validateFields()
.then(async (values) => {
formRef.value.validateFields().then(async (values) => {
try {
showLoading()
const params = {
...values,
roles: formatArr(rolesValue.value),
img: formData.value.img,
pushAt: dayjs().format('YYYY-MM-DD'),
type: 'news'
}
let result = null
switch (modal.value.type) {
case 'create':
result = await apis.users.createUsers(params).catch(() => {
throw new Error()
result = await apis.recruitment.createItem(params).catch((error) => {
throw new Error(error)
})
break
case 'edit':
result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
throw new Error()
result = await apis.recruitment.updateItem(formData.value.id, params).catch(() => {
throw new Error(error)
})
break
}
@ -234,45 +266,22 @@ function handleOk() {
emit('ok')
}
} catch (error) {
message.error({ content: error.message })
hideLoading()
}
})
.catch(() => {
.catch((e) => {
console.log(e)
hideLoading()
})
}
/**
* 对权限组 过数据格式
*/
function formatArr(data, type = '') {
const rolesArr = []
data.forEach((item) => {
roles.value.forEach((r) => {
if (type === 'edit') {
if (item.role_id === r.value) {
rolesArr.push({
value: item.role_id,
label: r.label,
})
return
}
} else if (r.value === item) {
rolesArr.push({
role_id: item,
role_name: r.label,
})
return
}
})
})
return rolesArr
}
/**
* 取消
*/
function handleCancel() {
imgUrl.value = ''
hideModal()
}
@ -288,6 +297,28 @@ defineExpose({
handleCreate,
handleEdit,
})
// 添加标准
function addStandard() {
formData.value.standard.push({ label: '', value: '' })
}
// 删除标准
function removeStandard(index) {
if (formData.value.standard.length > 1) {
formData.value.standard.splice(index, 1)
}
}
// 添加图片
function addImage() {
formData.value.images.push('')
}
// 删除图片
function removeImage(index) {
if (formData.value.images.length > 1) {
formData.value.images.splice(index, 1)
}
}
</script>
<style lang="less" scoped></style>

100
src/views/product/index.vue
View File

@ -45,21 +45,32 @@
:pagination="paginationState" :scroll="{ x: 1000 }" @change="onTableChange">
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'introduce'">
<a-tooltip :title="record.introduce">
<div class="text-ellipsis">{{ record.introduce }}</div>
<template v-if="column.dataIndex === 'title'">
<a-tooltip :title="record.title">
<div class="text-ellipsis">{{ record.title }}</div>
</a-tooltip>
</template>
<template v-if="column.dataIndex === 'duty'">
<a-tooltip :title="record.duty">
<div class="text-ellipsis">{{ record.duty }}</div>
<template v-if="column.dataIndex === 'categoryID'">
<a-tooltip :title="record.categoryID">
<div class="text-ellipsis">{{ record.categoryID }}</div>
</a-tooltip>
</template>
<template v-if="column.dataIndex === 'compose'">
<a-tooltip :title="record.compose">
<div class="text-ellipsis">{{ record.compose }}</div>
</a-tooltip>
</template>
<template v-if="column.dataIndex === 'target'">
<a-tooltip :title="record.target">
<div class="text-ellipsis">{{ record.target }}</div>
</a-tooltip>
</template>
<template v-if="'status' === column.dataIndex">
<a-tag v-if="record.status === 'enabled'" :color="'green'">启用</a-tag>
<a-tag v-if="record.status === 'disabled'" :color="'red'">停用</a-tag>
</template>
<template v-if="'action' === column.key">
<x-action-button @click="$refs.editDialogRef.handleEdit(record)">
<a-tooltip>
@ -91,21 +102,66 @@ import { usePagination } from '@/hooks'
import EditDialog from './components/EditDialog.vue'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n'
import { delProductsItem, getProductsList } from '@/apis/modules/products'
defineOptions({
name: 'homeBanner',
name: 'components',
})
const { t } = useI18n() // 解构出t方法
// const columns = [
// { title: '产品名称', dataIndex: 'title', width: 120, },
// { title: '产品类别', dataIndex: 'categoryID', key: 'categoryID', width: 120 },
// { title: '原料组成', dataIndex: 'compose', key: 'compose',width: 120},
// { title: '适用对象', dataIndex: 'target',width: 120},
// { title: '功能特点', dataIndex: 'feature', width: 120, align: 'center'},
// { title: '产品标准', dataIndex: 'standard', width: 120, align: 'center'},
// { title: '产品图片', dataIndex: 'images', width: 120, align: 'center'},
// { title: '产品排序', dataIndex: 'sequence', width: 120, align: 'center'},
// { title: '产品状态', dataIndex: 'status',width:120 , align: 'center'},
// { title: t('button.action'), key: 'action', fixed: 'right', width: 100, align: 'center' },
// ]
const columns = [
{ title: '招聘岗位', dataIndex: 'title', width: 120, },
{ title: '所属基地', dataIndex: 'areaName', key: 'title', width: 150 },
{ title: '岗位要求', dataIndex: 'introduce', key: 'introduce'},
{ title: '岗位职责', dataIndex: 'duty',ellipsis: true,},
{ title: '薪资范畴', dataIndex: 'salary', width: 120, align: 'center'},
{ title: '岗位排序', dataIndex: 'sequence', width: 120, align: 'center'},
{ title: '状态', dataIndex: 'status',width:80 , align: 'center'},
{ title: '产品名称', dataIndex: 'title', width: 120 },
{ title: '产品类别', dataIndex: 'categoryID', key: 'categoryID', width: 120 },
{ title: '原料组成', dataIndex: 'compose', key: 'compose', width: 120 },
{ title: '适用对象', dataIndex: 'target', width: 120 },
{
title: '功能特点',
dataIndex: 'feature',
width: 120,
align: 'center',
customRender: ({ text }) => Array.isArray(text) ? text.join(', ') : ''
},
{
title: '产品标准',
dataIndex: 'standard',
width: 120,
align: 'center',
customRender: ({ text }) => Array.isArray(text)
? text.map(item => `${item.label}: ${item.value}`).join(', ')
: ''
},
{
title: '产品图片',
dataIndex: 'images',
width: 120,
align: 'center',
customRender: ({ text }) => {
if (Array.isArray(text) && text.length > 0) {
return `<img src="${text[0]}" alt="产品图" style="width:40px;height:40px;object-fit:cover;" />`
}
return '-'
}
},
{ title: '产品排序', dataIndex: 'sequence', width: 120, align: 'center' },
{ title: '产品状态', dataIndex: 'status', width: 120, align: 'center' },
{ title: t('button.action'), key: 'action', fixed: 'right', width: 100, align: 'center' },
]
const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } =
usePagination()
@ -119,8 +175,8 @@ async function getPageList() {
try {
showLoading()
const { pageSize, current } = paginationState
const { success, data, total } = await apis.recruitment
.getDataList({
const { success, data, total } = await apis.products
.getProductsList({
pageSize,
page: current,
...searchFormData.value,
@ -150,7 +206,7 @@ function handleDelete({ id }) {
return new Promise((resolve, reject) => {
; (async () => {
try {
const { success } = await apis.recruitment.delItem(id).catch(() => {
const { success } = await apis.products.delProductsItem(id).catch(() => {
throw new Error()
})
if (config('http.code.success') === success) {
@ -198,6 +254,16 @@ async function onOk() {
message.success(t('component.message.success.delete'))
await getPageList()
}
function addImage() {
images.value.push('')
}
function removeImage(index) {
if (images.value.length > 1) {
images.value.splice(index, 1)
}
}
</script>
<style lang="less" scoped></style>