Browse Source

feat: 颜色管理

master
guoapeng 1 week ago
parent
commit
c884ddddbf
  1. 9
      src/apis/color.ts
  2. 64
      src/components/color/Edit/index.vue
  3. 2
      src/libs/utils.ts
  4. 13
      src/router/routes.ts
  5. 11
      src/types/color.d.ts
  6. 108
      src/views/color/index.vue

9
src/apis/color.ts

@ -0,0 +1,9 @@
import http from 'libs/http'
export const getcolorList = (params: System.Page = { pageNum: 1, pageSize: 999 }): Promise<System.PageResponse<Color.ColorItem>> => http.post(`/color/list`, params)
export const saveColor = (params: Color.ColorItem): Promise<null> => http.post(`/color`, params)
export const editColor = (params: Color.ColorItem): Promise<null> => http.put(`/color`, params)
export const delColor = (ids: string): Promise<null> => http.delete(`/color/${ids}`)

64
src/components/color/Edit/index.vue

@ -0,0 +1,64 @@
<script setup lang="ts">
import { editColor, saveColor } from 'apis/color'
import { editSols, saveSols } from 'apis/solution'
import { FtMessage } from 'libs/message'
import { inject, ref } from 'vue'
const emits = defineEmits(['ok', 'cancel'])
const data = inject<Color.ColorItem>('currentData')
const form = ref<Color.ColorItem>({ ...(data as any)?.value })
const formRef = ref()
const rules = {
code: [
{ required: true, message: '请选择颜色', trigger: 'change' },
],
name: [
{ required: true, message: '请输入颜色名称', trigger: 'blur' },
],
tolerance: [
{ required: true, message: '请输入容差', trigger: 'blur' },
],
description: [
{ required: true, message: '请输入描述', trigger: 'blur' },
],
}
const okHandle = async () => {
try {
const valid = await formRef.value.validate()
if (!valid) {
return
}
if (data?.value.id) {
await editColor(form.value)
}
else {
await saveColor(form.value)
}
FtMessage.success('保存成功')
emits('ok')
}
catch (error) {
console.log(error)
}
}
const cancel = () => {
emits('cancel')
}
</script>
<template lang="pug">
FtDialog(visible :title="data?.id ? '编辑' : '新增'" width="40%" :ok-handle="okHandle" @cancel="cancel")
el-form(ref="formRef" label-width="auto" :model="form" :rules="rules")
el-form-item(label="颜色" prop="code")
el-color-picker(v-model="form.code" show-alpha )
el-form-item(label="颜色名称" prop="name")
el-input(v-model="form.name" placeholder="请输入颜色名称")
el-form-item(label="容差" prop="tolerance" )
el-input(v-model="form.tolerance" placeholder="请输入容差" type="number")
el-form-item(label="描述" prop="description")
el-input(v-model="form.description" type="textarea" placeholder="请输入描述")
</template>

2
src/libs/utils.ts

@ -117,6 +117,6 @@ export function formatDateTime(template: string = 'YYYY-MM-DD HH:mm:ss', now: Da
export function allPropertiesDefined(obj: Record<string, any>, excludeKeys: string[] = []): boolean {
return Object.entries(obj).every(([key, value]) => {
return excludeKeys.includes(key) ? true : value
return excludeKeys.includes(key) || value === false ? true : value
})
}

13
src/router/routes.ts

@ -80,6 +80,17 @@ const authRoutes: RouteRecordRaw[] = [
},
},
{
path: '/color',
name: 'color',
component: () => import('views/color/index.vue'),
meta: {
isDefault: true,
title: '颜色管理',
icon: n_liquid_config,
activeIcon: s_liquid_config,
},
},
{
path: '/craft',
name: 'craft',
component: () => import('views/craft/index.vue'),
@ -117,7 +128,7 @@ const authRoutes: RouteRecordRaw[] = [
name: 'systemConfig',
component: () => import('views/systemConfig/index.vue'),
meta: {
isDefault: true,
isDefault: false,
title: '系统配置',
icon: n_setting,
activeIcon: s_setting,

11
src/types/color.d.ts

@ -0,0 +1,11 @@
declare namespace Color {
interface ColorItem {
id?: number
createTime?: string
updateTime?: string
code?: string
name?: string
tolerance?: number// 容差
description?: string// 描述
}
}

108
src/views/color/index.vue

@ -0,0 +1,108 @@
<script lang="ts" setup>
import { delColor, getcolorList } from 'apis/color'
import Edit from 'components/color/Edit/index.vue'
import { ElMessageBox } from 'element-plus'
import { FtMessage } from 'libs/message'
import { provide, ref, useTemplateRef } from 'vue'
const visible = ref(false)
const currentData = ref<Solution.SolutionItem>()
provide('currentData', currentData)
const addSolution = () => {
currentData.value = {}
visible.value = true
}
const editSolution = (data: Solution.SolutionItem[]) => {
currentData.value = data[0]
visible.value = true
}
const tableRef = useTemplateRef('tableRef')
const delSolution = (data: Solution.SolutionItem[]) => {
ElMessageBox.confirm(
'确认删除选中的数据吗?',
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
},
).then(() => {
const ids = data.map(item => item.id)
delColor(ids.join(',')).then(() => {
FtMessage.success('删除成功')
tableRef.value?.initData()
})
})
}
const okHandle = () => {
tableRef.value?.initData()
visible.value = false
}
const columns = [
{
type: 'selection',
},
{
title: '颜色名称',
key: 'name',
},
{
title: '颜色',
render: (row: Color.ColorItem) => {
return h('div', {
style: {
width: '20px',
height: '20px',
borderRadius: '50%',
backgroundColor: row.code,
},
})
},
},
{
title: '容差',
key: 'tolerance',
},
{
title: '描述',
key: 'description',
},
{
title: '创建时间',
key: 'createTime',
},
]
const btnList = [
{
name: '新增',
type: 'primary',
serverUrl: 'add',
serverCondition: 0,
},
{
name: '编辑',
type: 'primary',
serverUrl: 'edit',
serverCondition: 1,
},
{
name: '删除',
type: 'danger',
serverUrl: 'del',
serverCondition: 2,
},
]
</script>
<template lang="pug">
div
ft-table(ref="tableRef", has-page, has-header, :columns="columns", :btn-list="btnList", :get-data-fn="getcolorList", @add="addSolution", @edit="editSolution", @del="delSolution")
Edit(v-if="visible", @ok="okHandle", @cancel="visible = false")
</template>
Loading…
Cancel
Save