|
@@ -1,10 +1,213 @@
|
|
|
<template>
|
|
|
+ <hc-card>
|
|
|
+ <template #header>
|
|
|
+ <div class="w-120px">
|
|
|
+ <el-select v-model="formModel.affiliatedParty" placeholder="选择所属方" filterable clearable block>
|
|
|
+ <el-option v-for="item in affiliatedPartyData" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="ml-12px w-400px">
|
|
|
+ <hc-search-input v-model="searchForm.classfName" @search="searchClick" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #extra>
|
|
|
+ <el-button hc-btn type="primary" @click="addRowClick">新增</el-button>
|
|
|
+ <el-button hc-btn type="danger" :disabled="tableCheckKeys.length <= 0" @click="batchDelClick">删除</el-button>
|
|
|
+ </template>
|
|
|
+ <hc-table
|
|
|
+ :column="tableColumn" :datas="tableData" :loading="tableLoading" :index-style="{ width: 60 }"
|
|
|
+ is-check :check-style="{ width: 29 }" @selection-change="tableCheckChange"
|
|
|
+ >
|
|
|
+ <template #projectStage="{ row }">
|
|
|
+ <span>{{ getDictionaryName(projectStageData, row.projectStage) }}</span>
|
|
|
+ </template>
|
|
|
+ <template #affiliatedParty="{ row }">
|
|
|
+ <span>{{ getDictionaryName(affiliatedPartyData, row.affiliatedParty) }}</span>
|
|
|
+ </template>
|
|
|
+ <template #fileType="{ row }">
|
|
|
+ <span>{{ getDictionaryName(fileTypeData, row.fileType) }}</span>
|
|
|
+ </template>
|
|
|
+ <template #storageDirectoryFormat="{ row }">
|
|
|
+ <span>{{ getDictionaryName(storageFormatData, row.storageDirectoryFormat) }}</span>
|
|
|
+ </template>
|
|
|
+ <template #action="{ row }">
|
|
|
+ <el-link type="warning" @click="edutRowClick(row)">修改</el-link>
|
|
|
+ <el-link type="danger" @click="rowDelClick(row)">删除</el-link>
|
|
|
+ </template>
|
|
|
+ </hc-table>
|
|
|
+ <template #action>
|
|
|
+ <hc-pages :pages="searchForm" @change="pageChange" />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 新增/修改 -->
|
|
|
+ <hc-dialog v-model="isDataInfoShow" widths="400px" is-footer-center :title="isNullES(formModel.id) ? '新增' : '修改'" @close="dialogClose">
|
|
|
+ <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" label-width="auto" size="large">
|
|
|
+ <el-form-item label="WBS名称:" prop="wbsName">
|
|
|
+ <el-input v-model="formModel.wbsName" clearable placeholder="请输入WBS名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="划分类型:" prop="wbsType">
|
|
|
+ <el-select v-model="formModel.wbsType" placeholder="选择划分类型" filterable clearable block>
|
|
|
+ <el-option v-for="item in wbsTypeData" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否启用:" prop="status">
|
|
|
+ <el-radio-group v-model="formModel.status">
|
|
|
+ <el-radio :value="1">是</el-radio>
|
|
|
+ <el-radio :value="0">否</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button hc-btn @click="dialogClose">取消</el-button>
|
|
|
+ <el-button hc-btn type="primary" :loading="submitLoading" @click="dialogSubmit">提交</el-button>
|
|
|
+ </template>
|
|
|
+ </hc-dialog>
|
|
|
+ </hc-card>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import { onActivated, onDeactivated, ref } from 'vue'
|
|
|
+import { arrToId, deepClone, formValidate, getArrValue, isNullES } from 'js-fast-way'
|
|
|
+import { getDictionaryData, getDictionaryName, reloadPage } from '~uti/tools'
|
|
|
+import { HcDelMsg } from 'hc-vue3-ui'
|
|
|
+import mainApi from '~api/desk/image'
|
|
|
|
|
|
-</script>
|
|
|
+//激活
|
|
|
+onActivated(() => {
|
|
|
+ getDataApi()
|
|
|
+})
|
|
|
+
|
|
|
+//获取接口数据
|
|
|
+const getDataApi = async () => {
|
|
|
+ affiliatedPartyData.value = await getDictionaryData('affiliated_party')
|
|
|
+ projectStageData.value = await getDictionaryData('project_stage')
|
|
|
+ fileTypeData.value = await getDictionaryData('file_type')
|
|
|
+ storageFormatData.value = await getDictionaryData('storage_directory_format')
|
|
|
+ getTableData().then()
|
|
|
+}
|
|
|
+
|
|
|
+const affiliatedPartyData = ref([]) //获取所属方
|
|
|
+const projectStageData = ref([]) //获取所属项目阶段
|
|
|
+const fileTypeData = ref([]) //获取文件资料类型
|
|
|
+const storageFormatData = ref([]) //获取储存目录格式
|
|
|
+
|
|
|
+//搜索表单
|
|
|
+const searchForm = ref({ current: 1, size: 30, total: 0 })
|
|
|
+
|
|
|
+//搜索
|
|
|
+const searchClick = () => {
|
|
|
+ searchForm.value.current = 1
|
|
|
+ getTableData()
|
|
|
+}
|
|
|
+
|
|
|
+//分页
|
|
|
+const pageChange = ({ current, size }) => {
|
|
|
+ searchForm.value.current = current
|
|
|
+ searchForm.value.size = size
|
|
|
+ getTableData()
|
|
|
+}
|
|
|
+
|
|
|
+//表格数据
|
|
|
+const tableData = ref([])
|
|
|
+const tableColumn = ref([
|
|
|
+ { key: 'classfName', name: '名称' },
|
|
|
+ { key: 'projectStage', name: '所属项目阶段', width: 140, align: 'center' },
|
|
|
+ { key: 'affiliatedParty', name: '所属方', width: 160, align: 'center' },
|
|
|
+ { key: 'fileType', name: '文件资料类型', width: 140, align: 'center' },
|
|
|
+ { key: 'storageDirectoryFormat', name: '储存目录格式', width: 140, align: 'center' },
|
|
|
+ { key: 'action', name: '操作', width: 100, align: 'center' },
|
|
|
+])
|
|
|
+
|
|
|
+//获取表格数据
|
|
|
+const tableLoading = ref(false)
|
|
|
+const getTableData = async () => {
|
|
|
+ tableData.value = []
|
|
|
+ tableLoading.value = true
|
|
|
+ const { data } = await mainApi.page({
|
|
|
+ ...searchForm.value,
|
|
|
+ total: null,
|
|
|
+ })
|
|
|
+ tableLoading.value = false
|
|
|
+ tableData.value = getArrValue(data?.records)
|
|
|
+ searchForm.value.total = data?.total || 0
|
|
|
+}
|
|
|
+
|
|
|
+//表格被选择
|
|
|
+const tableCheckKeys = ref([])
|
|
|
+const tableCheckChange = (rows) => {
|
|
|
+ tableCheckKeys.value = rows
|
|
|
+}
|
|
|
|
|
|
-<style scoped lang="scss">
|
|
|
+//单个删除
|
|
|
+const rowDelClick = (row) => {
|
|
|
+ rowRemoveApi(row.id)
|
|
|
+}
|
|
|
|
|
|
-</style>
|
|
|
+//批量删除
|
|
|
+const batchDelClick = () => {
|
|
|
+ const rows = tableCheckKeys.value
|
|
|
+ if (rows.length <= 0) {
|
|
|
+ window.$message.warning('请选择要删除的应用')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ rowRemoveApi(arrToId(rows))
|
|
|
+}
|
|
|
+
|
|
|
+//删除接口
|
|
|
+const rowRemoveApi = (ids) => {
|
|
|
+ HcDelMsg(async (resolve) => {
|
|
|
+ const { isRes } = await mainApi.del(ids)
|
|
|
+ resolve() //关闭弹窗的回调
|
|
|
+ if (!isRes) return
|
|
|
+ window.$message.success('删除成功')
|
|
|
+ reloadPage()
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+//新增/修改弹窗
|
|
|
+const isDataInfoShow = ref(false)
|
|
|
+const addRowClick = () => {
|
|
|
+ formModel.value = { status: 1 }
|
|
|
+ isDataInfoShow.value = true
|
|
|
+}
|
|
|
+
|
|
|
+//修改
|
|
|
+const edutRowClick = (row) => {
|
|
|
+ formModel.value = deepClone(row)
|
|
|
+ isDataInfoShow.value = true
|
|
|
+}
|
|
|
+
|
|
|
+//表单
|
|
|
+const formRef = ref(null)
|
|
|
+const formModel = ref({})
|
|
|
+const formRules = {
|
|
|
+ wbsName: { required: true, trigger: 'blur', message: '请输入WBS名称' },
|
|
|
+ wbsType: { required: true, trigger: 'blur', message: '请选择划分类型' },
|
|
|
+ status: { required: true, trigger: 'blur', message: '请选择是否启用' },
|
|
|
+}
|
|
|
+
|
|
|
+//提交
|
|
|
+const submitLoading = ref(false)
|
|
|
+const dialogSubmit = async () => {
|
|
|
+ const isForm = await formValidate(formRef.value)
|
|
|
+ if (!isForm) return
|
|
|
+ submitLoading.value = true
|
|
|
+ const { isRes } = await mainApi.submit(formModel.value)
|
|
|
+ submitLoading.value = false
|
|
|
+ if (!isRes) return
|
|
|
+ window.$message.success('操作成功')
|
|
|
+ dialogClose()
|
|
|
+}
|
|
|
+
|
|
|
+//关闭弹窗
|
|
|
+const dialogClose = () => {
|
|
|
+ isDataInfoShow.value = false
|
|
|
+ submitLoading.value = false
|
|
|
+ formModel.value = {}
|
|
|
+}
|
|
|
+
|
|
|
+//离开了当前页面
|
|
|
+onDeactivated(() => {
|
|
|
+
|
|
|
+})
|
|
|
+</script>
|