|
|
|
|
@ -1,178 +1,336 @@
|
|
|
|
|
<template>
|
|
|
|
|
<view class="normal-login-container">
|
|
|
|
|
<el-form
|
|
|
|
|
ref="formRef"
|
|
|
|
|
:model="formData"
|
|
|
|
|
:rules="formRules"
|
|
|
|
|
label-width="100px"
|
|
|
|
|
v-loading="formLoading"
|
|
|
|
|
>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="工人">
|
|
|
|
|
{{userStore.name}}
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="报工日期" prop="reportDate">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
:disabled="isDisableUpdate"
|
|
|
|
|
v-model="formData.reportDate"
|
|
|
|
|
type="date"
|
|
|
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
|
|
placeholder="选择报工日期"
|
|
|
|
|
@change="changeDate"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="班别" prop="groupType">
|
|
|
|
|
<!-- <el-radio-group v-model="formData.groupType">-->
|
|
|
|
|
<!-- <el-radio-->
|
|
|
|
|
<!-- :disabled="isDisableUpdate"-->
|
|
|
|
|
<!-- v-for="dict in getIntDictOptions(DICT_TYPE.MES_GROUP_TYPE)"-->
|
|
|
|
|
<!-- :key="dict.value"-->
|
|
|
|
|
<!-- :label="dict.value"-->
|
|
|
|
|
<!-- @change="changeDate"-->
|
|
|
|
|
<!-- >-->
|
|
|
|
|
<!-- {{ dict.label }}-->
|
|
|
|
|
<!-- </el-radio>-->
|
|
|
|
|
<!-- </el-radio-group>-->
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row v-if="formData.groupType && formData.reportDate">
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="工位" prop="orgId">
|
|
|
|
|
<!-- <el-select-->
|
|
|
|
|
<!-- :disabled="isDisableUpdate"-->
|
|
|
|
|
<!-- v-model="formData.orgId"-->
|
|
|
|
|
<!-- clearable-->
|
|
|
|
|
<!-- filterable-->
|
|
|
|
|
<!-- placeholder="请选择工位"-->
|
|
|
|
|
<!-- >-->
|
|
|
|
|
<!-- <el-option-->
|
|
|
|
|
<!-- v-for="item in orgWorkerList"-->
|
|
|
|
|
<!-- :key="item.orgId"-->
|
|
|
|
|
<!-- :label="item.orgName"-->
|
|
|
|
|
<!-- :value="item.orgId"-->
|
|
|
|
|
<!-- />-->
|
|
|
|
|
<!-- </el-select>-->
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="工序" prop="orgType">
|
|
|
|
|
<!-- <el-select-->
|
|
|
|
|
<!-- disabled-->
|
|
|
|
|
<!-- v-model="formData.orgType"-->
|
|
|
|
|
<!-- placeholder=""-->
|
|
|
|
|
<!-- clearable-->
|
|
|
|
|
<!-- >-->
|
|
|
|
|
<!-- <el-option-->
|
|
|
|
|
<!-- v-for="dict in getStrDictOptions(DICT_TYPE.MES_ORG_TYPE)"-->
|
|
|
|
|
<!-- :key="dict.value"-->
|
|
|
|
|
<!-- :label="dict.label"-->
|
|
|
|
|
<!-- :value="dict.value"-->
|
|
|
|
|
<!-- />-->
|
|
|
|
|
<!-- </el-select>-->
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8" >
|
|
|
|
|
<el-text v-if="warningInfo" class="mx-1" type="warning">{{warningInfo}}</el-text>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="计件时段" prop="reportTime">
|
|
|
|
|
<el-input v-model="formData.reportTime" placeholder="请输入计件时段" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="计件时长" prop="totalTime">
|
|
|
|
|
<el-input-number v-model="formData.totalTime" :min="0" :precision="2" placeholder="请输入时长" class="!w-260px"/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="备注" prop="remark">
|
|
|
|
|
<el-input v-model="formData.remark" placeholder="请输入备注"/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form>
|
|
|
|
|
<view class="container">
|
|
|
|
|
<uni-card :is-shadow="false" is-full>
|
|
|
|
|
<text class="uni-h6">uni-forms 组件一般由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。</text>
|
|
|
|
|
</uni-card>
|
|
|
|
|
<uni-section title="基本用法" type="line">
|
|
|
|
|
<view class="example">
|
|
|
|
|
<!-- 基础用法，不包含校验规则 -->
|
|
|
|
|
<uni-forms ref="baseForm" :model="baseFormData" labelWidth="80px">
|
|
|
|
|
<uni-forms-item label="姓名" required>
|
|
|
|
|
<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
<uni-forms-item label="年龄" required>
|
|
|
|
|
<uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" />
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
<uni-forms-item label="性别" required>
|
|
|
|
|
<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
<uni-forms-item label="兴趣爱好" required>
|
|
|
|
|
<uni-data-checkbox v-model="baseFormData.hobby" multiple :localdata="hobbys" />
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
<uni-forms-item label="自我介绍">
|
|
|
|
|
<uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入自我介绍" />
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
<uni-forms-item label="日期时间">
|
|
|
|
|
<uni-datetime-picker type="datetime" return-type="timestamp"
|
|
|
|
|
v-model="baseFormData.datetimesingle" />
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
<uni-forms-item label="选择城市">
|
|
|
|
|
<uni-data-picker v-model="baseFormData.city" :localdata="cityData" popup-title="选择城市">
|
|
|
|
|
</uni-data-picker>
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
|
|
|
|
|
<uni-forms-item label="选择技能">
|
|
|
|
|
<uni-data-select v-model="baseFormData.skills" :localdata="skillsRange" >
|
|
|
|
|
</uni-data-select>
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
</uni-forms>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import modal from '@/plugins/modal'
|
|
|
|
|
import { ref } from "vue";
|
|
|
|
|
import config from '@/config.js'
|
|
|
|
|
import useUserStore from '@/store/modules/user'
|
|
|
|
|
</uni-section>
|
|
|
|
|
|
|
|
|
|
<uni-section title="表单校验" type="line">
|
|
|
|
|
<view class="example">
|
|
|
|
|
<!-- 基础表单校验 -->
|
|
|
|
|
<uni-forms ref="valiForm" :rules="rules" :model="valiFormData" labelWidth="80px">
|
|
|
|
|
<uni-forms-item label="姓名" required name="name">
|
|
|
|
|
<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
<uni-forms-item label="年龄" required name="age">
|
|
|
|
|
<uni-easyinput v-model="valiFormData.age" placeholder="请输入年龄" />
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
<uni-forms-item label="自我介绍">
|
|
|
|
|
<uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入自我介绍" />
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
</uni-forms>
|
|
|
|
|
<button type="primary" @click="submit('valiForm')">提交</button>
|
|
|
|
|
</view>
|
|
|
|
|
</uni-section>
|
|
|
|
|
|
|
|
|
|
const userStore = useUserStore()
|
|
|
|
|
const dialogVisible = ref(false) // 弹窗的是否展示
|
|
|
|
|
const dialogTitle = ref('') // 弹窗的标题
|
|
|
|
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
|
|
|
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
|
|
|
const formData = ref({
|
|
|
|
|
id: undefined,
|
|
|
|
|
processInstanceId: undefined,
|
|
|
|
|
reportCode: undefined,
|
|
|
|
|
userId: undefined,
|
|
|
|
|
orgId: undefined,
|
|
|
|
|
orgType: undefined,
|
|
|
|
|
reportTime: undefined,
|
|
|
|
|
totalTime: undefined,
|
|
|
|
|
reportStatus: undefined,
|
|
|
|
|
remark: undefined,
|
|
|
|
|
groupType: undefined,
|
|
|
|
|
reportType: undefined,
|
|
|
|
|
reportDateString: undefined,
|
|
|
|
|
reportDate: undefined
|
|
|
|
|
})
|
|
|
|
|
const formRules = ({
|
|
|
|
|
reportDate: [{ required: true, message: '日期不能为空', trigger: 'blur' }],
|
|
|
|
|
groupType: [{ required: true, message: '班别不能为空', trigger: 'blur' }],
|
|
|
|
|
productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
|
|
|
|
|
userId: [{ required: true, message: '工人不能为空', trigger: 'blur' }],
|
|
|
|
|
orgId: [{ required: true, message: '工位不能为空', trigger: 'blur' }],
|
|
|
|
|
orgType: [{ required: true, message: '工序不能为空', trigger: 'blur' }],
|
|
|
|
|
})
|
|
|
|
|
<uni-section title="自定义校验规则" type="line">
|
|
|
|
|
<view class="example">
|
|
|
|
|
<!-- 自定义表单校验 -->
|
|
|
|
|
<uni-forms ref="customForm" :rules="customRules" labelWidth="80px" :modelValue="customFormData">
|
|
|
|
|
<uni-forms-item label="姓名" required name="name">
|
|
|
|
|
<uni-easyinput v-model="customFormData.name" placeholder="请输入姓名" />
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
<uni-forms-item label="年龄" required name="age">
|
|
|
|
|
<uni-easyinput v-model="customFormData.age" placeholder="请输入年龄" />
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
<uni-forms-item label="兴趣爱好" required name="hobby">
|
|
|
|
|
<uni-data-checkbox v-model="customFormData.hobby" multiple :localdata="hobbys" />
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
</uni-forms>
|
|
|
|
|
<button type="primary" @click="submit('customForm')">提交</button>
|
|
|
|
|
</view>
|
|
|
|
|
</uni-section>
|
|
|
|
|
|
|
|
|
|
const isDisableUpdate = ref(false)
|
|
|
|
|
const warningInfo = ref()
|
|
|
|
|
const orgWorkerList = ref<[]>([]) // 用户列表
|
|
|
|
|
//更改报工日期时查询用户在该日期绑定的工位信息
|
|
|
|
|
const changeDate = async () =>{
|
|
|
|
|
warningInfo.value = '该条件下未查询到工位安排信息！'
|
|
|
|
|
modal.msgError(warningInfo.value)
|
|
|
|
|
// if(formData.value.reportDate && formData.value.groupType ){
|
|
|
|
|
// orgWorkerList.value = await OrgWorkerApi.getOrgWorkerList1(formData.value)
|
|
|
|
|
// if(orgWorkerList.value && orgWorkerList.value.length>0){
|
|
|
|
|
// formData.value.orgId = orgWorkerList.value[0].orgId
|
|
|
|
|
// formData.value.orgType = orgWorkerList.value[0].orgType
|
|
|
|
|
// warningInfo.value=''
|
|
|
|
|
// }
|
|
|
|
|
// else{
|
|
|
|
|
// formData.value.orgId = undefined
|
|
|
|
|
// warningInfo.value = '该条件下未查询到工位安排信息！'
|
|
|
|
|
// modal.msgError(warningInfo.value)
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
const getCurrentDate = () =>{
|
|
|
|
|
let result = ''
|
|
|
|
|
let now = new Date()
|
|
|
|
|
result += now.getFullYear()
|
|
|
|
|
let month = now.getMonth() + 1
|
|
|
|
|
if(month<10)result += '-0'+month
|
|
|
|
|
else result += '-'+month
|
|
|
|
|
let day = now.getDate()
|
|
|
|
|
if(day<10) result += '-0'+day
|
|
|
|
|
else result += day
|
|
|
|
|
return result +" 00:00:00";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
<uni-section title="动态表单" type="line">
|
|
|
|
|
<view class="example">
|
|
|
|
|
<!-- 动态表单校验 -->
|
|
|
|
|
<uni-forms ref="dynamicForm" :rules="dynamicRules" :model="dynamicFormData" labelWidth="80px">
|
|
|
|
|
<uni-forms-item label="邮箱" required name="email">
|
|
|
|
|
<uni-easyinput v-model="dynamicFormData.email" placeholder="请输入姓名" />
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
<uni-forms-item v-for="(item,index) in dynamicFormData.domains" :key="item.id"
|
|
|
|
|
:label="item.label+' '+index" required :rules="item.rules" :name="['domains',index,'value']">
|
|
|
|
|
<view class="form-item">
|
|
|
|
|
<uni-easyinput v-model="dynamicFormData.domains[index].value" placeholder="请输入域名" />
|
|
|
|
|
<button class="button" size="mini" type="default" @click="del(item.id)">删除</button>
|
|
|
|
|
</view>
|
|
|
|
|
</uni-forms-item>
|
|
|
|
|
</uni-forms>
|
|
|
|
|
<view class="button-group">
|
|
|
|
|
<button type="primary" size="mini" @click="add">新增域名</button>
|
|
|
|
|
<button type="primary" size="mini" @click="submit('dynamicForm')">提交</button>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</uni-section>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 基础表单数据
|
|
|
|
|
baseFormData: {
|
|
|
|
|
name: '',
|
|
|
|
|
age: '',
|
|
|
|
|
introduction: '',
|
|
|
|
|
sex: 2,
|
|
|
|
|
hobby: [5],
|
|
|
|
|
datetimesingle: 1627529992399,
|
|
|
|
|
city: '',
|
|
|
|
|
skills: 0
|
|
|
|
|
},
|
|
|
|
|
// 城市数据
|
|
|
|
|
cityData: [{
|
|
|
|
|
text: "北京",
|
|
|
|
|
value: "10001",
|
|
|
|
|
}, {
|
|
|
|
|
text: "上海",
|
|
|
|
|
value: "10002",
|
|
|
|
|
}, {
|
|
|
|
|
text: "深圳",
|
|
|
|
|
value: "10004",
|
|
|
|
|
}],
|
|
|
|
|
skillsRange: [{
|
|
|
|
|
value: 0,
|
|
|
|
|
text: "编程"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 1,
|
|
|
|
|
text: "绘画"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 2,
|
|
|
|
|
text: "运动"
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
// 表单数据
|
|
|
|
|
alignmentFormData: {
|
|
|
|
|
name: '',
|
|
|
|
|
age: '',
|
|
|
|
|
},
|
|
|
|
|
// 单选数据源
|
|
|
|
|
sexs: [{
|
|
|
|
|
text: '男',
|
|
|
|
|
value: 0
|
|
|
|
|
}, {
|
|
|
|
|
text: '女',
|
|
|
|
|
value: 1
|
|
|
|
|
}, {
|
|
|
|
|
text: '保密',
|
|
|
|
|
value: 2
|
|
|
|
|
}],
|
|
|
|
|
// 多选数据源
|
|
|
|
|
hobbys: [{
|
|
|
|
|
text: '跑步',
|
|
|
|
|
value: 0
|
|
|
|
|
}, {
|
|
|
|
|
text: '游泳',
|
|
|
|
|
value: 1
|
|
|
|
|
}, {
|
|
|
|
|
text: '绘画',
|
|
|
|
|
value: 2
|
|
|
|
|
}, {
|
|
|
|
|
text: '足球',
|
|
|
|
|
value: 3
|
|
|
|
|
}, {
|
|
|
|
|
text: '篮球',
|
|
|
|
|
value: 4
|
|
|
|
|
}, {
|
|
|
|
|
text: '其他',
|
|
|
|
|
value: 5
|
|
|
|
|
}],
|
|
|
|
|
// 分段器数据
|
|
|
|
|
current: 0,
|
|
|
|
|
items: ['左对齐', '顶部对齐'],
|
|
|
|
|
// 校验表单数据
|
|
|
|
|
valiFormData: {
|
|
|
|
|
name: '',
|
|
|
|
|
age: '',
|
|
|
|
|
introduction: '',
|
|
|
|
|
},
|
|
|
|
|
// 校验规则
|
|
|
|
|
rules: {
|
|
|
|
|
name: {
|
|
|
|
|
rules: [{
|
|
|
|
|
required: true,
|
|
|
|
|
errorMessage: '姓名不能为空'
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
age: {
|
|
|
|
|
rules: [{
|
|
|
|
|
required: true,
|
|
|
|
|
errorMessage: '年龄不能为空'
|
|
|
|
|
}, {
|
|
|
|
|
format: 'number',
|
|
|
|
|
errorMessage: '年龄只能输入数字'
|
|
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 自定义表单数据
|
|
|
|
|
customFormData: {
|
|
|
|
|
name: '',
|
|
|
|
|
age: '',
|
|
|
|
|
hobby: []
|
|
|
|
|
},
|
|
|
|
|
// 自定义表单校验规则
|
|
|
|
|
customRules: {
|
|
|
|
|
name: {
|
|
|
|
|
rules: [{
|
|
|
|
|
required: true,
|
|
|
|
|
errorMessage: '姓名不能为空'
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
age: {
|
|
|
|
|
rules: [{
|
|
|
|
|
required: true,
|
|
|
|
|
errorMessage: '年龄不能为空'
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
hobby: {
|
|
|
|
|
rules: [{
|
|
|
|
|
format: 'array'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
validateFunction: function(rule, value, data, callback) {
|
|
|
|
|
if (value.length < 2) {
|
|
|
|
|
callback('请至少勾选两个兴趣爱好')
|
|
|
|
|
}
|
|
|
|
|
return true
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
dynamicFormData: {
|
|
|
|
|
email: '',
|
|
|
|
|
domains: []
|
|
|
|
|
},
|
|
|
|
|
dynamicLists: [],
|
|
|
|
|
dynamicRules: {
|
|
|
|
|
email: {
|
|
|
|
|
rules: [{
|
|
|
|
|
required: true,
|
|
|
|
|
errorMessage: '域名不能为空'
|
|
|
|
|
}, {
|
|
|
|
|
format: 'email',
|
|
|
|
|
errorMessage: '域名格式错误'
|
|
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
// 处理表单排列切换
|
|
|
|
|
alignment() {
|
|
|
|
|
if (this.current === 0) return 'left'
|
|
|
|
|
if (this.current === 1) return 'top'
|
|
|
|
|
return 'left'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onLoad() {},
|
|
|
|
|
onReady() {
|
|
|
|
|
// 设置自定义表单校验规则，必须在节点渲染完毕后执行
|
|
|
|
|
this.$refs.customForm.setRules(this.customRules)
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
onClickItem(e) {
|
|
|
|
|
console.log(e);
|
|
|
|
|
this.current = e.currentIndex
|
|
|
|
|
},
|
|
|
|
|
add() {
|
|
|
|
|
this.dynamicFormData.domains.push({
|
|
|
|
|
label: '域名',
|
|
|
|
|
value: '',
|
|
|
|
|
rules: [{
|
|
|
|
|
'required': true,
|
|
|
|
|
errorMessage: '域名项必填'
|
|
|
|
|
}],
|
|
|
|
|
id: Date.now()
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
del(id) {
|
|
|
|
|
let index = this.dynamicLists.findIndex(v => v.id === id)
|
|
|
|
|
this.dynamicLists.splice(index, 1)
|
|
|
|
|
},
|
|
|
|
|
submit(ref) {
|
|
|
|
|
console.log(this.baseFormData);
|
|
|
|
|
this.$refs[ref].validate().then(res => {
|
|
|
|
|
console.log('success', res);
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: `校验通过`
|
|
|
|
|
})
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
console.log('err', err);
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
.example {
|
|
|
|
|
padding: 15px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.segmented-control {
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button-group {
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
height: 35px;
|
|
|
|
|
line-height: 35px;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
chenshuichuan
2 years ago