|
|
|
@ -1,14 +1,159 @@ |
|
|
|
<template> |
|
|
|
<div id="app" class="demo-container"> |
|
|
|
<el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef"> |
|
|
|
|
|
|
|
<!-- 按钮组件示例 --> |
|
|
|
<section class="demo-section"> |
|
|
|
<h2>页面提示框集合</h2> |
|
|
|
<PromptText text='这是一个提示框' :type="1" /> |
|
|
|
<PromptText text='这是一个提示框' :type="2" /> |
|
|
|
<PromptText text='这是一个提示框' :type="3" /> |
|
|
|
<PromptText text="前期准备事项" :type="1" class="beforeNotice"> |
|
|
|
<template #next_desc> |
|
|
|
<p class="flex"> |
|
|
|
<a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F" class="flex" |
|
|
|
target="_blank"> |
|
|
|
<img src="~@assets/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台 |
|
|
|
</p> |
|
|
|
</template> |
|
|
|
<template #desc> |
|
|
|
<p class="mt12 flex"> |
|
|
|
1. <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F" class="flex" |
|
|
|
target="_blank"> |
|
|
|
<img src="~@assets/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台 |
|
|
|
</p> |
|
|
|
<p class="mt10 flex"> |
|
|
|
2. <a href="https://dianjing.e.360.cn/ocpc/list" class="flex" target="_blank"> |
|
|
|
<img src="~@assets/form_linkActive.svg" alt="">前往ocpc设置页</a>＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。 |
|
|
|
</p> |
|
|
|
</template> |
|
|
|
</PromptText> |
|
|
|
</section> |
|
|
|
<section class="demo-section"> |
|
|
|
<h2>按钮组件集合</h2> |
|
|
|
<div class="flex"> |
|
|
|
<GuipButton type="ignore">哈哈</GuipButton> |
|
|
|
<GuipButton size="big">哈哈</GuipButton> |
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">按钮尺寸：</label> |
|
|
|
<GuipButton size="superBig">加盟并进入后台</GuipButton> |
|
|
|
<GuipButton size="big">准备完毕，验证自有域名</GuipButton> |
|
|
|
<GuipButton size="page">下一步</GuipButton> |
|
|
|
<GuipButton size="primary">保存</GuipButton> |
|
|
|
<GuipButton size="table">新增站点</GuipButton> |
|
|
|
<GuipButton size="form">前往添加</GuipButton> |
|
|
|
</div> |
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">强按钮：</label> |
|
|
|
<!-- 默认 type= primary normal 样式 --> |
|
|
|
<GuipButton>默认</GuipButton> |
|
|
|
<GuipButton loading>按钮</GuipButton> |
|
|
|
<GuipButton disabled>按钮</GuipButton> |
|
|
|
</div> |
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">弱按钮：</label> |
|
|
|
<GuipButton type="ignore">按钮</GuipButton> |
|
|
|
<GuipButton type="ignore" loading>按钮</GuipButton> |
|
|
|
<GuipButton type="ignore" disabled>按钮</GuipButton> |
|
|
|
</div> |
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">中按钮：</label> |
|
|
|
<GuipButton type="system">按钮</GuipButton> |
|
|
|
<GuipButton type="system" loading>按钮</GuipButton> |
|
|
|
<GuipButton type="system" disabled>按钮</GuipButton> |
|
|
|
</div> |
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">文字按钮：</label> |
|
|
|
<GuipButton type="text">强引导</GuipButton> |
|
|
|
<GuipButton type="grey">弱引导</GuipButton> |
|
|
|
</div> |
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">按钮套餐：</label> |
|
|
|
<GroupFormBtns /> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
<section class="demo-section"> |
|
|
|
<h2>输入框集合</h2> |
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">输入框：</label> |
|
|
|
<GuipInput ref="GuipInput" v-model="form.input1" width="200px" height="30px" placeholder="这是自定义默认提示语" /> |
|
|
|
|
|
|
|
<div style="width: 20px;height: 10px;"></div> |
|
|
|
|
|
|
|
<GuipInput ref="GuipInput" v-model="form.input2" :maxlength="100" @change="handleInput" @blur="handleInput" |
|
|
|
@input="handleInput" @focus="handleInput" placeholder="这是自定义默认提示语" /> |
|
|
|
|
|
|
|
<div style="width: 20px;height: 10px;"></div> |
|
|
|
|
|
|
|
<GuipInput v-model="form.input3" width="400px"> |
|
|
|
<span slot="prependshow">http:</span> |
|
|
|
<!-- <img slot="prefix" src="../assets/radio_checked.svg" alt=""> --> |
|
|
|
<!-- 输入框后面小图标 -事件自定义 --> |
|
|
|
<i slot="suffix" class="el-icon-close" @click="handleClear"></i> |
|
|
|
<!-- <img slot="suffix" src="../assets/radio_nochecked.svg" alt="" @click="handleClear"> --> |
|
|
|
|
|
|
|
<!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改--> |
|
|
|
<!-- <GuipButton slot="appendshow" size="mini">默认按钮</GuipButton> --> |
|
|
|
|
|
|
|
<!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改--> |
|
|
|
<span slot="appendshow">.checkcopy.com</span> |
|
|
|
</GuipInput> |
|
|
|
<!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> --> |
|
|
|
</div> |
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">文本域：固定行数</label> |
|
|
|
<GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="1" /> |
|
|
|
</div> |
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">文本域：自适应高度</label> |
|
|
|
<GuipTextarea :styleObject="{ width: '450px' }" placeholder="自适应高度" autosize /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">文本域：自定义label、描述</label> |
|
|
|
<GuipTextarea label="详细介绍" column="column" prop="doctor_detail" width="400px" height="40px" |
|
|
|
placeholder="请输入描述内容" desc="啊哈哈哈哈哈哈哈哈" show-word-limit /> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
<section class="demo-section"> |
|
|
|
<h2>实时预览tab组件</h2> |
|
|
|
<DevicePreview> |
|
|
|
<template #desktop> |
|
|
|
电脑端内容-内容自定义 |
|
|
|
</template> |
|
|
|
<template #mobile> |
|
|
|
内容自定义 |
|
|
|
手机端端内容-- 手机端端内容 |
|
|
|
</template> |
|
|
|
</DevicePreview> |
|
|
|
</section> |
|
|
|
<section> |
|
|
|
<h2>单选框组件集合</h2> |
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">单选框(对象格式)：</label> |
|
|
|
<GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language" |
|
|
|
@change="radioChange" :rules="rules.language" /> |
|
|
|
</div> |
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">单选框2（数组格式 + 自定义取值）：</label> |
|
|
|
<GuipRadio v-model="form.language" :options="languageOptions1" label="自定义属性" prop="language" |
|
|
|
@change="radioChange" :rules="rules.language" label-key="name" :disabledKeys="['1']" value-key="id" /> |
|
|
|
</div> |
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">单选框：</label> |
|
|
|
<el-radio v-model="radio1" :label="1">选项一</el-radio> |
|
|
|
<el-radio v-model="radio1" :label="2">选项二</el-radio> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="ele-item"> |
|
|
|
<label for="">单选框组：</label> |
|
|
|
<el-radio-group v-model="radio" @input="radioChange"> |
|
|
|
<el-radio :label="3">备选项</el-radio> |
|
|
|
<el-radio :label="6">备选项</el-radio> |
|
|
|
<el-radio :label="9">备选项</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
|
|
|
|
</el-form> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -16,20 +161,612 @@ |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
// 表格数据示例 |
|
|
|
tableData: [ |
|
|
|
{ id: 1, name: '张三', age: 25 }, |
|
|
|
{ id: 2, name: '李四', age: 30 } |
|
|
|
content: '测试一下', |
|
|
|
domainOptions: [ |
|
|
|
{ |
|
|
|
value: '.chachongz.com', |
|
|
|
label: '111.chachongz.com', |
|
|
|
id: '11', |
|
|
|
name: '测试一下自定义名称111' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '.turnitin.org.cn', |
|
|
|
label: '222.turnitin.org.cn', |
|
|
|
id: '22', |
|
|
|
name: '测试一下自定义名称222' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '.jishu.chachongz.com', |
|
|
|
label: '333.jishu.chachongz.com', |
|
|
|
id: '33', |
|
|
|
name: '测试一下自定义名称333' |
|
|
|
}, |
|
|
|
], |
|
|
|
columns: [ |
|
|
|
{ prop: 'id', label: 'ID' }, |
|
|
|
{ prop: 'name', label: '姓名' }, |
|
|
|
{ prop: 'age', label: '年龄' } |
|
|
|
tableData3: [{ |
|
|
|
id: '12987122', |
|
|
|
name: '王小虎', |
|
|
|
amount1: '234', |
|
|
|
amount2: '3.2', |
|
|
|
amount3: 10 |
|
|
|
}, { |
|
|
|
id: '12987123', |
|
|
|
name: '王小虎', |
|
|
|
amount1: '165', |
|
|
|
amount2: '4.43', |
|
|
|
amount3: 12 |
|
|
|
}, { |
|
|
|
id: '12987124', |
|
|
|
name: '王小虎', |
|
|
|
amount1: '324', |
|
|
|
amount2: '1.9', |
|
|
|
amount3: 9 |
|
|
|
}, { |
|
|
|
id: '12987125', |
|
|
|
name: '王小虎', |
|
|
|
amount1: '621', |
|
|
|
amount2: '2.2', |
|
|
|
amount3: 17 |
|
|
|
}, { |
|
|
|
id: '12987126', |
|
|
|
name: '王小虎', |
|
|
|
amount1: '539', |
|
|
|
amount2: '4.1', |
|
|
|
amount3: 15 |
|
|
|
}], |
|
|
|
tableWidth: 0, |
|
|
|
currentPage: 1, //当前页 |
|
|
|
pageSize: 5, //每页的容量 |
|
|
|
total: 0, //列表总数 |
|
|
|
tableLoading: false, |
|
|
|
timer: null, |
|
|
|
date1: '', |
|
|
|
switchValue: true, |
|
|
|
switchValue1: 1, |
|
|
|
switchValue2: '0', |
|
|
|
dialogVisible1: false, |
|
|
|
dialogVisible: false,//是否展示弹框 |
|
|
|
showCancelButton: true, // 控制是否显示取消按钮 |
|
|
|
showCloseButton: true, // 控制是否显示关闭按钮 |
|
|
|
form: { |
|
|
|
username: '', |
|
|
|
language: '', |
|
|
|
domain_set: '', |
|
|
|
domainSuffix: '11', |
|
|
|
domainSuffix1: '.chachongz.com', |
|
|
|
card: '1', |
|
|
|
input1: '跨年的烟火,绽放天空', |
|
|
|
input2: '', |
|
|
|
input3: '', |
|
|
|
}, |
|
|
|
languageOptions1: [ |
|
|
|
{ label: 'JavaScript', value: 'js', selectedLabel: 'JavaScripthhhhhhhhhh', id: '1', name: '麻辣烫' }, |
|
|
|
{ label: 'Python', value: 'py', selectedLabel: 'JavaScripthhhhhhhhhh', id: '10', name: '易烊千玺' }, |
|
|
|
{ label: 'Java', value: 'java', disabled: true, selectedLabel: 'JavaScripthhhhhhhhhh', id: '11', name: '王源' }, // 禁用选项 |
|
|
|
{ label: 'Go', value: 'go', selectedLabel: 'JavaScripthhhhhhhhhh', id: '12', name: '王俊凯' }, |
|
|
|
], |
|
|
|
languageOptions: { |
|
|
|
'20': '查重站', |
|
|
|
'31': 'AI站' |
|
|
|
}, |
|
|
|
rules: { |
|
|
|
username: [ |
|
|
|
{ required: true, message: '请输入用户名', trigger: 'blur' } |
|
|
|
], |
|
|
|
card: [ |
|
|
|
{ required: true, message: '请选择有效信息', trigger: 'blur' } |
|
|
|
], |
|
|
|
language: [ |
|
|
|
{ required: true, message: '请选择语言', trigger: 'blur' }, |
|
|
|
], |
|
|
|
phone: [ |
|
|
|
{ required: true, message: '请输入手机号', trigger: 'blur' } |
|
|
|
], |
|
|
|
age: [ |
|
|
|
{ required: true, message: '请输入年龄', trigger: 'blur' } |
|
|
|
] |
|
|
|
}, |
|
|
|
usernameRules: [{ required: true, message: 'Username is required', trigger: 'blur' }],//单独自定义rules |
|
|
|
msg: "测试", |
|
|
|
title: "相关附件", |
|
|
|
edit: false, |
|
|
|
action: true, |
|
|
|
header: false, |
|
|
|
width: 1920, |
|
|
|
height: 1080, |
|
|
|
dataList: [ |
|
|
|
{ name: "张三", age: 19, id: 1 }, |
|
|
|
{ name: "李四", age: 20, id: 2 }, |
|
|
|
], |
|
|
|
formList: [], |
|
|
|
// 模拟数据 详细 测试 |
|
|
|
fromItem: { |
|
|
|
id: "Shanghai", |
|
|
|
id1: "选项4", |
|
|
|
name: "用户名", |
|
|
|
radioId: "2", |
|
|
|
checkboxId: ["上海", "北京"], |
|
|
|
textareaIner: "textarea", |
|
|
|
dateTime: "2023-09-12 00:00:00", |
|
|
|
uploadList: [ |
|
|
|
{ |
|
|
|
name: "小梨猫.jpg", |
|
|
|
size: 160517, |
|
|
|
uid: 1695291434025, |
|
|
|
url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2", |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
// 表格数据 |
|
|
|
tableData2: [{ |
|
|
|
date: '2016-05-03', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄', |
|
|
|
price: '20', |
|
|
|
age: 20, |
|
|
|
// 在支持修改的项目中，需要主动保留一份原始数据 |
|
|
|
edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-02', |
|
|
|
name: '王小虎11', |
|
|
|
address: '上海市普陀区金沙江路 151811 弄', |
|
|
|
price: '10', |
|
|
|
age: 30, |
|
|
|
edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄' |
|
|
|
|
|
|
|
}, { |
|
|
|
date: '2016-05-04', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄', |
|
|
|
price: '200', |
|
|
|
}, { |
|
|
|
date: '2016-05-01', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-08', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-06', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-07', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}], |
|
|
|
tableData4: [{ |
|
|
|
date: '2016-05-03', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄', |
|
|
|
price: '20', |
|
|
|
age: 20, |
|
|
|
// 在支持修改的项目中，需要主动保留一份原始数据 |
|
|
|
edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-02', |
|
|
|
name: '王小虎11', |
|
|
|
address: '上海市普陀区金沙江路 151811 弄', |
|
|
|
price: '10', |
|
|
|
age: 30, |
|
|
|
edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄' |
|
|
|
|
|
|
|
}, { |
|
|
|
date: '2016-05-04', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄', |
|
|
|
price: '200', |
|
|
|
}, { |
|
|
|
date: '2016-05-01', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-08', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-06', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-07', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}], |
|
|
|
// 表格列配置 |
|
|
|
columns: [ |
|
|
|
{ prop: 'name', label: '姓名（带气泡）', popover: true }, // 支持气泡框 |
|
|
|
{ prop: 'age', label: '年龄', popover: true }, // 不支持气泡框 |
|
|
|
{ prop: 'address', label: '地址（带气泡）', popover: true }, // 支持气泡框 |
|
|
|
], |
|
|
|
optionss: [ |
|
|
|
{ |
|
|
|
value: "选项1", |
|
|
|
label: "黄金糕", |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: "选项2", |
|
|
|
label: "双皮奶", |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: "选项3", |
|
|
|
label: "蚵仔煎", |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: "选项4", |
|
|
|
label: "龙须面", |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: "选项5", |
|
|
|
label: "北京烤鸭", |
|
|
|
}, |
|
|
|
], |
|
|
|
cities: [ |
|
|
|
{ |
|
|
|
value: "Beijing", |
|
|
|
label: "北京", |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: "Shanghai", |
|
|
|
label: "上海", |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: "Nanjing", |
|
|
|
label: "南京", |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: "Chengdu", |
|
|
|
label: "成都", |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: "Shenzhen", |
|
|
|
label: "深圳", |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: "Guangzhou", |
|
|
|
label: "广州", |
|
|
|
} |
|
|
|
], |
|
|
|
tableData: [], |
|
|
|
input: 'hahhahah', |
|
|
|
defaultValue: 'asdasda', |
|
|
|
radio: 3, |
|
|
|
radio1: 5, |
|
|
|
btnstyleObj: { |
|
|
|
width: '388px', |
|
|
|
height: '46px', |
|
|
|
borderRadius: '4px', |
|
|
|
background: '#006AFF', |
|
|
|
}, |
|
|
|
btnstyleObj1: { |
|
|
|
width: '247px', |
|
|
|
height: '46px', |
|
|
|
borderRadius: '4px', |
|
|
|
}, |
|
|
|
styleObject: { |
|
|
|
minWidth: '200px', |
|
|
|
maxWidth: '400px', |
|
|
|
// height: '40px' |
|
|
|
}, |
|
|
|
styleObject1: { |
|
|
|
width: '600px', |
|
|
|
height: '50px' |
|
|
|
}, |
|
|
|
plain: false, |
|
|
|
|
|
|
|
options: [{ |
|
|
|
value: '选项1', |
|
|
|
label1: '黄金hhhhhh', |
|
|
|
id1: '1', |
|
|
|
id2: '啊11哈哈', |
|
|
|
label: '黄金糕' |
|
|
|
}, { |
|
|
|
value: '选项2', |
|
|
|
id1: '12', |
|
|
|
id2: '啊22哈哈', |
|
|
|
label1: '双皮奶hhhhhhhhh', |
|
|
|
label: '双皮奶' |
|
|
|
}, { |
|
|
|
value: '选项3', |
|
|
|
id1: '13', |
|
|
|
id2: '啊33哈哈', |
|
|
|
label1: '蚵仔煎hhhhhhhhh', |
|
|
|
label: '蚵仔煎' |
|
|
|
}, { |
|
|
|
value: '选项4', |
|
|
|
id1: '14', |
|
|
|
id2: '啊444哈哈', |
|
|
|
label1: '双皮奶hhhhhhhhh', |
|
|
|
label: '龙须面' |
|
|
|
}, { |
|
|
|
value: '选项5', |
|
|
|
id1: '155', |
|
|
|
id2: '啊55哈哈', |
|
|
|
label1: '双皮奶hhhhhhhhh', |
|
|
|
label: '北京烤鸭' |
|
|
|
}], |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
console.log('当前组件注册情况:', this.$options.components) |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
currentDomainItem() { |
|
|
|
return this.findItemById('id', 'domainSuffix'); |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 手动copy内容 |
|
|
|
handleClickCopy() { |
|
|
|
this.$copy(this.form.input1, { |
|
|
|
successMsg: '内容已复制到剪贴板', |
|
|
|
errorMsg: '复制失败，请按Ctrl+C手动复制', |
|
|
|
vm: this |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 自定义的radio label 展示内容 |
|
|
|
formatLabel(option) { |
|
|
|
return `${option.name} (ID: ${option.id})`; |
|
|
|
}, |
|
|
|
findItemById(valueKey, key) { |
|
|
|
// 自动查找选中项 |
|
|
|
return this.domainOptions.find(item => item[valueKey] === this.form[key]); |
|
|
|
}, |
|
|
|
toggleDrop1(e) { |
|
|
|
this.$refs.dropDomain1.toggleDropdown(e) |
|
|
|
}, |
|
|
|
toggleDrop(e) { |
|
|
|
this.$refs.dropDomain.toggleDropdown(e) |
|
|
|
}, |
|
|
|
changeInputtest(e) { |
|
|
|
console.log(e, '---000changeInputtest'); |
|
|
|
}, |
|
|
|
changeSelectIp(item) { |
|
|
|
// 选中项 |
|
|
|
// this.selectedItem1 = { ...item }; |
|
|
|
console.log(item, this.form.domainSuffix, this.form.domainSuffix1, '选中的项-值-'); |
|
|
|
}, |
|
|
|
arraySpanMethod({ row, column, rowIndex, columnIndex }) { |
|
|
|
console.log(row, column); |
|
|
|
if (rowIndex % 2 === 0) { |
|
|
|
if (columnIndex === 0) { |
|
|
|
return [1, 2]; |
|
|
|
} else if (columnIndex === 1) { |
|
|
|
return [0, 0]; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) { |
|
|
|
console.log(row, column); |
|
|
|
|
|
|
|
if (columnIndex === 0) { |
|
|
|
if (rowIndex % 2 === 0) { |
|
|
|
return { |
|
|
|
rowspan: 2, |
|
|
|
colspan: 1 |
|
|
|
}; |
|
|
|
} else { |
|
|
|
return { |
|
|
|
rowspan: 0, |
|
|
|
colspan: 0 |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
openMessage(type) { |
|
|
|
console.log(type); |
|
|
|
// 单独指定方法调用 |
|
|
|
switch (type) { |
|
|
|
case 'success': |
|
|
|
this.$Message.success('成功，文案自定义') |
|
|
|
break; |
|
|
|
case 'error': |
|
|
|
this.$Message.error('失败，文案自定义') |
|
|
|
break; |
|
|
|
case 'info': |
|
|
|
this.$Message.info('提示，文案自定义') |
|
|
|
break; |
|
|
|
} |
|
|
|
// 自定义选项 |
|
|
|
// this.$Message({ |
|
|
|
// type: 'success', |
|
|
|
// title: '成功标题', |
|
|
|
// message: '这是一条成功的提示消息', |
|
|
|
// duration: 5000, |
|
|
|
// showClose: true, |
|
|
|
// center: true |
|
|
|
// }) |
|
|
|
}, |
|
|
|
showTooltip() { |
|
|
|
this.$refs.tooltip.show() |
|
|
|
}, |
|
|
|
hideTooltip() { |
|
|
|
this.$refs.tooltip.hide() |
|
|
|
}, |
|
|
|
handleSizeChange(val) { |
|
|
|
this.pageSize = val |
|
|
|
this.getStagePurchase() |
|
|
|
}, |
|
|
|
handleCurrentChange(val) { |
|
|
|
this.currentPage = val |
|
|
|
this.getStagePurchase() |
|
|
|
}, |
|
|
|
getStagePurchase() { |
|
|
|
this.tableLoading = true |
|
|
|
const that = this |
|
|
|
that.tableData = [] |
|
|
|
this.$http('POST', '/supernew/ajax_get_stage_purchase', { |
|
|
|
type: 0, |
|
|
|
cur_page: 1, |
|
|
|
page_size: 5, |
|
|
|
}, { |
|
|
|
headers: { |
|
|
|
'AUTH': '3c901fa4a19a7ad9d01238890863d499' |
|
|
|
} |
|
|
|
}).then(response => { |
|
|
|
this.tableLoading = false |
|
|
|
this.$nextTick(() => { |
|
|
|
that.tableData = response.data.list |
|
|
|
// console.log(that.tableData,'---that.tableData'); |
|
|
|
// that.type2name = response.data.type2name |
|
|
|
that.total = response.data.total |
|
|
|
}) |
|
|
|
}).catch(error => { |
|
|
|
console.error(error, 'error') |
|
|
|
}) |
|
|
|
}, |
|
|
|
btnClick() { |
|
|
|
|
|
|
|
}, |
|
|
|
openLoading() { |
|
|
|
this.$store.dispatch('showLoading') |
|
|
|
setTimeout(() => { |
|
|
|
this.$store.dispatch('hideLoading') |
|
|
|
}, 2000) |
|
|
|
|
|
|
|
}, |
|
|
|
handleFilter(column) { |
|
|
|
// 在这里处理筛选逻辑 |
|
|
|
console.log('筛选列:', column); |
|
|
|
}, |
|
|
|
// 部分情况可能导致页面不更新，增加 key 强制重新渲染 |
|
|
|
random() { |
|
|
|
var randomNumber = Math.random(); |
|
|
|
return randomNumber |
|
|
|
}, |
|
|
|
onSwitchChange(value) { |
|
|
|
console.log('Switch 状态变化:', this.switchValue, value); |
|
|
|
}, |
|
|
|
// 弹框相关方法---start |
|
|
|
openDialog() { |
|
|
|
this.dialogVisible = true; |
|
|
|
}, |
|
|
|
openDialog1() { |
|
|
|
this.dialogVisible1 = true; |
|
|
|
}, |
|
|
|
// 确认按钮事件 |
|
|
|
handleConfirm() { |
|
|
|
this.$message.success('点击了确认按钮'); |
|
|
|
this.dialogVisible = false; |
|
|
|
}, |
|
|
|
// 取消按钮事件 |
|
|
|
handleCancel() { |
|
|
|
this.$message.warning('点击了取消按钮'); |
|
|
|
this.dialogVisible = false; |
|
|
|
this.dialogVisible1 = false; |
|
|
|
}, |
|
|
|
// 关闭弹框事件 |
|
|
|
handleClose() { |
|
|
|
this.$message.info('弹框已关闭'); |
|
|
|
this.dialogVisible = false; |
|
|
|
}, |
|
|
|
dialogVisibleChange(data) { |
|
|
|
console.log(data, 'data098908090'); |
|
|
|
}, |
|
|
|
// 弹框相关方法---end |
|
|
|
|
|
|
|
// 选择表格某一项 点击 |
|
|
|
handlePriceClick(row) { |
|
|
|
this.currentRow = row; |
|
|
|
this.editedPrice = row.price; |
|
|
|
this.dialogVisible = true; |
|
|
|
}, |
|
|
|
|
|
|
|
// 表格气泡框----- |
|
|
|
// 确认事件 |
|
|
|
onConfirm(row, prop) { |
|
|
|
console.log('确认修改:', row, prop); |
|
|
|
this.$message.success('修改成功'); |
|
|
|
this.$set(this.tableData4, row) |
|
|
|
console.log(this.tableData4, 'this.tableData====='); |
|
|
|
}, |
|
|
|
// 取消事件 |
|
|
|
onCancel(row, prop) { |
|
|
|
console.log('取消修改:', row, prop); |
|
|
|
this.$message.info('已取消'); |
|
|
|
this.$set(this.tableData, row) |
|
|
|
}, |
|
|
|
// 表格气泡框----- |
|
|
|
|
|
|
|
// 监听单选框组变化 |
|
|
|
radioChange(data) { |
|
|
|
console.log(data, 'radio--data'); |
|
|
|
}, |
|
|
|
handleClick(row) { |
|
|
|
console.log(row); |
|
|
|
}, |
|
|
|
submitForm() { |
|
|
|
this.$refs.formRef.validate((valid) => { |
|
|
|
console.log(this.form, '======formxinxi'); |
|
|
|
if (valid) { |
|
|
|
alert('提交成功!'); |
|
|
|
} else { |
|
|
|
return false; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 重置表单 |
|
|
|
resetForm() { |
|
|
|
this.$refs.form.resetFields(); |
|
|
|
}, |
|
|
|
triggerError() { |
|
|
|
this.$refs.formRef.validateField('username', (error) => { |
|
|
|
if (error) { |
|
|
|
console.log('错误信息:', error); |
|
|
|
} else { |
|
|
|
console.log('无错误'); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
getFormdata() { |
|
|
|
console.log(this.$refs.GuipInput.value); |
|
|
|
}, |
|
|
|
handleInput(value) { |
|
|
|
console.log(value, 'value===输入框输入得知'); |
|
|
|
}, |
|
|
|
handleClear(value) { |
|
|
|
this.form.input3 = '这是我清除后给的文案' |
|
|
|
// this.handleInput('') |
|
|
|
console.log(value, 'value===qinghcu'); |
|
|
|
}, |
|
|
|
getList() { |
|
|
|
const dataList = rules(); |
|
|
|
dataList.forEach((item) => { |
|
|
|
if (item.field === "id") { |
|
|
|
item.options = this.cities; |
|
|
|
} |
|
|
|
if (item.field === "id1") { |
|
|
|
item.options = this.optionss; |
|
|
|
} |
|
|
|
}); |
|
|
|
this.formList = dataList; |
|
|
|
}, |
|
|
|
save() { |
|
|
|
this.$refs.VabForm.submitForm("ruleForm"); |
|
|
|
}, |
|
|
|
//取消 |
|
|
|
cancellation() { |
|
|
|
this.$refs.VabForm.resetForm("ruleForm"); |
|
|
|
}, |
|
|
|
// 表格点击、选择 |
|
|
|
handleSelectionChange(data) { |
|
|
|
// 多选模式下的时候 data 为数组格式 |
|
|
|
// 单选的时候是 对象 |
|
|
|
console.log(data, '表格行信息'); |
|
|
|
}, |
|
|
|
// 全选按钮 |
|
|
|
toggleAllSelection() { |
|
|
|
// console.log(this.$refs.multipleTable,'this.$refs.multipleTable'); |
|
|
|
this.$refs.multipleTable.$refs.guiptable.toggleAllSelection(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
if (this.timer) { |
|
|
|
clearTimeout(this.timer) |
|
|
|
// 确保离开组件时关闭 loading |
|
|
|
this.$store.dispatch('hideContentLoading') |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -37,15 +774,32 @@ |
|
|
|
<style scoped> |
|
|
|
.demo-container { |
|
|
|
padding: 20px; |
|
|
|
max-width: 800px; |
|
|
|
max-width: 90%; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
|
|
|
|
.ele-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: flex-start; |
|
|
|
margin: 20px 0 30px; |
|
|
|
|
|
|
|
label { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: bold; |
|
|
|
width: 100px; |
|
|
|
margin-right: 10px; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.demo-section { |
|
|
|
margin: 30px 0; |
|
|
|
padding: 20px; |
|
|
|
border: 1px solid #eee; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
h2 { |
|
|
|
color: #333; |
|
|
|
margin-bottom: 15px; |
|
|
|
|
zq
2 months ago
