|
|
@@ -1,73 +1,248 @@
|
|
|
<template>
|
|
|
- <a-modal
|
|
|
- :visible="true"
|
|
|
- :width="width"
|
|
|
- :maskClosable="false"
|
|
|
- :destroyOnClose="true"
|
|
|
- :title="title"
|
|
|
- :footer="null"
|
|
|
- centered
|
|
|
- :wrapClassName="wrapClassName"
|
|
|
- @cancel="onClose"
|
|
|
- >
|
|
|
- <slot name="modalContent"></slot>
|
|
|
+ <a-modal :visible="true" :width="width" :maskClosable="false" :destroyOnClose="true" :title="title" :footer="null"
|
|
|
+ centered @cancel="onClose">
|
|
|
+ <div class="sources-body">
|
|
|
+ <div class="top-search">
|
|
|
+ <div class="left-search-input">
|
|
|
+ <div class="input">
|
|
|
+ <span>关键字</span>
|
|
|
+ <a-input allowClear v-model:value="searchValue" style="width: 200px;"
|
|
|
+ placeholder="请输入资源ID"></a-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-btns">
|
|
|
+ <a-button style="margin-right: 15px;" @click="handleReset">重置</a-button>
|
|
|
+ <a-button type="primary" @click="handleSearch">查询</a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <a-table :columns="sourcesColumns" :data-source="sourcesTableData" :bordered="true"></a-table> -->
|
|
|
+ <div class="bottom-table">
|
|
|
+ <BasicTable @register="registerTable">
|
|
|
+ <template #action="{ record }">
|
|
|
+ <TableAction :actions="[
|
|
|
+ {
|
|
|
+ label: '查看',
|
|
|
+ tooltip: '查看',
|
|
|
+ onClick: handleDetail.bind(null, record),
|
|
|
+ }
|
|
|
+ ]" />
|
|
|
+ </template>
|
|
|
+ </BasicTable>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</a-modal>
|
|
|
+ <DetailModal v-if="ifShowDetail" @closeModal="ifShowDetail = false" :resId="resId" />
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { defineComponent, reactive, ref, onMounted, watch, toRefs } from 'vue';
|
|
|
+import { defineComponent, reactive, ref, onMounted, watch, toRefs, computed } from 'vue';
|
|
|
import { message } from 'ant-design-vue';
|
|
|
import moment from 'moment';
|
|
|
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
|
|
+import { session } from '/@/utils/Memory';
|
|
|
+import { delVersionByIds, getVersionDetail } from '/@/api/sys/version';
|
|
|
+import DetailModal from '/@/views/resource/plat/item/child/DetailModal.vue'
|
|
|
|
|
|
const props = {
|
|
|
- width: {
|
|
|
- type: String,
|
|
|
- default: '1000px'
|
|
|
- },
|
|
|
- title:{
|
|
|
- type:String,
|
|
|
- default:"版本资源"
|
|
|
- },
|
|
|
- wrapClassName:{
|
|
|
- type:String,
|
|
|
- default:""
|
|
|
- }
|
|
|
+ versionId: String,
|
|
|
+ default: ''
|
|
|
}
|
|
|
export default defineComponent({
|
|
|
name: 'modal',
|
|
|
- components: {},
|
|
|
+ components: { BasicTable, TableAction, DetailModal },
|
|
|
+ emits: ['closeModal'],
|
|
|
props,
|
|
|
setup(props, { emit }) {
|
|
|
- const propsData = reactive({
|
|
|
- width: props.width,
|
|
|
- title: props.title,
|
|
|
- wrapClassName:props.wrapClassName
|
|
|
+ const data = reactive({
|
|
|
+ width: '1200px',
|
|
|
+ title: ''
|
|
|
})
|
|
|
+ const searchValue = ref('')
|
|
|
+ const versionId = ref(props.versionId)
|
|
|
+ //筛选数据，用于表格
|
|
|
+ const filteredInfo = ref({
|
|
|
+ rid: null
|
|
|
+ });
|
|
|
+ const sourcesColumns = computed(() => {
|
|
|
+ const filtered = filteredInfo.value || {};
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ title: '资源ID',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'rid',
|
|
|
+ key: 'rid',
|
|
|
+ filteredValue: filtered.rid || null,
|
|
|
+ onFilter: (value, record) => record.rid.includes(value)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '版本号',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'versionNum',
|
|
|
+ key: 'versionNum'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '最新版本',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'isNew',
|
|
|
+ key: 'isNew'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '发布时间',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'insertTime',
|
|
|
+ key: 'insertTime'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '修改时间',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'updateTime',
|
|
|
+ key: 'updateTime'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ const ifShowDetail = ref(false)
|
|
|
+ const resId = ref('')
|
|
|
watch(
|
|
|
- () => props.width,
|
|
|
- (val) => {
|
|
|
- propsData.width = val
|
|
|
- }
|
|
|
- )
|
|
|
- watch(
|
|
|
- () => props.title,
|
|
|
- (val) => {
|
|
|
- propsData.title = val
|
|
|
- }
|
|
|
- )
|
|
|
- watch(
|
|
|
- () => props.wrapClassName,
|
|
|
+ () => props.versionId,
|
|
|
(val) => {
|
|
|
- propsData.wrapClassName = val
|
|
|
+ versionId.value = val
|
|
|
}
|
|
|
)
|
|
|
- const onClose = (e) => {
|
|
|
+
|
|
|
+ const getAllData = () => {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ let param = {
|
|
|
+ 1: session.getItem('tokenV2'),
|
|
|
+ 2: versionId.value,
|
|
|
+ }
|
|
|
+ getVersionDetail(param).then(res => {
|
|
|
+ if (res.status === "0") {
|
|
|
+ let resData = JSON.parse(res.result)
|
|
|
+ if (resData.dataVersionConfs.length) {
|
|
|
+ data.title = `版本：${resData.name}`
|
|
|
+ let sourcesData = []
|
|
|
+ resData.dataVersionConfs.forEach(item => {
|
|
|
+ sourcesData.push({
|
|
|
+ isNew: item.active === 'N' ? '否' : '是',
|
|
|
+ key: item.id,
|
|
|
+ ...item
|
|
|
+ })
|
|
|
+ })
|
|
|
+ console.log(sourcesData);
|
|
|
+ resolve(sourcesData)
|
|
|
+ } else {
|
|
|
+ data.title = '该版本暂无资源'
|
|
|
+ resolve([])
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ data.title = '该版本暂无资源'
|
|
|
+ resolve([])
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ //注册表格
|
|
|
+ const [registerTable, { reload }] = useTable({
|
|
|
+ title: '资源列表',
|
|
|
+ api: getAllData,
|
|
|
+ columns: sourcesColumns,
|
|
|
+ // rowSelection: { type: 'checkbox' },
|
|
|
+ useSearchForm: false,
|
|
|
+ showTableSetting: true,
|
|
|
+ bordered: false,
|
|
|
+ striped: false,
|
|
|
+ canResize: true,
|
|
|
+ showIndexColumn: false,
|
|
|
+ // indexColumnProps: { fixed: 'left' },
|
|
|
+ actionColumn: {
|
|
|
+ width: 100,
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ slots: { customRender: 'action' },
|
|
|
+ fixed: 'right',
|
|
|
+ },
|
|
|
+ pagination: {
|
|
|
+ hideOnSinglePage: false,
|
|
|
+ },
|
|
|
+ clickToRowSelect: false,
|
|
|
+ tableSetting: {
|
|
|
+ redo: true,
|
|
|
+ size: true,
|
|
|
+ setting: false,
|
|
|
+ fullScreen: false
|
|
|
+ },
|
|
|
+ });
|
|
|
+ //重置
|
|
|
+ const handleReset = () => {
|
|
|
+ searchValue.value = ''
|
|
|
+ filteredInfo.value.rid = null
|
|
|
+ reload()
|
|
|
+ }
|
|
|
+ //查询
|
|
|
+ const handleSearch = () => {
|
|
|
+ filteredInfo.value.rid = [searchValue.value]
|
|
|
+ // reload()
|
|
|
+ }
|
|
|
+ // 查看
|
|
|
+ const handleDetail = (record) => {
|
|
|
+ resId.value = record.rid
|
|
|
+ ifShowDetail.value = true
|
|
|
+ }
|
|
|
+ const onClose = () => {
|
|
|
emit('closeModal')
|
|
|
}
|
|
|
return {
|
|
|
- ...toRefs(propsData),
|
|
|
+ searchValue,
|
|
|
+ ifShowDetail,
|
|
|
+ resId,
|
|
|
+ ...toRefs(data),
|
|
|
//func
|
|
|
- onClose
|
|
|
+ registerTable,
|
|
|
+ onClose,
|
|
|
+ handleReset,
|
|
|
+ handleSearch,
|
|
|
+ handleDetail
|
|
|
};
|
|
|
},
|
|
|
});
|
|
|
-</script>
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.sources-body {
|
|
|
+ padding: 20px;
|
|
|
+ // max-height: 800px;
|
|
|
+ height: 800px;
|
|
|
+ overflow: auto;
|
|
|
+ background-color: #eff0f5;
|
|
|
+
|
|
|
+ .top-search {
|
|
|
+ width: 100%;
|
|
|
+ height: 74px;
|
|
|
+ border-radius: 6px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .left-search-input {
|
|
|
+ margin-left: 20px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .input {
|
|
|
+ margin-right: 30px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-btns {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-table {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
XiaXxxxxx