<template>
|
<basic-container>
|
<avue-crud :option="option" :table-loading="loading" :data="data" v-model:page="page" :permission="permissionList"
|
v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel" :before-open="beforeOpen"
|
@search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
|
@current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
|
<template #search-menu="{ row, size }">
|
<el-button icon="el-icon-back" @click="goPatchManagement">
|
返回
|
</el-button>
|
</template>
|
|
<template #status="{ row }">
|
<el-tag>{{ row.statusName }}</el-tag>
|
</template>
|
<template #category="{ row }">
|
<el-tag>{{ row.categoryName }}</el-tag>
|
</template>
|
</avue-crud>
|
</basic-container>
|
</template>
|
|
<script setup>
|
import {listOfSpotTypesApi,spotTypesCreateApi,editSpotTypeApi,deleteSpotTypeApi} from '@/api/patchManagement/index'
|
import { ref, computed, watch } from 'vue'
|
import { enable, disable } from '@/api/resource/oss'
|
import { useStore } from 'vuex'
|
import func from '@/utils/func'
|
import { useRouter } from 'vue-router'
|
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
|
const store = useStore()
|
const router = useRouter()
|
// ---------------- data ----------------
|
const form = ref({})
|
const query = ref({})
|
const loading = ref(true)
|
const page = ref({
|
pageSize: 20,
|
currentPage: 1,
|
total: 0,
|
lotValue:"",
|
userName:''
|
})
|
const selectionList = ref([])
|
const option = ref({
|
addBtn: true,
|
addBtnText: '新增类型',
|
tip: false,
|
searchShow: true,
|
searchMenuSpan: 16,
|
searchMenuPosition: 'right',
|
border: true,
|
index: true,
|
selection: true,
|
grid: false,
|
menuWidth: 180,
|
labelWidth: 100,
|
dialogWidth: 880,
|
dialogClickModal: false,
|
height: 'auto',
|
calcHeight: 20,
|
refreshBtn: false,
|
gridBtn: false,
|
searchShowBtn: false,
|
columnBtn: false,
|
column: [
|
{
|
label: '类型名称',
|
prop: 'patches_type',
|
search: true,
|
searchSpan: 4,
|
rules: [
|
{ required: true, message: '请输入类型名称', trigger: 'blur' },
|
],
|
},
|
{
|
label: '创建时间',
|
prop: 'create_time',
|
addDisplay: false,
|
editDisplay: false,
|
rules: [
|
{ required: true, message: '请输入创建时间', trigger: 'blur' },
|
],
|
},
|
{
|
label: '创建人',
|
prop: 'user_name',
|
search: true,
|
addDisplay: false,
|
editDisplay: false,
|
searchSpan: 4,
|
rules: [
|
{ required: true, message: '请输入创建人', trigger: 'blur' },
|
],
|
},
|
],
|
})
|
|
const data = ref([])
|
|
|
|
// ---------------- watch ----------------
|
watch(
|
() => form.value.category,
|
() => {
|
const category = func.toInt(form.value.category)
|
option.value.column.filter(item => {
|
if (item.prop === 'appId') {
|
item.display = category === 4
|
}
|
})
|
}
|
)
|
|
|
|
// ---------------- computed ----------------
|
const permission = computed(() => store.getters.permission)
|
const permissionList = computed(() => ({
|
addBtn: validData(permission.value.oss_add),
|
viewBtn: validData(permission.value.oss_view),
|
delBtn: validData(permission.value.oss_delete),
|
editBtn: validData(permission.value.oss_edit),
|
}))
|
|
const ids = computed(() => {
|
return selectionList.value.map(ele => ele.id).join(',')
|
})
|
|
// ---------------- methods ----------------
|
const rowSave = (row, done, loadingFn) => {
|
const createParams ={
|
patches_type:row.patches_type
|
,
|
}
|
spotTypesCreateApi(createParams).then(
|
() => {
|
onLoad(page.value)
|
ElMessage.success('操作成功!')
|
done()
|
},
|
error => {
|
console.log(error)
|
loadingFn()
|
}
|
)
|
}
|
|
const rowUpdate = (row, index, done, loadingFn) => {
|
editSpotTypeApi(row).then(
|
(res) => {
|
onLoad(page.value)
|
ElMessage.success('操作成功!')
|
done()
|
},
|
error => {
|
console.log(error)
|
loadingFn()
|
}
|
)
|
}
|
|
const rowDel = row => {
|
ElMessageBox.confirm('确定将选择数据删除?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(() => deleteSpotTypeApi([row.id]))
|
.then(() => {
|
onLoad(page.value)
|
ElMessage.success('操作成功!')
|
})
|
}
|
|
const searchReset = () => {
|
page.value.userName=''
|
page.value.lotValue =''
|
page.value.currentPage=1
|
page.value.pageSize=20
|
onLoad(page.value)
|
}
|
|
const searchChange = (params, done) => {
|
page.value.currentPage = 1
|
page.value.lotValue = params.patches_type
|
page.value.userName = params.user_name
|
onLoad(page.value)
|
done()
|
}
|
|
const selectionChange = list => {
|
|
|
// selectionList.value = list
|
}
|
|
const selectionClear = () => {
|
selectionList.value = []
|
// crudRef.value.toggleSelection()
|
}
|
|
const handleEnable = row => {
|
ElMessageBox.confirm('是否确定启用这条配置?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(() => enable(row.id))
|
.then(() => {
|
onLoad(page.value)
|
ElMessage.success('操作成功!')
|
// crudRef.value.toggleSelection()
|
})
|
}
|
|
const handleDisable = row => {
|
ElMessageBox.confirm('是否确定禁用这条配置?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(() => disable(row.id))
|
.then(() => {
|
onLoad(page.value)
|
ElMessage.success('操作成功!')
|
// crudRef.value.toggleSelection()
|
})
|
}
|
|
|
const beforeOpen = (done, type) => {
|
// if (['edit', 'view'].includes(type)) {
|
// // getDetail(form.value.id).then(res => {
|
// // form.value = res.data.data
|
// // })
|
// }
|
done()
|
}
|
|
const currentChange = currentPage => {
|
page.value.currentPage = currentPage
|
}
|
|
const sizeChange = pageSize => {
|
page.value.pageSize = pageSize
|
}
|
const refreshChange = () => {
|
onLoad(page.value, query.value)
|
}
|
|
const onLoad = (pageParam, params = {}) => {
|
const searchparams ={
|
current:pageParam.currentPage,
|
size:pageParam.pageSize,
|
lotValue:pageParam.lotValue,
|
userName:pageParam.userName
|
}
|
loading.value = true
|
listOfSpotTypesApi(searchparams).then(res => {
|
const resData = res.data.data
|
page.value.total = resData.total
|
data.value = resData.records
|
loading.value = false
|
selectionClear()
|
})
|
}
|
|
// ---------------- extra ----------------
|
const goPatchManagement = () => {
|
router.push({ path: '/resource/patchManagement' })
|
}
|
|
const addPatchType = () => {
|
// TODO: 新增图斑类型逻辑
|
}
|
|
// ---------------- utils ----------------
|
function validData (value) {
|
return value !== undefined && value !== null && value !== false
|
}
|
|
function findObject (list, prop) {
|
return list.find(item => item.prop === prop)
|
}
|
|
const crudRef = ref(null)
|
</script>
|
|
<style scoped lang="scss"></style>
|
