无人机管理后台前端(已迁走)
罗广辉
2025-10-11 02409bfbe15f22fc3b5dccadabfd860a660a49d9
src/views/resource/patchTypeManagement.vue
@@ -1,15 +1,28 @@
<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>
@@ -21,27 +34,34 @@
</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: '新增类型',
@@ -51,6 +71,8 @@
  searchMenuPosition: 'right',
  border: true,
  index: true,
  indexLabel: '序号',
   indexWidth: 60,
  selection: true,
  grid: false,
  menuWidth: 180,
@@ -69,97 +91,108 @@
      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('确定将选择数据删除?', '提示', {
@@ -169,37 +202,35 @@
  })
    .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('是否确定启用这条配置?', '提示', {
@@ -209,11 +240,11 @@
  })
    .then(() => enable(row.id))
    .then(() => {
      onLoad(page.value)
      ElMessage.success('操作成功!')
      onLoad(page.value);
      ElMessage.success('操作成功!');
      // crudRef.value.toggleSelection()
    })
}
    });
};
const handleDisable = row => {
  ElMessageBox.confirm('是否确定禁用这条配置?', '提示', {
@@ -223,12 +254,11 @@
  })
    .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)) {
@@ -236,56 +266,50 @@
  //   //   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>