agent allow store + update + delete

This commit is contained in:
xiaomlove
2021-04-16 19:04:01 +08:00
parent dc7aa33036
commit d734788363
10 changed files with 240 additions and 150 deletions
+4 -2
View File
@@ -2,6 +2,8 @@ import { createApp } from 'vue'
import { ElButton, ElContainer, ElAside, ElHeader, ElMain, ElFooter, ElMenu, ElSubmenu, ElMenuItemGroup, ElMenuItem, ElForm, ElFormItem, ElInput, ElPopover, ElTag, ElCard, ElTable, ElTableColumn, ElPagination, ElDialog, ElPopconfirm, ElUpload, ElLoading, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCascader, ElCheckbox, ElInputNumber } from 'element-plus' import { ElButton, ElContainer, ElAside, ElHeader, ElMain, ElFooter, ElMenu, ElSubmenu, ElMenuItemGroup, ElMenuItem, ElForm, ElFormItem, ElInput, ElPopover, ElTag, ElCard, ElTable, ElTableColumn, ElPagination, ElDialog, ElPopconfirm, ElUpload, ElLoading, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCascader, ElCheckbox, ElInputNumber } from 'element-plus'
import App from './App.vue' import App from './App.vue'
import router from './router/index' import router from './router/index'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'
// import 'element-plus/lib/theme-chalk/index.css' // import 'element-plus/lib/theme-chalk/index.css'
@@ -60,8 +62,8 @@ app.use(ElButton)
.use(ElSubmenu) .use(ElSubmenu)
.use(ElMenuItemGroup) .use(ElMenuItemGroup)
.use(ElMenuItem) .use(ElMenuItem)
.use(ElForm) .use(ElForm, { locale })
.use(ElFormItem) .use(ElFormItem, { locale })
.use(ElInput) .use(ElInput)
.use(ElPopover) .use(ElPopover)
.use(ElTag) .use(ElTag)
+6 -1
View File
@@ -92,7 +92,12 @@ const router = createRouter({
{ {
path: '/agent-allow', path: '/agent-allow',
name: 'agent-allow', name: 'agent-allow',
component: () => import(/* webpackChunkName: "account" */ '../views/AgentAllow/index.vue') component: () => import(/* webpackChunkName: "account" */ '../views/AgentAllow/index.vue'),
},
{
path: '/agent-allow-form',
name: 'agent-allow-form',
component: () => import(/* webpackChunkName: "account" */ '../views/AgentAllow/form.vue'),
} }
] ]
}) })
+14 -1
View File
@@ -2,10 +2,23 @@ import axios from "./axios";
const baseUrl = 'http://nexus-php8.tinyhd.net/api/'; const baseUrl = 'http://nexus-php8.tinyhd.net/api/';
const api = { const api = {
listAllowAgent: (params = {}) => { listAllowAgent: (params = {}) => {
return axios.get(baseUrl + 'agent-allow', {params: params}); return axios.get(baseUrl + 'agent-allow', {params: params});
} },
storeAllowAgent: (params = {}) => {
return axios.post(baseUrl + 'agent-allow', params);
},
updateAllowAgent: (id, params = {}) => {
return axios.put(baseUrl + 'agent-allow/' + id, params);
},
getAllowAgent: (id) => {
return axios.get(baseUrl + 'agent-allow/' + id);
},
deleteAllowAgent: (id) => {
return axios.delete(baseUrl + 'agent-allow/' + id);
},
} }
export default api export default api
+4 -1
View File
@@ -22,6 +22,10 @@ axios.interceptors.response.use(res => {
ElMessage.error('服务端异常!') ElMessage.error('服务端异常!')
return Promise.reject(res) return Promise.reject(res)
} }
if (res.data.data.ret && res.data.data.ret != 0) {
ElMessage.error(res.data.data.msg)
return Promise.reject(res)
}
if (res.data.resultCode && res.data.resultCode != 200) { if (res.data.resultCode && res.data.resultCode != 200) {
if (res.data.message) ElMessage.error(res.data.message) if (res.data.message) ElMessage.error(res.data.message)
if (res.data.resultCode == 419) { if (res.data.resultCode == 419) {
@@ -29,7 +33,6 @@ axios.interceptors.response.use(res => {
} }
return Promise.reject(res.data) return Promise.reject(res.data)
} }
return res.data.data return res.data.data
}) })
+164 -118
View File
@@ -1,82 +1,170 @@
<template> <template>
<el-dialog <div class="add">
:title="type == 'add' ? '添加轮播图' : '修改轮播图'" <el-card class="add-container">
v-model="visible" <el-form :model="goodForm" :rules="rules" ref="goodRef" class="goodForm" label-width="150px" style="width: 50%">
width="400px" <el-form-item label="系列" prop="family">
> <el-input type="text" v-model="goodForm.family" placeholder=""></el-input>
<el-form :model="ruleForm" :rules="rules" ref="formRef" label-width="100px" class="good-form"> </el-form-item>
<el-form-item label="图片" prop="url"> <el-form-item label="起始名称" prop="start_name">
<el-upload <el-input type="text" v-model="goodForm.start_name" placeholder=""></el-input>
class="avatar-uploader" </el-form-item>
:action="uploadImgServer"
accept="jpg,jpeg,png" <el-form-item label="Agent 起始" prop="agent_start">
:headers="{ <el-input type="text" v-model="goodForm.agent_start" placeholder=""></el-input>
token: token </el-form-item>
}" <el-form-item label="Agent 模式串" prop="agent_pattern">
:show-file-list="false" <el-input type="text" v-model="goodForm.agent_pattern" placeholder=""></el-input>
:before-upload="handleBeforeUpload" </el-form-item>
:on-success="handleUrlSuccess" <el-form-item label="Agent 匹配次数" prop="agent_match_num">
> <el-input type="number" min="0" v-model="goodForm.agent_match_num" placeholder=""></el-input>
<img style="width: 200px; height: 100px; border: 1px solid #e9e9e9;" v-if="ruleForm.url" :src="ruleForm.url" class="avatar"> </el-form-item>
<i v-else class="el-icon-plus avatar-uploader-icon"></i> <el-form-item label="Agent 匹配类型" prop="agent_matchtype">
</el-upload> <el-radio v-model="goodForm.agent_matchtype" label="dec">十进制</el-radio>
</el-form-item> <el-radio v-model="goodForm.agent_matchtype" label="hex">十六进制</el-radio>
<el-form-item label="跳转链接" prop="link"> </el-form-item>
<el-input type="text" v-model="ruleForm.link"></el-input>
</el-form-item> <el-form-item label="Peer ID 起始" prop="peer_id_start">
<el-form-item label="排序值" prop="sort"> <el-input type="text" v-model="goodForm.peer_id_start" placeholder=""></el-input>
<el-input type="number" v-model="ruleForm.sort"></el-input> </el-form-item>
</el-form-item> <el-form-item label="Peer ID 模式串" prop="peer_id_pattern">
</el-form> <el-input type="text" v-model="goodForm.peer_id_pattern" placeholder=""></el-input>
<template #footer> </el-form-item>
<span class="dialog-footer"> <el-form-item label="Peer ID 匹配次数" prop="peer_id_match_num">
<el-button @click="visible = false"> </el-button> <el-input type="number" min="0" v-model="goodForm.peer_id_match_num" placeholder=""></el-input>
<el-button type="primary" @click="submitForm"> </el-button> </el-form-item>
</span> <el-form-item label="Peer ID 匹配类型" prop="peer_id_matchtype">
</template> <el-radio v-model="goodForm.peer_id_matchtype" label="dec">十进制</el-radio>
</el-dialog> <el-radio v-model="goodForm.peer_id_matchtype" label="hex">十六进制</el-radio>
</el-form-item>
<el-form-item label="排除部分" prop="exception">
<el-radio v-model="goodForm.exception" label="yes"></el-radio>
<el-radio v-model="goodForm.exception" label="no"></el-radio>
</el-form-item>
<el-form-item label="允许 https" prop="allowhttps">
<el-radio v-model="goodForm.allowhttps" label="yes"></el-radio>
<el-radio v-model="goodForm.allowhttps" label="no"></el-radio>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="goodForm.comment" placeholder=""></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitAdd()">{{ id ? '立即修改' : '立即创建' }}</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template> </template>
<script> <script>
import { reactive, ref, toRefs } from 'vue' import { reactive, ref, toRefs, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
import WangEditor from 'wangeditor'
import axios from '@/utils/axios' import axios from '@/utils/axios'
import { localGet, uploadImgServer, hasEmoji } from '@/utils' import api from '@/utils/api'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { localGet, uploadImgServer, uploadImgsServer, hasEmoji } from '@/utils'
export default { export default {
name: 'DialogAddSwiper', setup() {
props: { const { proxy } = getCurrentInstance()
type: String, console.log('proxy', proxy)
reload: Function const editor = ref(null)
}, const goodRef = ref(null)
setup(props) { const route = useRoute()
const formRef = ref(null) const router = useRouter()
const { id } = route.query
const state = reactive({ const state = reactive({
uploadImgServer, uploadImgServer,
token: localGet('token') || '', token: localGet('token') || '',
visible: false, id: id,
ruleForm: { defaultCate: '',
url: '', goodForm: {
link: '', family: '',
sort: '' start_name: '',
peer_id_pattern: '',
peer_id_match_num: '',
peer_id_matchtype: '',
peer_id_start: '',
agent_pattern: '',
agent_match_num: '',
agent_matchtype: '',
agent_start: '',
exception: '',
allowhttps: '',
comment: ''
}, },
rules: { rules: {
url: [ family: [
{ required: 'true', message: '图片不能为空', trigger: ['change'] } { required: 'true' }
], ],
sort: [ start_name: [
{ required: 'true', message: '排序不能为空', trigger: ['change'] } { required: 'true'}
],
peer_id_pattern: [
{ required: 'true' }
],
peer_id_match_num: [
{ required: 'true' }
],
peer_id_matchtype: [
{ required: 'true' }
],
peer_id_start: [
{ required: 'true' }
],
agent_pattern: [
{ required: 'true' }
],
agent_match_num: [
{ required: 'true' }
],
agent_matchtype: [
{ required: 'true' }
],
agent_start: [
{ required: 'true' }
],
exception: [
{ required: 'true' }
],
allowhttps: [
{ required: 'true' }
],
comment: [
{ required: 'true' }
] ]
}, },
id: ''
}) })
// 获取详情 onMounted(() => {
const getDetail = (id) => { if (id) {
axios.get(`/carousels/${id}`).then(res => { getAgentAllow(id)
state.ruleForm = { }
url: res.carouselUrl, })
link: res.redirectUrl, onBeforeUnmount(() => {
sort: res.carouselRank
})
const getAgentAllow = (id) => {
api.getAllowAgent(id).then(res => {
state.goodForm = res
console.log(res, state.goodForm)
})
}
const submitAdd = () => {
goodRef.value.validate((vaild) => {
console.log("valid", vaild)
if (vaild) {
// 默认新增用 post 方法
let params = state.goodForm
let res
console.log('params', params)
if (id) {
res = api.updateAllowAgent(id, params)
} else {
res = api.storeAllowAgent(params)
}
ElMessage.success(id ? '修改成功' : '添加成功')
router.push({ path: '/agent-allow' })
} }
}) })
} }
@@ -87,75 +175,33 @@ export default {
return false return false
} }
} }
// 上传图片
const handleUrlSuccess = (val) => { const handleUrlSuccess = (val) => {
state.ruleForm.url = val.data || '' state.goodForm.goodsCoverImg = val.data || ''
} }
// 开启弹窗 const handleChangeCate = (val) => {
const open = (id) => { state.categoryId = val[2] || 0
state.visible = true
if (id) {
state.id = id
getDetail(id)
} else {
state.ruleForm = {
url: '',
link: '',
sort: ''
}
}
}
// 关闭弹窗
const close = () => {
state.visible = false
}
const submitForm = () => {
console.log(formRef.value.validate)
formRef.value.validate((valid) => {
if (valid) {
if (hasEmoji(state.ruleForm.link)) {
ElMessage.error('不要输入表情包,再输入就打死你个龟孙儿~')
return
}
if (props.type == 'add') {
axios.post('/carousels', {
carouselUrl: state.ruleForm.url,
redirectUrl: state.ruleForm.link,
carouselRank: state.ruleForm.sort
}).then(() => {
ElMessage.success('添加成功')
state.visible = false
if (props.reload) props.reload()
})
} else {
axios.put('/carousels', {
carouselId: state.id,
carouselUrl: state.ruleForm.url,
redirectUrl: state.ruleForm.link,
carouselRank: state.ruleForm.sort
}).then(() => {
ElMessage.success('修改成功')
state.visible = false
if (props.reload) props.reload()
})
}
}
})
} }
return { return {
...toRefs(state), ...toRefs(state),
open, goodRef,
close, submitAdd,
formRef,
handleBeforeUpload, handleBeforeUpload,
handleUrlSuccess, handleUrlSuccess,
submitForm editor,
handleChangeCate
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.add {
display: flex;
}
.add-container {
flex: 1;
height: 100%;
}
.avatar-uploader { .avatar-uploader {
width: 100px; width: 100px;
height: 100px; height: 100px;
+30 -18
View File
@@ -31,8 +31,8 @@
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="起始名称" label="系列"
prop="start_name" prop="family"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@@ -43,8 +43,13 @@
<el-table-column <el-table-column
label="Agent 模式串" label="Agent 模式串"
prop="agent_pattern" prop="agent_pattern"
> ></el-table-column>
</el-table-column> <el-table-column
label="Agent 匹配次数"
prop="agent_match_num"
width="80px"
></el-table-column>
<el-table-column <el-table-column
prop="peer_id_start" prop="peer_id_start"
label="Peer ID 起始" label="Peer ID 起始"
@@ -55,15 +60,20 @@
label="Peer ID 模式串" label="Peer ID 模式串"
> >
</el-table-column> </el-table-column>
<el-table-column
label="Peer ID 匹配次数"
prop="peer_id_match_num"
width="80px"
></el-table-column>
<el-table-column <el-table-column
label="操作" label="操作"
width="100" width="100"
> >
<template #default="scope"> <template #default="scope">
<a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.carouselId)">修改</a> <a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.id)">修改</a>
<el-popconfirm <el-popconfirm
title="确定删除吗?" title="确定删除吗?"
@confirm="handleDeleteOne(scope.row.carouselId)" @confirm="handleDeleteOne(scope.row.id)"
> >
<template #reference> <template #reference>
<a style="cursor: pointer">删除</a> <a style="cursor: pointer">删除</a>
@@ -82,13 +92,12 @@
@current-change="changePage" @current-change="changePage"
/> />
</el-card> </el-card>
<DialogAddSwiper ref='addGood' :reload="getCarousels" :type="type" />
</template> </template>
<script> <script>
import { onMounted, reactive, ref, toRefs } from 'vue' import { onMounted, reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import DialogAddSwiper from '@/components/DialogAddSwiper.vue' import { useRouter } from 'vue-router'
import AgentAllowForm from './form.vue' import AgentAllowForm from './form.vue'
import axios from '@/utils/axios' import axios from '@/utils/axios'
import api from '@/utils/api' import api from '@/utils/api'
@@ -96,9 +105,10 @@ import api from '@/utils/api'
export default { export default {
name: 'Swiper', name: 'Swiper',
components: { components: {
DialogAddSwiper
}, },
setup() { setup() {
const router = useRouter()
const multipleTable = ref(null) const multipleTable = ref(null)
const addGood = ref(null) const addGood = ref(null)
const state = reactive({ const state = reactive({
@@ -143,12 +153,18 @@ export default {
// 添加轮播项 // 添加轮播项
const handleAdd = () => { const handleAdd = () => {
state.type = 'add' state.type = 'add'
addGood.value.open() // addGood.value.open()
router.push({
name: "agent-allow-form"
})
} }
// 修改轮播图 // 修改轮播图
const handleEdit = (id) => { const handleEdit = (id) => {
state.type = 'edit' console.log("id", id)
addGood.value.open(id) router.push({
name: "agent-allow-form",
query: {id: id}
})
} }
// 选择项 // 选择项
const handleSelectionChange = (val) => { const handleSelectionChange = (val) => {
@@ -171,13 +187,9 @@ export default {
} }
// 单个删除 // 单个删除
const handleDeleteOne = (id) => { const handleDeleteOne = (id) => {
axios.delete('/carousels', { api.deleteAllowAgent(id).then(() => {
data: {
ids: [id]
}
}).then(() => {
ElMessage.success('删除成功') ElMessage.success('删除成功')
getCarousels() listAgentAllow()
}) })
} }
const changePage = (val) => { const changePage = (val) => {
+14 -7
View File
@@ -15,7 +15,7 @@ class AgentAllowController extends Controller
*/ */
public function index() public function index()
{ {
$result = AgentAllow::query()->paginate(); $result = AgentAllow::query()->orderBy('id', 'desc')->paginate();
$resource = AgentAllowResource::collection($result); $resource = AgentAllowResource::collection($result);
return success('agent allow list', $resource); return success('agent allow list', $resource);
} }
@@ -35,11 +35,13 @@ class AgentAllowController extends Controller
* Display the specified resource. * Display the specified resource.
* *
* @param int $id * @param int $id
* @return \Illuminate\Http\Response * @return array
*/ */
public function show($id) public function show($id)
{ {
// $result = AgentAllow::query()->findOrFail($id);
$resource = new AgentAllowResource($result);
return success('agent allow detail', $resource);
} }
/** /**
@@ -47,21 +49,26 @@ class AgentAllowController extends Controller
* *
* @param \Illuminate\Http\Request $request * @param \Illuminate\Http\Request $request
* @param int $id * @param int $id
* @return \Illuminate\Http\Response * @return array
*/ */
public function update(Request $request, $id) public function update(Request $request, $id)
{ {
// $result = AgentAllow::query()->findOrFail($id);
$result->update($request->all());
$resource = new AgentAllowResource($result);
return success('agent allow update', $resource);
} }
/** /**
* Remove the specified resource from storage. * Remove the specified resource from storage.
* *
* @param int $id * @param int $id
* @return \Illuminate\Http\Response * @return array
*/ */
public function destroy($id) public function destroy($id)
{ {
// $result = AgentAllow::query()->findOrFail($id);
$deleted = $result->delete();
return success('agent allow delete', [$deleted]);
} }
} }
@@ -16,6 +16,7 @@ class AgentAllowResource extends JsonResource
{ {
return [ return [
'id' => $this->id, 'id' => $this->id,
'family' => $this->family,
'start_name' => $this->start_name, 'start_name' => $this->start_name,
'peer_id_pattern' => $this->peer_id_pattern, 'peer_id_pattern' => $this->peer_id_pattern,
'peer_id_match_num' => $this->peer_id_match_num, 'peer_id_match_num' => $this->peer_id_match_num,
@@ -27,6 +28,7 @@ class AgentAllowResource extends JsonResource
'agent_start' => $this->agent_start, 'agent_start' => $this->agent_start,
'exception' => $this->exception, 'exception' => $this->exception,
'comment' => $this->comment, 'comment' => $this->comment,
'allowhttps' => $this->allowhttps,
'hits' => $this->hits, 'hits' => $this->hits,
]; ];
} }
+1 -1
View File
@@ -7,7 +7,7 @@ class AgentAllow extends NexusModel
protected $table = 'agent_allowed_family'; protected $table = 'agent_allowed_family';
protected $fillable = [ protected $fillable = [
'family', 'start_name', 'exception', 'allowhttps', 'comment', 'hits', 'family', 'start_name', 'exception', 'allowhttps', 'comment',
'peer_id_pattern', 'peer_id_match_num', 'peer_id_matchtype', 'peer_id_start', 'peer_id_pattern', 'peer_id_match_num', 'peer_id_matchtype', 'peer_id_start',
'agent_pattern', 'agent_match_num', 'agent_matchtype', 'agent_start', 'agent_pattern', 'agent_match_num', 'agent_matchtype', 'agent_start',
]; ];
+1 -1
View File
@@ -29,6 +29,6 @@ return [
'max_age' => 0, 'max_age' => 0,
'supports_credentials' => false, 'supports_credentials' => true,
]; ];