6 changed files with 205 additions and 2 deletions
-
9src/apis/color.ts
-
64src/components/color/Edit/index.vue
-
2src/libs/utils.ts
-
13src/router/routes.ts
-
11src/types/color.d.ts
-
108src/views/color/index.vue
@ -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}`) |
@ -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> |
@ -0,0 +1,11 @@ |
|||
declare namespace Color { |
|||
interface ColorItem { |
|||
id?: number |
|||
createTime?: string |
|||
updateTime?: string |
|||
code?: string |
|||
name?: string |
|||
tolerance?: number// 容差
|
|||
description?: string// 描述
|
|||
} |
|||
} |
@ -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> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue