first
This commit is contained in:
ljw
@@ -0,0 +1,155 @@
|
||||
import { onActivated, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { create, list, remove, update } from '@/api/tag'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
export function useRepositories () {
|
||||
//获取query
|
||||
const route = useRoute()
|
||||
const user_id = route.query?.user_id
|
||||
const listRes = reactive({
|
||||
list: [], total: 0, loading: false,
|
||||
})
|
||||
const listQuery = reactive({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
is_my: 0,
|
||||
user_id: user_id ? parseInt(user_id) : null,
|
||||
})
|
||||
|
||||
const flutterColor2rgba = (color) => {
|
||||
// color 是十进制的数字,先转成16进制
|
||||
let hex = color.toString(16)
|
||||
console.log('hex', hex)
|
||||
//前两位是透明度
|
||||
let alpha = hex.slice(0, 2)
|
||||
//后六位是颜色
|
||||
let rgba = hex.slice(2)
|
||||
return `rgba(${parseInt(rgba.slice(0, 2), 16)}, ${parseInt(rgba.slice(2, 4), 16)}, ${parseInt(rgba.slice(4, 6), 16)}, ${parseInt(alpha, 16) / 255})`
|
||||
}
|
||||
|
||||
const rgba2flutterColor = (color) => {
|
||||
console.log('color', color)
|
||||
//rgba(133, 33, 33, 0.81)
|
||||
let rgba = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+(\.\d+)?)\)/)
|
||||
console.log('rgba', rgba)
|
||||
let alpha = Math.round(parseFloat(rgba[4]) * 255).toString(16)
|
||||
let r = parseInt(rgba[1]).toString(16)
|
||||
let g = parseInt(rgba[2]).toString(16)
|
||||
let b = parseInt(rgba[3]).toString(16)
|
||||
//如果是1位要补位
|
||||
if (alpha.length === 1) {
|
||||
alpha = '0' + alpha
|
||||
}
|
||||
if (r.length === 1) {
|
||||
r = '0' + r
|
||||
}
|
||||
if (g.length === 1) {
|
||||
g = '0' + g
|
||||
}
|
||||
if (b.length === 1) {
|
||||
b = '0' + b
|
||||
}
|
||||
return parseInt(alpha + r + g + b, 16)
|
||||
}
|
||||
|
||||
const getList = async () => {
|
||||
listRes.loading = true
|
||||
const res = await list(listQuery).catch(_ => false)
|
||||
listRes.loading = false
|
||||
if (res) {
|
||||
listRes.list = res.data.list.map(item => {
|
||||
item.color = flutterColor2rgba(item.color)
|
||||
return item
|
||||
})
|
||||
listRes.total = res.data.total
|
||||
}
|
||||
}
|
||||
const handlerQuery = () => {
|
||||
if (listQuery.page === 1) {
|
||||
getList()
|
||||
} else {
|
||||
listQuery.page = 1
|
||||
}
|
||||
}
|
||||
|
||||
const del = async (row) => {
|
||||
const cf = await ElMessageBox.confirm('确定删除么?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).catch(_ => false)
|
||||
if (!cf) {
|
||||
return false
|
||||
}
|
||||
|
||||
const res = await remove({ id: row.id }).catch(_ => false)
|
||||
if (res) {
|
||||
ElMessage.success('操作成功')
|
||||
getList()
|
||||
}
|
||||
}
|
||||
onMounted(getList)
|
||||
onActivated(getList)
|
||||
|
||||
watch(() => listQuery.page, getList)
|
||||
|
||||
watch(() => listQuery.page_size, handlerQuery)
|
||||
|
||||
const formVisible = ref(false)
|
||||
const formData = reactive({
|
||||
id: 0,
|
||||
name: '',
|
||||
color: 0,
|
||||
user_id: 0,
|
||||
})
|
||||
const currentColor = ref('')
|
||||
const activeChange = (c) => {
|
||||
console.log(c)
|
||||
currentColor.value = c
|
||||
}
|
||||
const toEdit = (row) => {
|
||||
console.log('row', row)
|
||||
formVisible.value = true
|
||||
formData.id = row.id
|
||||
formData.name = row.name
|
||||
formData.color = row.color
|
||||
formData.user_id = row.user_id
|
||||
}
|
||||
const toAdd = () => {
|
||||
formVisible.value = true
|
||||
formData.id = 0
|
||||
formData.name = ''
|
||||
formData.color = 0
|
||||
formData.user_id = 0
|
||||
}
|
||||
const submit = async () => {
|
||||
console.log(formData)
|
||||
const api = formData.id ? update : create
|
||||
const data = {
|
||||
...formData,
|
||||
color: rgba2flutterColor(formData.color),
|
||||
}
|
||||
console.log(data)
|
||||
const res = await api(data).catch(_ => false)
|
||||
if (res) {
|
||||
ElMessage.success('操作成功')
|
||||
formVisible.value = false
|
||||
getList()
|
||||
}
|
||||
}
|
||||
return {
|
||||
listRes,
|
||||
listQuery,
|
||||
getList,
|
||||
handlerQuery,
|
||||
del,
|
||||
formVisible,
|
||||
formData,
|
||||
toEdit,
|
||||
toAdd,
|
||||
submit,
|
||||
activeChange,
|
||||
currentColor,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="list-query" shadow="hover">
|
||||
<el-form inline label-width="60px">
|
||||
<el-form-item label="用户">
|
||||
<el-select v-model="listQuery.user_id" clearable>
|
||||
<el-option
|
||||
v-for="item in allUsers"
|
||||
:key="item.id"
|
||||
:label="item.username"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handlerQuery">筛选</el-button>
|
||||
<el-button type="danger" @click="toAdd">添加</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="list-body" shadow="hover">
|
||||
<el-table :data="listRes.list" v-loading="listRes.loading" border>
|
||||
<el-table-column prop="id" label="id" align="center"/>
|
||||
<el-table-column label="所属用户" align="center">
|
||||
<template #default="{row}">
|
||||
<span v-if="row.user_id"> <el-tag>{{ allUsers?.find(u => u.id === row.user_id)?.username }}</el-tag> </span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" align="center"/>
|
||||
<el-table-column prop="color" label="颜色" align="center">
|
||||
<template #default="{row}">
|
||||
<div class="colors">
|
||||
<div style="background-color: #efeff2" class="colorbox">
|
||||
<div :style="{backgroundColor: row.color}" class="dot">
|
||||
</div>
|
||||
</div>
|
||||
<div style="background-color: #24252b" class="colorbox">
|
||||
<div :style="{backgroundColor: row.color}" class="dot">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="创建时间" align="center"/>
|
||||
<el-table-column prop="updated_at" label="更新时间" align="center"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="{row}">
|
||||
<el-button @click="toEdit(row)">编辑</el-button>
|
||||
<el-button type="danger" @click="del(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<el-card class="list-page" shadow="hover">
|
||||
<el-pagination background
|
||||
layout="prev, pager, next, sizes, jumper"
|
||||
:page-sizes="[10,20,50,100]"
|
||||
v-model:page-size="listQuery.page_size"
|
||||
v-model:current-page="listQuery.page"
|
||||
:total="listRes.total">
|
||||
</el-pagination>
|
||||
</el-card>
|
||||
<el-dialog v-model="formVisible" :title="!formData.id?'创建':'修改'" width="800">
|
||||
<el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
|
||||
<el-form-item label="名称" prop="name" required>
|
||||
<el-input v-model="formData.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="颜色" prop="color" required>
|
||||
<el-color-picker v-model="formData.color" show-alpha @active-change="activeChange"></el-color-picker>
|
||||
<br>
|
||||
<div class="colors">
|
||||
<div style="background-color: #efeff2" class="colorbox">
|
||||
<div :style="{backgroundColor: currentColor}" class="dot">
|
||||
</div>
|
||||
</div>
|
||||
<div style="background-color: #24252b" class="colorbox">
|
||||
<div :style="{backgroundColor: currentColor}" class="dot">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户" prop="user_id" required>
|
||||
<el-select v-model="formData.user_id">
|
||||
<el-option
|
||||
v-for="item in allUsers"
|
||||
:key="item.id"
|
||||
:label="item.username"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="formVisible = false">取消</el-button>
|
||||
<el-button @click="submit" type="primary">提交</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, watch, ref, onActivated } from 'vue'
|
||||
import { list, create, update, detail, remove } from '@/api/tag'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { loadAllUsers } from '@/global'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useRepositories } from '@/views/tag/index'
|
||||
|
||||
|
||||
|
||||
const { allUsers, getAllUsers } = loadAllUsers()
|
||||
getAllUsers()
|
||||
const {
|
||||
listRes,
|
||||
listQuery,
|
||||
getList,
|
||||
handlerQuery,
|
||||
del,
|
||||
formVisible,
|
||||
formData,
|
||||
toEdit,
|
||||
toAdd,
|
||||
submit,
|
||||
activeChange,
|
||||
currentColor,
|
||||
} = useRepositories(0)
|
||||
|
||||
onMounted(getList)
|
||||
onActivated(getList)
|
||||
|
||||
watch(() => listQuery.page, getList)
|
||||
|
||||
watch(() => listQuery.page_size, handlerQuery)
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.list-query .el-select {
|
||||
--el-select-width: 160px;
|
||||
}
|
||||
|
||||
.colors {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.colorbox {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user