GitBucket
Newer
<template>
<div class="apiMarket publicContainer">
<div class="dataTitle">API市场</div>
<el-divider />
<div class="dataContent">
<el-row class="dataTop">
<el-col :span="16" class="dataLeft">
<div class="dataBox">
<el-input v-model="qlCode" style="width: 200px" placeholder="请输入关键字">
<template #suffix>
<el-icon class="el-input__icon searchBtn"><search /></el-icon>
</template>
</el-input>
</div>
</el-col>
<el-col :span="3">
<el-button type="primary" icon="search">查询</el-button>
<el-button type="primary" icon="Refresh" plain>重置</el-button>
<!-- <el-button type="primary" icon="Plus" @click="addInfo">新增</el-button>
<el-button type="primary" plain>批量删除</el-button> -->
</el-col>
</el-row>
<!-- 表单 -->
<div class="dataForm" v-setHeight="{ bottom: 60 }">
<div class="apiBox" v-for="(item, index) in tableData" :key="index">
<div class="apiLeft">
<img :src="tj_icon" alt="" class="apiImg" />
</div>
<div class="apiRight">
<div class="rightTop">
<div class="apiTitle">API ID: {{ item.code }}</div>
<div class="apiTitle">API名称: {{ item.name }}</div>
<div class="apiTitle">API标签: {{ item.p1 }}</div>
<div class="apiTitle">认证方式: {{ item.p2 }}</div>
</div>
<div class="rightBottom">
<el-button type="primary" plain>API 详情</el-button>
<el-button type="primary" plain @click="addInfo(item)">申请调用</el-button>
</div>
</div>
</div>
</div>
<pagination
class="pagingPosition"
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
<!-- 新增 及 修改 -->
<el-dialog v-model="dialogConfig.open" :show-close="true" class="dia" destroy-on-close width="800px">
<template #header>
<div class="diaHeader">
{{ dialogConfig.title }}
</div>
</template>
<el-form :model="addForm" :rules="rules" label-width="auto" ref="ruleAddFormRef">
<!-- <el-row>
<el-col :span="24">
<el-form-item label="桥梁编号" prop="title">
<el-input v-model="addForm.code" placeholder="请输入" clearable />
</el-form-item>
</el-col>
</el-row> -->
<el-row>
<el-col :span="24">
<el-form-item label="申请人" prop="title">
<el-input v-model="addForm.name" placeholder="请输入" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="最大请求量" prop="">
<el-input v-model="addForm.p1" placeholder="请输入" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="期限" prop="">
<!-- <el-input v-model="addForm.p5" placeholder="请输入" clearable /> -->
<el-select v-model="addForm.p2" style="width: 100%">
<el-option v-for="item in stationType" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="关联应用" prop="">
<!-- <el-input v-model="addForm.p5" placeholder="请输入" clearable /> -->
<el-select v-model="addForm.p3" style="width: 100%">
<el-option v-for="item in stateType1" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="申请原因" prop="">
<el-input
v-model="addForm.p4"
:autosize="{ minRows: 2, maxRows: 4 }"
type="textarea"
placeholder="请输入"
maxlength="300"
show-word-limit
/>
</el-form-item>
</el-col>
</el-row>
<el-row class="diaCheck">
<el-button type="primary" @click="submitForm(ruleAddFormRef)">确 定</el-button>
<el-button class="cancel" @click="close">取 消</el-button>
</el-row>
</el-form>
</el-dialog>
</div>
</template>
<script setup name="apiMarket">
import tj_icon from '@/assets/images/order/tj_icon.png';
import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
import { onMounted, reactive, toRefs } from 'vue';
const { proxy } = getCurrentInstance();
const stationType = ref([
{
id: 1,
value: 1,
label: '一周',
},
{
id: 2,
value: 2,
label: '一个月',
},
{
id: 3,
value: 3,
label: '三个月',
},
{
id: 4,
value: 4,
label: '半年',
},
{
id: 5,
value: 5,
label: '一年',
},
]);
const stateType = ref([
{
id: 1,
value: 1,
label: '待上线',
},
{
id: 2,
value: 2,
label: '已上线',
},
{
id: 3,
value: 3,
label: '已下线',
},
]);
const stateType1 = ref([
{
id: 1,
value: 1,
label: '应用1',
},
{
id: 2,
value: 2,
label: '应用2',
},
{
id: 3,
value: 3,
label: '应用3',
},
{
id: 4,
value: 4,
label: '应用4',
},
]);
const ruleAddFormRef = ref();
const total = ref(0);
const loading = ref(false);
const queryParams = ref({
pageNum: 1,
pageSize: 10,
});
const qlCode = ref('');
const tableData = ref([]);
const multipleSelection = ref([]); // 多选数据
const dataList = reactive({
dialogConfig: {
title: '',
open: false,
},
addForm: {
id: undefined,
code: '',
name: '',
p1: '',
p2: '',
p3: '',
p4: '',
p5: '',
p6: '',
p7: '',
p8: '',
p9: '',
info: '',
handlePicList: [],
},
rules: {
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
},
});
const { dialogConfig, addForm, rules } = toRefs(dataList);
// 新增和编辑
const addInfo = row => {
dialogConfig.value.open = true;
// addForm.value = row;
dialogConfig.value.title = '申请调用';
// if (row.id) {
// addForm.value = row;
// dialogConfig.value.title = '编辑API管理';
// } else {
// addForm.value = {
// id: undefined,
// code: '',
// name: '',
// p1: '',
// p2: '',
// p3: '',
// p4: '',
// p5: '',
// p6: '',
// p7: '',
// p8: '',
// p9: '',
// info: '',
// handlePicList: [],
// };
// dialogConfig.value.title = '新增API管理';
// }
};
// 新增和编辑 提交
const submitForm = formRef => {
if (!formRef) return;
formRef.validate(valid => {
if (valid) {
console.log('---------', addForm.value);
// addInfo(addForm.value).then(response => {
// proxy.$modal.msgSuccess('新增成功');
// getInfoList();
// });
dialogConfig.value.open = false;
}
});
};
const close = () => {
dialogConfig.value.open = false;
};
// table多选
const handleSelectionChange = val => {
console.log('🚀 ~ handleSelectionChange ~ val:', val);
multipleSelection.value = val;
};
// 新增和编辑
// 删除
const deleteInfo = () => {};
// 获取表单数据
const getList = () => {
loading.value = true;
setTimeout(() => {
tableData.value = [
{
id: '001',
code: '123456789',
date: '2022-06-01 12:00:00',
name: '桥梁名称',
p1: '1',
p2: '001',
p3: '002',
p4: 1,
p5: 1,
p6: 1,
p7: '34',
p8: '2022-06-01 12:00:00',
p9: '',
info: '',
handlePicList: [],
},
{
id: '002',
code: '123456789',
date: '2022-06-01 12:00:00',
name: '桥梁名称',
p1: '1',
p2: '20',
p3: '2022',
p4: 1,
p5: 1,
p6: 1,
p7: '34',
p8: '2022-06-01 12:00:00',
p9: '',
info: '',
handlePicList: [],
},
{
id: '002',
code: '123456789',
date: '2022-06-01 12:00:00',
name: '桥梁名称',
p1: '1',
p2: '20',
p3: '2022',
p4: 1,
p5: 1,
p6: 1,
p7: '34',
p8: '2022-06-01 12:00:00',
p9: '',
info: '',
handlePicList: [],
},
{
id: '002',
code: '123456789',
date: '2022-06-01 12:00:00',
name: '桥梁名称',
p1: '1',
p2: '20',
p3: '2022',
p4: 1,
p5: 1,
p6: 1,
p7: '34',
p8: '2022-06-01 12:00:00',
p9: '',
info: '',
handlePicList: [],
},
{
id: '002',
code: '123456789',
date: '2022-06-01 12:00:00',
name: '桥梁名称',
p1: '1',
p2: '20',
p3: '2022',
p4: 1,
p5: 1,
p6: 1,
p7: '34',
p8: '2022-06-01 12:00:00',
p9: '',
info: '',
handlePicList: [],
},
{
id: '002',
code: '123456789',
date: '2022-06-01 12:00:00',
name: '桥梁名称',
p1: '1',
p2: '20',
p3: '2022',
p4: 1,
p5: 1,
p6: 1,
p7: '34',
p8: '2022-06-01 12:00:00',
p9: '',
info: '',
handlePicList: [],
},
{
id: '002',
code: '123456789',
date: '2022-06-01 12:00:00',
name: '桥梁名称',
p1: '1',
p2: '20',
p3: '2022',
p4: 1,
p5: 1,
p6: 1,
p7: '34',
p8: '2022-06-01 12:00:00',
p9: '',
info: '',
handlePicList: [],
},
{
id: '002',
code: '123456789',
date: '2022-06-01 12:00:00',
name: '桥梁名称',
p1: '1',
p2: '20',
p3: '2022',
p4: 1,
p5: 1,
p6: 1,
p7: '34',
p8: '2022-06-01 12:00:00',
p9: '',
info: '',
handlePicList: [],
},
{
id: '002',
code: '123456789',
date: '2022-06-01 12:00:00',
name: '桥梁名称',
p1: '1',
p2: '20',
p3: '2022',
p4: 1,
p5: 1,
p6: 1,
p7: '34',
p8: '2022-06-01 12:00:00',
p9: '',
info: '',
handlePicList: [],
},
{
id: '002',
code: '123456789',
date: '2022-06-01 12:00:00',
name: '桥梁名称',
p1: '1',
p2: '20',
p3: '2022',
p4: 1,
p5: 1,
p6: 1,
p7: '34',
p8: '2022-06-01 12:00:00',
p9: '',
info: '',
handlePicList: [],
},
{
id: '002',
code: '123456789',
date: '2022-06-01 12:00:00',
name: '桥梁名称',
p1: '1',
p2: '20',
p3: '2022',
p4: 1,
p5: 1,
p6: 1,
p7: '34',
p8: '2022-06-01 12:00:00',
p9: '',
info: '',
handlePicList: [],
},
{
id: '002',
code: '123456789',
date: '2022-06-01 12:00:00',
name: '桥梁名称',
p1: '1',
p2: '20',
p3: '2022',
p4: 1,
p5: 1,
p6: 1,
p7: '34',
p8: '2022-06-01 12:00:00',
p9: '',
info: '',
handlePicList: [],
},
{
id: '002',
code: '123456789',
date: '2022-06-01 12:00:00',
name: '桥梁名称',
p1: '1',
p2: '20',
p3: '2022',
p4: 1,
p5: 1,
p6: 1,
p7: '34',
p8: '2022-06-01 12:00:00',
p9: '',
info: '',
handlePicList: [],
},
{
id: '002',
code: '123456789',
date: '2022-06-01 12:00:00',
name: '桥梁名称',
p1: '1',
p2: '20',
p3: '2022',
p4: 1,
p5: 1,
p6: 1,
p7: '34',
p8: '2022-06-01 12:00:00',
p9: '',
info: '',
handlePicList: [],
},
];
total.value = tableData.value.length;
loading.value = false;
}, 500);
};
onMounted(() => {
getList();
});
</script>
<style lang="scss" scoped>
.apiMarket {
position: relative;
width: 100%;
height: 100%;
// border: 1px solid red;
// background: #fff;
.dataTitle {
position: relative;
padding-left: 10px;
&::before {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
content: '';
width: 5px;
height: 14px;
background: #2561ef;
border-radius: 3px;
}
}
.dataContent {
height: calc(100% - 35px);
.dataTop {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
.dataLeft {
display: flex;
.dataBox {
margin-right: 20px;
}
}
}
.dataForm {
// border: 1px solid red;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
overflow-y: auto;
.apiBox {
border: 1px solid #ccc;
padding: 20px 30px;
// margin-bottom: 30px;
// margin-right: 40px;
margin: 0px 20px 30px 20px;
border-radius: 20px;
// height: 160px;
display: flex;
.apiLeft {
margin-right: 20px;
.apiImg {
width: 100px;
height: 100px;
}
}
.apiRight {
.apiTitle {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
}
}
}
}
}
.el-divider {
margin: 10px 0 15px 0;
}
.searchBtn {
cursor: pointer;
&:hover {
color: #2561ef;
}
}
.pagingPosition {
position: absolute !important;
right: 0px;
bottom: 0px;
}
// .dia{
// height: 800px !important;
// }
</style>