TreeData
/
cloud-web
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

IP小卡片

master
chaiyapeng 2024-08-23 19:09:49 +08:00
parent 7f86e3fd2b
commit e0ae0cdc00
1 changed files with 220 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

237
src/views/port/port/index.vue
View File

@ -1,32 +1,185 @@
<template>
<div>
<div class="app-container">
<el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
<el-form-item label="客户名称" prop="appName">
<el-input
v-model="queryParams.appName"
clearable
placeholder="请输入客户名称"
style="width: 240px"
@keyup.enter.native="getList"
/>
</el-form-item>
<el-form-item label="客户编码" prop="appCode">
<el-input
v-model="queryParams.appCode"
clearable
placeholder="请输入客户编码"
style="width: 240px"
@keyup.enter.native="getList"
/>
</el-form-item>
<el-form-item label="客户状态" prop="configType">
<el-select v-model="queryParams.status" clearable placeholder="客户状态">
<el-option
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" size="mini" type="primary" @click="getList">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
v-hasPermi="['system:config:add']"
icon="el-icon-plus"
plain
size="mini"
type="primary"
@click="handleAdd"
>新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['system:config:export']"
icon="el-icon-download"
plain
size="mini"
type="warning"
@click="handleExport"
>导出
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-row :gutter="10">
<el-empty description="暂无支付客户" v-if="customerList.length === 0"></el-empty>
<el-col :span="8" v-for="customer in customerList" v-if="customerList.length !== 0">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>手机号查询归属地</span>
<el-button style="float: right; padding: 3px 0" type="text">购买</el-button>
<span style="font-size: 18px;font-weight: 900">{{ customer.appName }}</span>
<el-switch
style="float: right; margin: 4px 5px 0;"
v-model="customer.status"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="Y"
inactive-value="N"
@change="handleStatusChange(customer)"
>
</el-switch>
<el-popconfirm
confirm-button-text='好的'
cancel-button-text='不用了'
icon="el-icon-info"
icon-color="red"
title="这是一段内容确定删除吗？"
@confirm="handleDelete(customer.id)"
>
<el-button style="float: right; padding: 5px ;margin: 0 5px" slot="reference" type="danger" icon="el-icon-delete" circle ></el-button>
</el-popconfirm>
<el-button style="float: right; padding: 5px ;margin: 0 5px" type="primary" icon="el-icon-edit" @click="handleUpdate(customer.id)"circle></el-button>
</div>
<div>
省份： {{}}
城市： {{}}
区号： {{}}
邮编： {{}}
运营商：{{}}
<el-descriptions class="margin-top" :column="1" :size="size" border>
<el-descriptions-item>
<template slot="label"><i class="el-icon-user"></i>客户名称</template>
{{ customer.appName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label"><i class="el-icon-user"></i>客户编码</template>
{{ customer.appCode }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label"><i class="el-icon-user"></i>创建人</template>
{{ customer.createBy }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label"><i class="el-icon-user"></i>创建日期</template>
{{ customer.createTime }}
</el-descriptions-item>
</el-descriptions>
<el-divider content-position="left">近5笔交易记录</el-divider>
<el-table
:data="customer.orderPaySimpleRespList"
style="width: 100%">
<el-table-column prop="cusOrderNumber" label="客户单号"></el-table-column>
<el-table-column prop="price" label="支付金额"></el-table-column>
<el-table-column prop="channelTypeName" label="渠道商"></el-table-column>
</el-table>
</div>
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>IP查询归属地</span>
<el-button style="float: right; padding: 3px 0" type="text">购买</el-button>
</div>
<div>
Country： {{}}
Province： {{}}
City： {{}}
District： {{}}
Isp：{{}}
</div>
</el-card>
</div>
</el-col>
</el-row>
<el-dialog
:title="title"
:visible.sync="open"
width="50%">
<el-form ref="form" :model="form" label-width="120px" :rules="rules">
<el-form-item label="客户编码" prop="appCode">
<span v-if="this.form.id !=null" style="font-size: 16px">{{form.appCode}}</span>
<el-select v-if="this.form.id == null" v-model="form.appCode" placeholder="请选择未入住的客户" style="width: 100%">
<el-option
v-for="item in appCodeList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="客户名称" prop="appName">
<el-input v-model="form.appName"></el-input>
</el-form-item>
<el-form-item label="是否激活开通" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="详细描述">
<el-input v-model="form.appDesc" type="textarea"></el-input>
</el-form-item>
<el-form-item label="客户备注">
<editor v-model="form.remark" :min-height="192"/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="open = false">取 消</el-button>
<el-button type="primary" @click="submitForm">提 交</el-button>
</span>
</template>
<script>
@ -40,7 +193,45 @@ export default {
data() {
//这里存放数据"
return {};
return {
//未入住客户
appCodeList:["cloud-1","cloud-2","cloud-3"],
//模态框标题
title:"",
//表单内容
form:{
appName: "",
appCode: "",
appDesc: "",
status: "Y",
remark: ""
},
//修改和添加弹框
open:false,
switchValue:true,
// 显示搜索条件
showSearch: true,
//查询条件
queryParams: {
appName: "",
appCode: "",
status: "Y"
},
rules: {
appCode: [
{required: true, message: "请选择客户编码", trigger: "change"}
],
appName: [
{required: true, message: "客户名称不能为空", trigger: "blur"}
],
status: [
{required: true, message: "请选择客户是否开通", trigger: "blur"}
]
},
//客户列表
customerList:[],
};
},
//计算属性 类似于data概念",
computed: {},