<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 {
|
searchManagementApi,
|
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 creatorOption = 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,
|
type: 'select',
|
dicData: creatorOption,
|
props: {
|
label: 'label',
|
value: 'value',
|
},
|
rules: [{ required: true, message: '请输入创建人', trigger: 'blur' }],
|
},
|
],
|
});
|
|
const data = ref([]);
|
// 获取搜索数据
|
const getsearchManagementApi = () => {
|
searchManagementApi().then(res => {
|
const creatorOptionuniqueMap = new Map();
|
res.data.data.user_names.forEach(item => {
|
const [key, value] = Object.entries(item)[0];
|
if (!creatorOptionuniqueMap.has(key)) {
|
creatorOptionuniqueMap.set(key, value);
|
}
|
});
|
creatorOption.value = Array.from(creatorOptionuniqueMap).map(([key, value]) => ({
|
label: value,
|
value: value,
|
}));
|
});
|
};
|
|
// ---------------- 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' });
|
};
|
|
// ---------------- utils ----------------
|
function validData(value) {
|
return value !== undefined && value !== null && value !== false;
|
}
|
|
onMounted(() => {
|
getsearchManagementApi();
|
});
|
</script>
|
|
<style scoped lang="scss"></style>
|
