|
|
@@ -0,0 +1,538 @@
|
|
|
+<template>
|
|
|
+ <j-vxe-table
|
|
|
+ ref="vTable"
|
|
|
+ toolbar
|
|
|
+ :height="500"
|
|
|
+ :loading="loading"
|
|
|
+ :dataSource="dataSource"
|
|
|
+ :columns="columns"
|
|
|
+ style="margin-top: 8px;"
|
|
|
+ @valueChange="handleValueChange"
|
|
|
+ >
|
|
|
+ <!-- row-number -->
|
|
|
+ <!-- row-selection -->
|
|
|
+ <!-- drag-sort 移动上下行 -->
|
|
|
+ <!-- keep-source 啥？ -->
|
|
|
+ <!-- :scroll-y="{enabled:false}" -->
|
|
|
+
|
|
|
+ <!-- -->
|
|
|
+ <template v-slot:currentValueTag="props">
|
|
|
+ <a-cascader
|
|
|
+ v-model="props.row.currentValueTag"
|
|
|
+ :options="dianweiOptions"
|
|
|
+ :display-render="displayRender"
|
|
|
+ expand-trigger="hover"
|
|
|
+ placeholder="请选择点位"
|
|
|
+ @change="onChange"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- <template v-slot:toolbarSuffix>
|
|
|
+ <a-button @click="handleTableCheck">表单验证</a-button>
|
|
|
+ <a-tooltip placement="top" title="获取值，忽略表单验证" :autoAdjustOverflow="true">
|
|
|
+ <a-button @click="handleTableGet">获取值</a-button>
|
|
|
+ </a-tooltip>
|
|
|
+ <a-tooltip placement="top" title="模拟加载1000条数据" :autoAdjustOverflow="true">
|
|
|
+ <a-button @click="handleTableSet">设置值</a-button>
|
|
|
+ </a-tooltip>
|
|
|
+ </template> -->
|
|
|
+
|
|
|
+ <!-- 仪表状态 -->
|
|
|
+ <template v-slot:instrumentStatus="props">
|
|
|
+ <!-- <div @click="dianjiCeshi(props)">点击了{{props.row.ceshi}}</div> -->
|
|
|
+ <a-radio-group name="radioGroup" v-model="props.row.instrumentStatusJuge">
|
|
|
+ <!-- :default-value="props.row.ceshi" -->
|
|
|
+ <a-radio :value="1"> 位号读取 </a-radio>
|
|
|
+ <a-radio :value="2"> 高低限判断 </a-radio>
|
|
|
+ <a-radio :value="3"> 突变超限判断 </a-radio>
|
|
|
+ </a-radio-group>
|
|
|
+ <div v-if="props.row.instrumentStatusJuge === 1">
|
|
|
+ <a-cascader
|
|
|
+ v-model="props.row.currentValueTag"
|
|
|
+ :options="dianweiOptions"
|
|
|
+ :display-render="displayRender"
|
|
|
+ expand-trigger="hover"
|
|
|
+ placeholder="请选择点位"
|
|
|
+ @change="onChange"/>
|
|
|
+ </div>
|
|
|
+ <div v-if="props.row.instrumentStatusJuge === 2">
|
|
|
+ <a-cascader
|
|
|
+ v-model="props.row.ysmnlTag"
|
|
|
+ :options="dianweiOptions"
|
|
|
+ :display-render="displayRender"
|
|
|
+ expand-trigger="hover"
|
|
|
+ placeholder="请选择原始模拟量位号"
|
|
|
+ @change="onChange"/>
|
|
|
+ <div>
|
|
|
+ 高限<a-input v-model="props.row.upperLimit" placeholder="请输入高限"></a-input>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 低限<a-input v-model="props.row.lowerLimit" placeholder="请输入低限"></a-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="props.row.instrumentStatusJuge === 3">
|
|
|
+ <a-cascader
|
|
|
+ v-model="props.row.ysmnlTag"
|
|
|
+ :options="dianweiOptions"
|
|
|
+ :display-render="displayRender"
|
|
|
+ expand-trigger="hover"
|
|
|
+ placeholder="请选择原始模拟量位号"
|
|
|
+ @change="onChange"/>
|
|
|
+ <div>
|
|
|
+ 时间<a-input v-model="props.row.thresholdTime" placeholder="请输入时间"></a-input>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 阈值<a-input v-model="props.row.thresholdValue" placeholder="请输入阈值"></a-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 是否旁路 -->
|
|
|
+ <template v-slot:ifBypass="props">
|
|
|
+ <a-radio-group name="radioGroup" v-model="props.row.ifBypass">
|
|
|
+ <!-- :default-value="props.row.ceshi" -->
|
|
|
+ <a-radio :value="0"> 否 </a-radio>
|
|
|
+ <a-radio :value="1"> 是 </a-radio>
|
|
|
+ </a-radio-group>
|
|
|
+ <!-- <div v-if="props.row.ifBypass === 0">
|
|
|
+ 无旁路
|
|
|
+ </div> -->
|
|
|
+ <div v-if="props.row.ifBypass === 1">
|
|
|
+ <!-- <a-cascader
|
|
|
+ v-model="props.row.ifBypassTag"
|
|
|
+ :options="dianweiOptions"
|
|
|
+ :display-render="displayRender"
|
|
|
+ expand-trigger="hover"
|
|
|
+ placeholder="请选择点位"
|
|
|
+ @change="onChange"/> -->
|
|
|
+ <a-tree-select
|
|
|
+ v-model="props.row.ifBypassTag"
|
|
|
+ style="width: 100%"
|
|
|
+ :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
|
|
+ :tree-data="dianweiOptions"
|
|
|
+ placeholder="请选择"
|
|
|
+ tree-default-expand-all
|
|
|
+ >
|
|
|
+ <!-- <span v-if="key === '0-0-1'" slot="title" slot-scope="{ key, value }" style="color: #08c">
|
|
|
+ Child Node1 {{ value }}
|
|
|
+ </span> -->
|
|
|
+ </a-tree-select>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-slot:action="props">
|
|
|
+ <a @click="handleCK(props)">查看</a>
|
|
|
+ <a-divider type="vertical"/>
|
|
|
+ <a-popconfirm title="确定删除吗？" @confirm="handleDL(props)">
|
|
|
+ <a>删除</a>
|
|
|
+ </a-popconfirm>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </j-vxe-table>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ var dianweiOptions = [
|
|
|
+ {
|
|
|
+ key: 'zhejiang',
|
|
|
+ value: 'zhejiang',
|
|
|
+ title: 'Zhejiang',
|
|
|
+ label: 'Zhejiang',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ key: 'hangzhou',
|
|
|
+ value: 'hangzhou',
|
|
|
+ title: 'Hangzhou',
|
|
|
+ label: 'Hangzhou',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ key: 'xihu',
|
|
|
+ value: 'xihu',
|
|
|
+ title: 'West Lake',
|
|
|
+ label: 'West Lake',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'jiangsu',
|
|
|
+ value: 'jiangsu',
|
|
|
+ title: 'Jiangsu',
|
|
|
+ label: 'Jiangsu',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ key: 'nanjing',
|
|
|
+ value: 'nanjing',
|
|
|
+ title: 'Nanjing',
|
|
|
+ label: 'Nanjing',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ key: 'zhonghuamen',
|
|
|
+ value: 'zhonghuamen',
|
|
|
+ title: 'Zhong Hua Men',
|
|
|
+ label: 'Zhong Hua Men',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ import moment from 'moment'
|
|
|
+ import { pushIfNotExist, randomNumber, randomUUID } from '@/utils/util'
|
|
|
+ import { JVXETypes } from '@/components/jeecg/JVxeTable'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'JVxeDemo1',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ dianweiOptions: dianweiOptions,
|
|
|
+ columns: [
|
|
|
+ // {
|
|
|
+ // title: '联锁条件',
|
|
|
+ // key: 'normal',
|
|
|
+ // type: JVXETypes.normal,
|
|
|
+ // width: '180px',
|
|
|
+ // // fixed: 'left',
|
|
|
+ // defaultValue: 'normal-new',
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ title: '联锁条件',
|
|
|
+ key: 'interlockCondition',
|
|
|
+ type: JVXETypes.input,
|
|
|
+ width: '180px',
|
|
|
+ defaultValue: '',
|
|
|
+ placeholder: '请输入${title}',
|
|
|
+ validateRules: [
|
|
|
+ {
|
|
|
+ required: true, // 必填
|
|
|
+ message: '请输入${title}' // 显示的文本
|
|
|
+ },
|
|
|
+ {
|
|
|
+ pattern: /^[a-z|A-Z][a-z|A-Z\d_-]*$/, // 正则
|
|
|
+ message: '${title}必须以字母开头，可包含数字、下划线、横杠'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ unique: true,
|
|
|
+ message: '${title}不能重复'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ handler({cellValue, row, column}, callback, target) {
|
|
|
+ // cellValue 当前校验的值
|
|
|
+ // callback(flag, message) 方法必须执行且只能执行一次
|
|
|
+ // flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作
|
|
|
+ // message = 提示的类型，默认使用配置的 message
|
|
|
+ // target 行编辑的实例对象
|
|
|
+ if (cellValue === 'abc') {
|
|
|
+ callback(false, '${title}不能是abc') // false = 未通过校验
|
|
|
+ } else {
|
|
|
+ callback(true) // true = 通过验证
|
|
|
+ }
|
|
|
+ },
|
|
|
+ message: '${title}默认提示'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '仪表状态',
|
|
|
+ key: 'ceshi',
|
|
|
+ type: JVXETypes.slot,
|
|
|
+ // fixed: 'right',
|
|
|
+ minWidth: '400px',
|
|
|
+ align: 'center',
|
|
|
+ slotName: 'instrumentStatus',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '描述',
|
|
|
+ key: 'description',
|
|
|
+ type: JVXETypes.textarea,
|
|
|
+ width: '200px',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '联锁设定值',
|
|
|
+ key: 'interlockSetValue',
|
|
|
+ type: JVXETypes.inputNumber,
|
|
|
+ width: '120px',
|
|
|
+ defaultValue: 32,
|
|
|
+ // 【统计列】sum = 求和、average = 平均值
|
|
|
+ // statistics: ['sum', 'average'],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '当前值',
|
|
|
+ key: 'currentValueTag',
|
|
|
+ type: JVXETypes.slot,
|
|
|
+ // fixed: 'right',
|
|
|
+ minWidth: '180px',
|
|
|
+ align: 'center',
|
|
|
+ slotName: 'currentValueTag',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '是否旁路',
|
|
|
+ key: 'ifBypass',
|
|
|
+ type: JVXETypes.slot,
|
|
|
+ // fixed: 'right',
|
|
|
+ minWidth: '180px',
|
|
|
+ align: 'center',
|
|
|
+ slotName: 'ifBypass',
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // title: '下拉框_搜索',
|
|
|
+ // key: 'select_search',
|
|
|
+ // type: JVXETypes.selectSearch,
|
|
|
+ // width: '180px',
|
|
|
+ // options: [
|
|
|
+ // {title: 'String', value: 'string'},
|
|
|
+ // {title: 'Integer', value: 'int'},
|
|
|
+ // {title: 'Double', value: 'double'},
|
|
|
+ // {title: 'Boolean', value: 'boolean'}
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // title: '联锁输出值',
|
|
|
+ // key: 'interlockOutValueTag',
|
|
|
+ // type: JVXETypes.select,
|
|
|
+ // width: '180px',
|
|
|
+ // // 下拉选项
|
|
|
+ // options: [
|
|
|
+ // {title: 'String', value: 'string'},
|
|
|
+ // {title: 'Integer', value: 'int'},
|
|
|
+ // {title: 'Double', value: 'double'},
|
|
|
+ // {title: 'Boolean', value: 'boolean'}
|
|
|
+ // ],
|
|
|
+ // allowInput: true,
|
|
|
+ // placeholder: '请选择'
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ title: '输入卡件状态',
|
|
|
+ key: 'inputStatusTag',
|
|
|
+ type: JVXETypes.select,
|
|
|
+ width: '180px',
|
|
|
+ // 下拉选项
|
|
|
+ options: [
|
|
|
+ {title: 'String', value: 'string'},
|
|
|
+ {title: 'Integer', value: 'int'},
|
|
|
+ {title: 'Double', value: 'double'},
|
|
|
+ {title: 'Boolean', value: 'boolean'}
|
|
|
+ ],
|
|
|
+ allowInput: true,
|
|
|
+ placeholder: '请选择'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '输出卡件状态',
|
|
|
+ key: 'outputStatusTag',
|
|
|
+ type: JVXETypes.select,
|
|
|
+ width: '180px',
|
|
|
+ // 下拉选项
|
|
|
+ options: [
|
|
|
+ {title: 'String', value: 'string'},
|
|
|
+ {title: 'Integer', value: 'int'},
|
|
|
+ {title: 'Double', value: 'double'},
|
|
|
+ {title: 'Boolean', value: 'boolean'}
|
|
|
+ ],
|
|
|
+ allowInput: true,
|
|
|
+ placeholder: '请选择'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'MP状态',
|
|
|
+ key: 'mpStatusTag',
|
|
|
+ type: JVXETypes.select,
|
|
|
+ width: '180px',
|
|
|
+ // 下拉选项
|
|
|
+ options: [
|
|
|
+ {title: 'String', value: 'string'},
|
|
|
+ {title: 'Integer', value: 'int'},
|
|
|
+ {title: 'Double', value: 'double'},
|
|
|
+ {title: 'Boolean', value: 'boolean'}
|
|
|
+ ],
|
|
|
+ allowInput: true,
|
|
|
+ placeholder: '请选择'
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // title: '下拉框_字典',
|
|
|
+ // key: 'select_dict',
|
|
|
+ // type: JVXETypes.select,
|
|
|
+ // width: '180px',
|
|
|
+ // options: [],
|
|
|
+ // dictCode: 'sex',
|
|
|
+ // placeholder: '请选择',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // title: '下拉框_多选',
|
|
|
+ // key: 'select_multiple',
|
|
|
+ // type: JVXETypes.selectMultiple,
|
|
|
+ // width: '205px',
|
|
|
+ // options: [
|
|
|
+ // {title: 'String', value: 'string'},
|
|
|
+ // {title: 'Integer', value: 'int'},
|
|
|
+ // {title: 'Double', value: 'double'},
|
|
|
+ // {title: 'Boolean', value: 'boolean'}
|
|
|
+ // ],
|
|
|
+ // defaultValue: ['int', 'boolean'], // 多个默认项
|
|
|
+ // // defaultValue: 'string,double,int', // 也可使用这种方式
|
|
|
+ // placeholder: '多选',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // title: '日期时间',
|
|
|
+ // key: 'datetime',
|
|
|
+ // type: JVXETypes.datetime,
|
|
|
+ // width: '200px',
|
|
|
+ // defaultValue: '2019-4-30 14:52:22',
|
|
|
+ // placeholder: '请选择',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // title: '复选框',
|
|
|
+ // key: 'checkbox',
|
|
|
+ // type: JVXETypes.checkbox,
|
|
|
+ // width: '100px',
|
|
|
+ // customValue: ['Y', 'N'], // true ,false
|
|
|
+ // defaultChecked: false,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // title: '操作',
|
|
|
+ // key: 'action',
|
|
|
+ // type: JVXETypes.slot,
|
|
|
+ // // fixed: 'right',
|
|
|
+ // minWidth: '100px',
|
|
|
+ // align: 'center',
|
|
|
+ // slotName: 'action',
|
|
|
+ // },
|
|
|
+ ],
|
|
|
+ dataSource: [],
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.randomPage(0, 20, true)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onChange(value) {
|
|
|
+ console.log(value);
|
|
|
+ },
|
|
|
+ displayRender({ labels }) {
|
|
|
+ return labels[labels.length - 1];
|
|
|
+ },
|
|
|
+ handleCK(props) {
|
|
|
+ this.$message.success('请在控制台查看输出')
|
|
|
+ // 参数介绍：
|
|
|
+ // props.value 当前单元格的值
|
|
|
+ // props.row 当前行的数据
|
|
|
+ // props.rowId 当前行ID
|
|
|
+ // props.rowIndex 当前行下标
|
|
|
+ // props.column 当前列的配置
|
|
|
+ // props.columnIndex 当前列下标
|
|
|
+ // props.$table vxe实例，可以调用vxe内置方法
|
|
|
+ // props.target JVXE实例，可以调用JVXE内置方法
|
|
|
+ // props.caseId JVXE实例唯一ID
|
|
|
+ // props.scrolling 是否正在滚动
|
|
|
+ // props.triggerChange 触发change事件，用于更改slot的值
|
|
|
+ console.log('查看: ', {props})
|
|
|
+ },
|
|
|
+
|
|
|
+ handleDL(props) {
|
|
|
+ // 调用删除方法
|
|
|
+ props.target.removeRows(props.row)
|
|
|
+ },
|
|
|
+
|
|
|
+ handleValueChange(event) {
|
|
|
+ console.log('handleValueChange.event: ', event)
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 表单验证 */
|
|
|
+ handleTableCheck() {
|
|
|
+ this.$refs.vTable.validateTable().then(errMap => {
|
|
|
+ if (errMap) {
|
|
|
+ console.log('表单验证未通过：', {errMap})
|
|
|
+ this.$message.error('验证未通过，请在控制台查看详细')
|
|
|
+ } else {
|
|
|
+ this.$message.success('验证通过')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 获取值，忽略表单验证 */
|
|
|
+ handleTableGet() {
|
|
|
+ const values = this.$refs.vTable.getTableData()
|
|
|
+ console.log('获取值:', {values})
|
|
|
+ this.$message.success('获取值成功，请看控制台输出')
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 模拟加载1000条数据 */
|
|
|
+ handleTableSet() {
|
|
|
+ this.randomPage(1, 10, true)
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 随机生成数据 */
|
|
|
+ randomPage(current, pageSize, loading = false) {
|
|
|
+ if (loading) {
|
|
|
+ this.loading = true
|
|
|
+ }
|
|
|
+
|
|
|
+ let randomDatetime = () => {
|
|
|
+ let time = randomNumber(1000, 9999999999999)
|
|
|
+ return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ }
|
|
|
+
|
|
|
+ let limit = (current - 1) * pageSize
|
|
|
+
|
|
|
+ let options = ['string', 'int', 'double', 'boolean']
|
|
|
+
|
|
|
+ let begin = Date.now()
|
|
|
+ let values = []
|
|
|
+ for (let i = 0; i < pageSize; i++) {
|
|
|
+ values.push({
|
|
|
+ id: randomUUID(),
|
|
|
+ normal: `normal-${(limit + i) + 1}`,
|
|
|
+ input: `text-${(limit + i) + 1}`,
|
|
|
+ textarea: `textarea-${(limit + i) + 1}`,
|
|
|
+ number: randomNumber(0, 233),
|
|
|
+ select: options[randomNumber(0, 3)],
|
|
|
+ select_dict: randomNumber(1, 2).toString(),
|
|
|
+ select_multiple: (() => {
|
|
|
+ let length = randomNumber(1, 4)
|
|
|
+ let arr = []
|
|
|
+ for (let j = 0; j < length; j++) {
|
|
|
+ pushIfNotExist(arr, options[randomNumber(0, 3)])
|
|
|
+ }
|
|
|
+ return arr
|
|
|
+ })(),
|
|
|
+ select_search: options[randomNumber(0, 3)],
|
|
|
+ datetime: randomDatetime(),
|
|
|
+ checkbox: ['Y', 'N'][randomNumber(0, 1)],
|
|
|
+ instrumentStatusJuge: 1,
|
|
|
+ instrumentStatusTag: [],
|
|
|
+ ysmnlTag: [],
|
|
|
+ upperLimit: '',
|
|
|
+ lowerLimit: '',
|
|
|
+ thresholdValue: '',
|
|
|
+ thresholdTime: '',
|
|
|
+ interlockCondition: '',
|
|
|
+ description: '',
|
|
|
+ interlockSetValue: '',
|
|
|
+ currentValueTag: ['zhejiang', 'hangzhou', 'xihu'],
|
|
|
+ ifBypass: '',
|
|
|
+ ifBypassTag: 'xihu',
|
|
|
+ interlockOutValueTag: [],
|
|
|
+ inputStatusTag: [],
|
|
|
+ outputStatusTag: [],
|
|
|
+ mpStatusTag: [],
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ this.dataSource = values
|
|
|
+ let end = Date.now()
|
|
|
+ let diff = end - begin
|
|
|
+
|
|
|
+ if (loading && diff < pageSize) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.loading = false
|
|
|
+ }, pageSize - diff)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|
yuhan