|
|
|
|
<template>
|
|
|
|
|
<div class="main-content12">
|
|
|
|
|
<div class="elementWrap">
|
|
|
|
|
<!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
|
|
|
|
|
<el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
|
|
|
|
|
|
|
|
|
|
<div class="ele-item">
|
|
|
|
|
<label for="">单选框11：</label>
|
|
|
|
|
<GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
|
|
|
|
|
@change="radioChange" :rules="rules.language" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ele-item">
|
|
|
|
|
<label for="">下拉框：</label>
|
|
|
|
|
<GuipSelect width="600px" v-model="form.card" clearable label="卡片" :default-value="form.card"
|
|
|
|
|
prop="card" :options="options" valueKey="id1" labelKey="id2" />
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
|
|
|
|
|
<GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<GuipTable :tableData="tableData2" ref="multipleTable" @selectChange="handleSelectionChange"
|
|
|
|
|
:multiple="true" autoColumn="true" :loading="tableLoading" :border="true">
|
|
|
|
|
<!-- <template slot="header"> -->
|
|
|
|
|
<el-table-column width="180" fixed="left" label="名称(固定左)"></el-table-column>
|
|
|
|
|
<el-table-column prop="created_at" label="时间" width="200">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<div class="flex cell_render">
|
|
|
|
|
<GuipToolTip content="文字居中">
|
|
|
|
|
<span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{
|
|
|
|
|
scope.row.payment
|
|
|
|
|
==
|
|
|
|
|
'0' ? '文字居中' : '文字居中' }}</span>
|
|
|
|
|
</GuipToolTip>
|
|
|
|
|
<GuipToolTip content="图标居中">
|
|
|
|
|
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')"
|
|
|
|
|
:color="'#8A9099'" :hoverColor="'#006AFF'" />
|
|
|
|
|
</GuipToolTip>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="unit_num" label="数量" width="180">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<GuipToolTip content="单元格局中">
|
|
|
|
|
<div class="flex">
|
|
|
|
|
<span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{
|
|
|
|
|
scope.row.payment
|
|
|
|
|
==
|
|
|
|
|
'0' ? '单元格局中' : '单元格局中' }}</span>
|
|
|
|
|
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')"
|
|
|
|
|
:color="'#8A9099'" :hoverColor="'#006AFF'" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</GuipToolTip>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="name2" label="姓名" width="150"></el-table-column>
|
|
|
|
|
<el-table-column prop="price" label="价格" width="150">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<span @click="handlePriceClick(scope.row)">{{ scope.row.price }}元</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="address" label="地址1" width="150"> </el-table-column>
|
|
|
|
|
<el-table-column prop="address" label="地址2" width="250"> </el-table-column>
|
|
|
|
|
<el-table-column prop="address" label="地址3" width="150"> </el-table-column>
|
|
|
|
|
<el-table-column prop="address1" label="地址测试" width="100"></el-table-column>
|
|
|
|
|
<el-table-column prop="price" label="价格" width="300">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<GuipSelect width="200px" @change="changeSelect(scope.row)" v-model="form.card"
|
|
|
|
|
prop="card" :options="options" defaultValue="选项1" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="操作(固定右)" width="200" fixed="right">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<div class="flex">
|
|
|
|
|
<el-button @click="handleClick(scope.row)" type="text">查看</el-button>
|
|
|
|
|
<el-button type="text">编辑</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</GuipTable>
|
|
|
|
|
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
|
|
|
|
|
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
|
|
|
|
|
:total="total">
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex">
|
|
|
|
|
<h3 for="">表格(带气泡框),内容自定义：</h3>
|
|
|
|
|
<a href="/register">点击一下跳转参照页面</a>
|
|
|
|
|
<!-- 暂时废弃此版本 -->
|
|
|
|
|
<!-- <GuipTable :tableData="tableData4" :key="random()" ref="multipleTable"
|
|
|
|
|
@selectChange="handleSelectionChange" :multiple="true" autoColumn="true" width="900px"
|
|
|
|
|
:columns="columns" @confirm="onConfirm" @cancel="onCancel">
|
|
|
|
|
<template #popover-content-name="{ row, column }">
|
|
|
|
|
<div>
|
|
|
|
|
<GuipInput ref="GuipInput" width="252px" type="text"
|
|
|
|
|
v-model="row[`edit_${column.prop}`]" label="排序" :prop="column.label"
|
|
|
|
|
placeholder="这是" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template #popover-content-age="{ row, column }">
|
|
|
|
|
<GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" type="text"
|
|
|
|
|
label="年龄" :prop="column.label" placeholder="这是" unit="岁">
|
|
|
|
|
</GuipInput>
|
|
|
|
|
</template>
|
|
|
|
|
<template #popover-content-address="{ row, column }">
|
|
|
|
|
<div>
|
|
|
|
|
<p>自定义内容：{{ column.label }}</p>
|
|
|
|
|
<el-select v-model="row[`edit_${column.prop}`]" placeholder="请选择">
|
|
|
|
|
<el-option label="北京市" value="北京市" />
|
|
|
|
|
<el-option label="上海市" value="上海市" />
|
|
|
|
|
<el-option label="广州市" value="广州市" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</GuipTable> -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="ele-item">
|
|
|
|
|
<label for="">文本域：固定行数</label>
|
|
|
|
|
<GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="2" />
|
|
|
|
|
</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="90px"
|
|
|
|
|
placeholder="请输入描述内容" desc="啊哈哈哈哈哈哈哈哈" show-word-limit />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
<hover-button button-text="默认样式" :default-icon="require('../assets/upLoad_grey.svg')"
|
|
|
|
|
:hover-icon="require('../assets/upLoad_active.svg')" default-text-color="#23242B"
|
|
|
|
|
hover-text-color="#006AFF" @click="btnClick" />
|
|
|
|
|
<!-- 宽高单独传递 、其余统一放置在 customStyle 中-->
|
|
|
|
|
<hover-button button-text="自定义" :default-icon="require('@/assets/site/addIcon.svg')"
|
|
|
|
|
:hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#626573"
|
|
|
|
|
hover-text-color="#006AFF" width="110px" height="32px"
|
|
|
|
|
:customStyle="{ fontSize: '12px', background: '#fff', borderRadius: '2px', borderColor: '#DFE2E6' }" />
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ele-item">
|
|
|
|
|
<label for="">独特按钮单独写样式：</label>
|
|
|
|
|
<div class="btn1">创建首个网站</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 暂时废弃 -->
|
|
|
|
|
<!-- <div class="ele-item">
|
|
|
|
|
<label for="">常规按钮：</label>
|
|
|
|
|
<GuipButton>默认按钮</GuipButton>
|
|
|
|
|
<GuipButton type="mild" size="medium">轻度按钮</GuipButton>
|
|
|
|
|
<GuipButton type="primary">按钮</GuipButton>
|
|
|
|
|
<GuipButton type="reverseMild">按钮</GuipButton>
|
|
|
|
|
<GuipButton type="primary" loading>按钮</GuipButton>
|
|
|
|
|
<GuipButton type="success" :plain="plain">按钮</GuipButton>
|
|
|
|
|
<GuipButton type="info" :plain="plain">按钮</GuipButton>
|
|
|
|
|
<GuipButton type="warning" :plain="plain">按钮</GuipButton>
|
|
|
|
|
<GuipButton type="danger" :plain="plain">按钮</GuipButton>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ele-item">
|
|
|
|
|
<label for="">禁用按钮：</label>
|
|
|
|
|
<GuipButton disabled>默认按钮</GuipButton>
|
|
|
|
|
<GuipButton type="mild" disabled size="medium">轻度按钮</GuipButton>
|
|
|
|
|
<GuipButton type="reverseMild" disabled>按钮</GuipButton>
|
|
|
|
|
<GuipButton type="primary" size="medium" disabled>按钮</GuipButton>
|
|
|
|
|
<GuipButton type="success" disabled>按钮</GuipButton>
|
|
|
|
|
<GuipButton type="info" disabled>按钮</GuipButton>
|
|
|
|
|
<GuipButton type="warning" disabled>按钮</GuipButton>
|
|
|
|
|
<GuipButton type="danger" disabled>按钮</GuipButton>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ele-item">
|
|
|
|
|
<label for="">三种尺寸按钮：</label>
|
|
|
|
|
<GuipButton type="primary">默认按钮</GuipButton>
|
|
|
|
|
<GuipButton type="primary" size="medium">中等按钮</GuipButton>
|
|
|
|
|
<GuipButton type="primary" size="small">小的按钮</GuipButton>
|
|
|
|
|
<GuipButton type="primary" size="mini">迷你按钮</GuipButton>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="ele-item">
|
|
|
|
|
<label for="">自定义宽高按钮：</label>
|
|
|
|
|
<GuipButton type="primary" :btnstyle="btnstyleObj">宽高自定义</GuipButton>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="ele-item">
|
|
|
|
|
<label for="">提示：</label>
|
|
|
|
|
<GuipButton type="system" @click="openMessage('success')">成功提示</GuipButton>
|
|
|
|
|
<GuipButton type="system" @click="openMessage('error')"> 失败提示</GuipButton>
|
|
|
|
|
<GuipButton type="system" @click="openMessage('info')">警告提示</GuipButton>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="width: 600px;">
|
|
|
|
|
<h3>表单左右布局（直接使用封装好的input）</h3>
|
|
|
|
|
<!-- 表单左右布局 -->
|
|
|
|
|
<GuipInput ref="GuipInput" addClass="w510" v-model="form.username" label="Username" prop="username"
|
|
|
|
|
:rules="usernameRules" placeholder="这是自定义默认提11示语" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="width: 800px;height: 150px;">
|
|
|
|
|
<h3>表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)</h3>
|
|
|
|
|
<GuipInput ref="GuipInput" column="column" addClass="w510" required label="age" desc="这是是右侧文案"
|
|
|
|
|
v-model="form.age" prop="age" placeholder="这是自定义默认提示语" />
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 400px;height: 150px;">
|
|
|
|
|
<h3>自定义 表单内容 </h3>
|
|
|
|
|
<!-- 可以添加独立类名 默认宽度继承父元素 100% -->
|
|
|
|
|
<GuipFormItem column="column" class="mb24" label="自定义左侧" :required="true">
|
|
|
|
|
<!-- 如果 左侧为纯文本 无特殊格式、样式 可以直接 使用label 属性；
|
|
|
|
|
添加必输校验 直接使用 required 属性
|
|
|
|
|
特殊的使用slot = formLeft 自定义内容；
|
|
|
|
|
添加独立类名，修改样式 -->
|
|
|
|
|
<!-- <b slot="formLeft">自定义左侧</b> -->
|
|
|
|
|
<span class="desc" slot="formRight"><a href="https://www.baidu.com/">跳转一下</a> 自定义右侧</span>
|
|
|
|
|
<!-- 自定义下方内容 -->
|
|
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.age" prop="age"
|
|
|
|
|
placeholder="请输入" />
|
|
|
|
|
</GuipFormItem>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="ele-item">
|
|
|
|
|
<label for="">开关L</label>
|
|
|
|
|
<!-- active-value 开启状态的值 -->
|
|
|
|
|
<!-- inactive-value 关闭状态的值 -->
|
|
|
|
|
<GuipSwitch :modelValue="switchValue" activeText="默认类型" inactiveText="关闭" @change="onSwitchChange">
|
|
|
|
|
</GuipSwitch>
|
|
|
|
|
<GuipSwitch :modelValue="switchValue1" :active-value="1" :inactive-value="0" activeText="number" @change="onSwitchChange">
|
|
|
|
|
</GuipSwitch>
|
|
|
|
|
<GuipSwitch :modelValue="switchValue2" active-value="0" inactive-value="1" activeText="string" @change="onSwitchChange">
|
|
|
|
|
</GuipSwitch>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex ele-item">
|
|
|
|
|
<label for="">input、drop组合使用(默认使用)</label>
|
|
|
|
|
<GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
|
|
|
|
|
<div slot="formDom" class="self-drop-wrap flex">
|
|
|
|
|
<GuipInput style="width: 60%;" v-model="form.domain_set" placeholder="仅支持数字、字母">
|
|
|
|
|
</GuipInput>
|
|
|
|
|
<!-- 只用作选中内容展示 -->
|
|
|
|
|
<div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">
|
|
|
|
|
{{ currentDomainItem.name }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--触发 真实下拉操作 -->
|
|
|
|
|
<!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
|
|
|
|
|
<CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="form.domainSuffix1"
|
|
|
|
|
:options="domainOptions" @change="changeSelectIp" placeholder="请选择">
|
|
|
|
|
<template #normal>
|
|
|
|
|
<div class="flex flex-between noraml-jump">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<b>添加新域名</b>
|
|
|
|
|
<p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
|
|
|
|
|
<p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<GuipButton size="form">前往绑定</GuipButton>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</CustomDropdown>
|
|
|
|
|
</GuipFormItem>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex ele-item">
|
|
|
|
|
<label for="">input、drop组合使用(自定义下拉选择项)</label>
|
|
|
|
|
<GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
|
|
|
|
|
<div slot="formDom" class="self-drop-wrap flex">
|
|
|
|
|
<GuipInput style="width: 60%;" v-model="form.domain_set" placeholder="仅支持数字、字母">
|
|
|
|
|
</GuipInput>
|
|
|
|
|
<!-- 只用作选中内容展示 -->
|
|
|
|
|
<div @click="toggleDrop1" class="point flex appendDrop" style="width: 40%;">
|
|
|
|
|
{{ currentDomainItem.name }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--触发 真实下拉操作 -->
|
|
|
|
|
<!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
|
|
|
|
|
<CustomDropdown slot="formDom" ref="dropDomain1" width="100%" v-model="form.domainSuffix"
|
|
|
|
|
:options="domainOptions" @change="changeSelectIp" valueKey="id" placeholder="请选择">
|
|
|
|
|
<template #normal>
|
|
|
|
|
<div class="flex flex-between noraml-jump">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<b>添加新域名</b>
|
|
|
|
|
<p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
|
|
|
|
|
<p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<GuipButton size="form">前往绑定</GuipButton>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<!-- 自定义下拉选项 选中条件-->
|
|
|
|
|
<!-- 不添加这个 默认普通选中格式 单独取值 display-key
|
|
|
|
|
自定义渲染项 渲染的内容自定义 ，display-key 属性不再生效-->
|
|
|
|
|
<template #item="{ item }">
|
|
|
|
|
<div class="flex-between">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<p class="one">{{ item.label }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<img v-if="form.domainSuffix == item.id"
|
|
|
|
|
src="@/assets/register/drop-selected.svg" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</CustomDropdown>
|
|
|
|
|
</GuipFormItem>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex ele-item">
|
|
|
|
|
<label for="">单独实现自定义内容下拉选择</label>
|
|
|
|
|
<CustomDropdown width="500px" v-model="form.domainSuffix" :options="domainOptions"
|
|
|
|
|
@change="changeSelectIp" valueKey="id" placeholder="请选择">
|
|
|
|
|
<template #normal>
|
|
|
|
|
<div class="flex flex-between noraml-jump">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<b>添加新域名</b>
|
|
|
|
|
<p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
|
|
|
|
|
<p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<GuipButton size="form">前往绑定</GuipButton>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template #item="{ item }">
|
|
|
|
|
<div class="flex-between">
|
|
|
|
|
<p>测试一下自定义内容{{ item.id }} + {{ item.label }}</p>
|
|
|
|
|
<p>易烊千玺/田栩宁</p>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</CustomDropdown>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-button type="primary" @click="submitForm">Submit</el-button>
|
|
|
|
|
|
|
|
|
|
</el-form>
|
|
|
|
|
<div style="width: 100%;margin: 20px 0;height: 20px;background-color: antiquewhite;">
|
|
|
|
|
--------------------分割线0------------------------------</div>
|
|
|
|
|
|
|
|
|
|
<div style="display: flex;" class="ele-item">
|
|
|
|
|
<label for="">日期选择器</label>
|
|
|
|
|
<el-date-picker v-model="date1" type="daterange" range-separator="至" start-placeholder="开始日期"
|
|
|
|
|
end-placeholder="结束日期">
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div ref="ScaleBox" class="ScaleBox">
|
|
|
|
|
<!-- Form 组件-->
|
|
|
|
|
<!-- @headdenForm="headdenForm" -->
|
|
|
|
|
<!-- @changeSelect="changeSelect" -->
|
|
|
|
|
<!-- <GuipForm
|
|
|
|
|
:fromItem="fromItem"
|
|
|
|
|
:formNewList="formList"
|
|
|
|
|
:detail="edit"
|
|
|
|
|
:disabled="edit"
|
|
|
|
|
ref="VabForm"
|
|
|
|
|
/>
|
|
|
|
|
<div class="cardfooter" style="display: flex;">
|
|
|
|
|
<el-button @click="cancellation">取消</el-button>
|
|
|
|
|
<el-button @click="save" type="primary">保存</el-button>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex ele-item">
|
|
|
|
|
<label for="">一些功能集合</label>
|
|
|
|
|
<GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog">打开弹框（标题巨左、按钮居右）</GuipButton>
|
|
|
|
|
<GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog1">打开弹框（标题巨中、按钮居中）</GuipButton>
|
|
|
|
|
<GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex ele-item">
|
|
|
|
|
<label for="">提示信息</label>
|
|
|
|
|
<GuipToolTip content="这是一个提示">
|
|
|
|
|
<GuipButton type="primary" size="page">悬停查看提示</GuipButton>
|
|
|
|
|
</GuipToolTip>
|
|
|
|
|
|
|
|
|
|
<GuipToolTip placement="bottom" effect="light">
|
|
|
|
|
<GuipButton type="primary" size="page">自定义提示内容</GuipButton>
|
|
|
|
|
<template #content>
|
|
|
|
|
<div style="max-width: 200px">
|
|
|
|
|
<h4>自定义标题</h4>
|
|
|
|
|
<p>这里可以放任何HTML内容</p>
|
|
|
|
|
<el-button size="mini">甚至按钮</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</GuipToolTip>
|
|
|
|
|
<GuipToolTip placement="bottom" effect="light" content="点击进入编辑">
|
|
|
|
|
<svg-icon :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
|
|
|
|
|
:hoverColor="'#006AFF'" />
|
|
|
|
|
</GuipToolTip>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<GuipDialog :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false"
|
|
|
|
|
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
|
|
|
|
|
@close="handleClose" @dialogVisibleChange="dialogVisibleChange">
|
|
|
|
|
<!-- 自定义内容 -->
|
|
|
|
|
<div>
|
|
|
|
|
<p>这是一个自定义内容的弹框。</p>
|
|
|
|
|
</div>
|
|
|
|
|
</GuipDialog>
|
|
|
|
|
<GuipDialog type="center" :dialogVisible="dialogVisible1" title="自定义标题" :show-close-button="false"
|
|
|
|
|
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
|
|
|
|
|
@close="handleClose" @dialogVisibleChange="dialogVisibleChange">
|
|
|
|
|
<!-- 自定义内容 -->
|
|
|
|
|
<div>
|
|
|
|
|
<p>这是一个自定义内容的弹框。</p>
|
|
|
|
|
</div>
|
|
|
|
|
</GuipDialog>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
import { rules } from "../assets/vabForm";
|
|
|
|
|
import CustomDropdown from '@/components/CustomDropdown.vue';
|
|
|
|
|
import GuipSwitch from '@/components/GuipSwitch.vue';
|
|
|
|
|
import GuipDialog from '@/components/GuipDialog.vue';
|
|
|
|
|
import GuipRadio from '@/components/GuipRadio.vue';
|
|
|
|
|
import GuipButton from '@/components/GuipButton.vue';
|
|
|
|
|
import GuipInput from '@/components/GuipInput.vue';
|
|
|
|
|
import GuipSelect from '@/components/GuipSelect.vue';
|
|
|
|
|
import GuipTable from '@/components/GuipTable.vue';
|
|
|
|
|
import GuipTextarea from '@/components/GuipTextarea.vue'
|
|
|
|
|
import GuipToolTip from '@/components/GuipToolTip.vue'
|
|
|
|
|
import HoverButton from '@/components/HoverButton.vue'
|
|
|
|
|
import GuipFormItem from '@/components/GuipFormItem.vue'
|
|
|
|
|
import SvgIcon from '@/components/SvgIcon.vue';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'HomeView',
|
|
|
|
|
components: {
|
|
|
|
|
GuipTextarea,
|
|
|
|
|
GuipTable,
|
|
|
|
|
GuipSwitch,
|
|
|
|
|
GuipDialog,
|
|
|
|
|
GuipRadio,
|
|
|
|
|
GuipButton,
|
|
|
|
|
GuipInput,
|
|
|
|
|
GuipSelect,
|
|
|
|
|
GuipToolTip,
|
|
|
|
|
HoverButton,
|
|
|
|
|
SvgIcon,
|
|
|
|
|
GuipFormItem,
|
|
|
|
|
CustomDropdown
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
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'
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
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: '',
|
|
|
|
|
},
|
|
|
|
|
languageOptions: [
|
|
|
|
|
{ label: 'JavaScript', value: 'js', selectedLabel: 'JavaScripthhhhhhhhhh' },
|
|
|
|
|
{ label: 'Python', value: 'py', selectedLabel: 'JavaScripthhhhhhhhhh' },
|
|
|
|
|
{ label: 'Java', value: 'java', disabled: true, selectedLabel: 'JavaScripthhhhhhhhhh' }, // 禁用选项
|
|
|
|
|
{ label: 'Go', value: 'go', selectedLabel: 'JavaScripthhhhhhhhhh' },
|
|
|
|
|
],
|
|
|
|
|
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: '北京烤鸭'
|
|
|
|
|
}],
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getList();
|
|
|
|
|
this.getStagePurchase()
|
|
|
|
|
// this.$loadingFn.show()
|
|
|
|
|
// setInterval(()=>{
|
|
|
|
|
// this.$loadingFn.hide()
|
|
|
|
|
// },70000)
|
|
|
|
|
// this.timer = setTimeout(() => {
|
|
|
|
|
// this.$store.dispatch('hideLoading')
|
|
|
|
|
// }, 2000)
|
|
|
|
|
// this.timer = null;
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
currentDomainItem() {
|
|
|
|
|
return this.findItemById('id', 'domainSuffix');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
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>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.elementWrap {
|
|
|
|
|
/* width: 100%; */
|
|
|
|
|
padding: 30px 40px;
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 组合框样式 start
|
|
|
|
|
// input drop组合使用
|
|
|
|
|
.combo-formItem {
|
|
|
|
|
::v-deep {
|
|
|
|
|
.form-item-bottom {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.select-trigger {
|
|
|
|
|
background: #F6F7FA;
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.is-open .select-trigger {
|
|
|
|
|
border-color: #006AFF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-input__inner {
|
|
|
|
|
border-radius: 2px 0 0 2px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.self-drop-wrap {
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.appendDrop {
|
|
|
|
|
height: 38px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-radius: 0 2px 2px 0;
|
|
|
|
|
border: 1px solid #DFE2E6;
|
|
|
|
|
border-left-color: transparent;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 0 30px 0 12px;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
border: 1px solid #006AFF;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 组合框样式 end
|
|
|
|
|
|
|
|
|
|
.ScaleBox {
|
|
|
|
|
width: 1000px;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
-ms-transition: 0.3s;
|
|
|
|
|
transition: 0.3s;
|
|
|
|
|
-ms-transform-origin: 0 0;
|
|
|
|
|
transform-origin: 0 0;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cardfooter {
|
|
|
|
|
width: 100%;
|
|
|
|
|
bottom: 20px;
|
|
|
|
|
right: 30px;
|
|
|
|
|
text-align: right;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn1 {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
width: 114px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
/* 自动布局 */
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 11px 12px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%);
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
