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