| | |
| | | <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"> |
| | | <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> |
| | | <el-button icon="el-icon-back" @click="goPatchManagement"> 返回 </el-button> |
| | | </template> |
| | | |
| | | <template #status="{ row }"> |
| | | <el-tag>{{ row.statusName }}</el-tag> |
| | | </template> |
| | |
| | | </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 { |
| | | 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() |
| | | const store = useStore(); |
| | | const router = useRouter(); |
| | | // ---------------- data ---------------- |
| | | const form = ref({}) |
| | | const query = ref({}) |
| | | const loading = ref(true) |
| | | 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([]) |
| | | lotValue: '', |
| | | userName: '', |
| | | }); |
| | | const selectionList = ref([]); |
| | | const option = ref({ |
| | | addBtn: true, |
| | | addBtnText: '新增类型', |
| | |
| | | searchMenuPosition: 'right', |
| | | border: true, |
| | | index: true, |
| | | indexLabel: '序号', |
| | | indexWidth: 60, |
| | | selection: true, |
| | | grid: false, |
| | | menuWidth: 180, |
| | |
| | | prop: 'patches_type', |
| | | search: true, |
| | | searchSpan: 4, |
| | | rules: [ |
| | | { required: true, message: '请输入类型名称', trigger: 'blur' }, |
| | | ], |
| | | rules: [{ required: true, message: '请输入类型名称', trigger: 'blur' }], |
| | | }, |
| | | { |
| | | label: '创建时间', |
| | | prop: 'create_time', |
| | | addDisplay: false, |
| | | addDisplay: false, |
| | | editDisplay: false, |
| | | rules: [ |
| | | { required: true, message: '请输入创建时间', trigger: 'blur' }, |
| | | ], |
| | | rules: [{ required: true, message: '请输入创建时间', trigger: 'blur' }], |
| | | }, |
| | | { |
| | | label: '创建人', |
| | | prop: 'user_name', |
| | | search: true, |
| | | addDisplay: false, |
| | | editDisplay: false, |
| | | addDisplay: false, |
| | | editDisplay: false, |
| | | searchSpan: 4, |
| | | rules: [ |
| | | { required: true, message: '请输入创建人', trigger: 'blur' }, |
| | | ], |
| | | type: 'select', |
| | | dicData: creatorOption, |
| | | props: { |
| | | label: 'label', |
| | | value: 'value', |
| | | }, |
| | | rules: [{ required: true, message: '请输入创建人', trigger: 'blur' }], |
| | | }, |
| | | ], |
| | | }) |
| | | }); |
| | | |
| | | const data = ref([]) |
| | | |
| | | |
| | | 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) |
| | | const category = func.toInt(form.value.category); |
| | | option.value.column.filter(item => { |
| | | if (item.prop === 'appId') { |
| | | item.display = category === 4 |
| | | item.display = category === 4; |
| | | } |
| | | }) |
| | | }); |
| | | } |
| | | ) |
| | | |
| | | |
| | | ); |
| | | |
| | | // ---------------- computed ---------------- |
| | | const permission = computed(() => store.getters.permission) |
| | | 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(',') |
| | | }) |
| | | return selectionList.value.map(ele => ele.id).join(','); |
| | | }); |
| | | |
| | | // ---------------- methods ---------------- |
| | | const rowSave = (row, done, loadingFn) => { |
| | | const createParams ={ |
| | | patches_type:row.patches_type |
| | | , |
| | | } |
| | | const createParams = { |
| | | patches_type: row.patches_type, |
| | | }; |
| | | spotTypesCreateApi(createParams).then( |
| | | () => { |
| | | onLoad(page.value) |
| | | ElMessage.success('操作成功!') |
| | | done() |
| | | onLoad(page.value); |
| | | ElMessage.success('操作成功!'); |
| | | done(); |
| | | }, |
| | | error => { |
| | | console.log(error) |
| | | loadingFn() |
| | | console.log(error); |
| | | loadingFn(); |
| | | } |
| | | ) |
| | | } |
| | | ); |
| | | }; |
| | | |
| | | const rowUpdate = (row, index, done, loadingFn) => { |
| | | editSpotTypeApi(row).then( |
| | | (res) => { |
| | | onLoad(page.value) |
| | | ElMessage.success('操作成功!') |
| | | done() |
| | | res => { |
| | | onLoad(page.value); |
| | | ElMessage.success('操作成功!'); |
| | | done(); |
| | | }, |
| | | error => { |
| | | console.log(error) |
| | | loadingFn() |
| | | console.log(error); |
| | | loadingFn(); |
| | | } |
| | | ) |
| | | } |
| | | ); |
| | | }; |
| | | |
| | | const rowDel = row => { |
| | | ElMessageBox.confirm('确定将选择数据删除?', '提示', { |
| | |
| | | }) |
| | | .then(() => deleteSpotTypeApi([row.id])) |
| | | .then(() => { |
| | | onLoad(page.value) |
| | | ElMessage.success('操作成功!') |
| | | }) |
| | | } |
| | | onLoad(page.value); |
| | | ElMessage.success('操作成功!'); |
| | | }); |
| | | }; |
| | | |
| | | const searchReset = () => { |
| | | page.value.userName='' |
| | | page.value.lotValue ='' |
| | | page.value.currentPage=1 |
| | | page.value.pageSize=20 |
| | | onLoad(page.value) |
| | | } |
| | | 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() |
| | | } |
| | | 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 = [] |
| | | selectionList.value = []; |
| | | // crudRef.value.toggleSelection() |
| | | } |
| | | }; |
| | | |
| | | const handleEnable = row => { |
| | | ElMessageBox.confirm('是否确定启用这条配置?', '提示', { |
| | |
| | | }) |
| | | .then(() => enable(row.id)) |
| | | .then(() => { |
| | | onLoad(page.value) |
| | | ElMessage.success('操作成功!') |
| | | onLoad(page.value); |
| | | ElMessage.success('操作成功!'); |
| | | // crudRef.value.toggleSelection() |
| | | }) |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | const handleDisable = row => { |
| | | ElMessageBox.confirm('是否确定禁用这条配置?', '提示', { |
| | |
| | | }) |
| | | .then(() => disable(row.id)) |
| | | .then(() => { |
| | | onLoad(page.value) |
| | | ElMessage.success('操作成功!') |
| | | onLoad(page.value); |
| | | ElMessage.success('操作成功!'); |
| | | // crudRef.value.toggleSelection() |
| | | }) |
| | | } |
| | | |
| | | }); |
| | | }; |
| | | |
| | | const beforeOpen = (done, type) => { |
| | | // if (['edit', 'view'].includes(type)) { |
| | |
| | | // // form.value = res.data.data |
| | | // // }) |
| | | // } |
| | | done() |
| | | } |
| | | done(); |
| | | }; |
| | | |
| | | const currentChange = currentPage => { |
| | | page.value.currentPage = currentPage |
| | | } |
| | | page.value.currentPage = currentPage; |
| | | }; |
| | | |
| | | const sizeChange = pageSize => { |
| | | page.value.pageSize = pageSize |
| | | } |
| | | page.value.pageSize = pageSize; |
| | | }; |
| | | const refreshChange = () => { |
| | | onLoad(page.value, query.value) |
| | | } |
| | | 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 |
| | | 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() |
| | | }) |
| | | } |
| | | 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: 新增图斑类型逻辑 |
| | | } |
| | | router.push({ path: '/resource/patchManagement' }); |
| | | }; |
| | | |
| | | // ---------------- utils ---------------- |
| | | function validData (value) { |
| | | return value !== undefined && value !== null && value !== false |
| | | 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) |
| | | onMounted(() => { |
| | | getsearchManagementApi(); |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"></style> |
| | | <style scoped lang="scss"></style> |