123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 |
- <template>
- <div class='edit-box'>
- <el-form ref='form' :rules='rules' :model='form' label-width='140px'>
- <!-- <el-form-item v-if='devFlag' label='对象标识' prop='EquipmentMark'>
- <el-input v-model='form.EquipmentMark'></el-input>
- </el-form-item> -->
- <ul class='point-box'>
- <span class='left'>如果</span>
- <span class='right'>那么</span>
- <li v-for='(item,index) in form.pointArr' :key='index'>
- <p>
- <el-form-item
- label='原始点位值'
- :prop='"pointArr." + index + ".from"'
- :rules='{
- required: true, message: "不能为空", trigger: "blur"
- }'
- >
- <el-input v-model='item.from'></el-input>
- </el-form-item>
- </p>
- <p>
- <el-form-item label='转换为标准值' :prop='"pointArr." + index + ".to"' :rules='{
- required: true, message: "不能为空", trigger: "blur"
- }'>
- <el-input v-model='item.to'></el-input>
- </el-form-item>
- <i v-if='index > 0' class='el-icon-delete delete' @click='deleteRow(index)'></i>
- </p>
- </li>
- </ul>
- </el-form>
- <div class='add-btn-box'>
- <el-button type='primary' @click='addRules'>+添加新转换规则</el-button>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'step3_auto-handle',
- data() {
- return {
- form: {
- EquipmentMark: '',
- pointArr: [{ from: '', to: '' }]
- },
- rules: {
- // EquipmentMark: [{ required: true, message: '请输入对象标识', trigger: 'blur' }]
- }
- }
- },
- props: {
- devFlag: {
- default: true,
- type: Boolean
- },
- enumHandleShow:{}
- },
- methods: {
- getForm(cb) {
- this.$refs['form'].validate(valid => {
- if (valid) {
- cb(this.form)
- } else {
- cb(false)
- }
- })
- },
- addRules() {
- this.form.pointArr.push(this.newRules())
- },
- newRules() {
- return { from: '', to: '' }
- },
- deleteRow(index) {
- this.form.pointArr.splice(index, 1)
- }
- },
- watch:{
- enumHandleShow: {
- deep: true,
- immediate: true,
- handler(val) {
- if(val) {
- this.form = JSON.parse(JSON.stringify(val))
- }
-
- }
- }
- }
- }
- </script>
- <style scoped lang='scss'>
- .edit-box {
- padding: 20px 0;
- .tip {
- color: #ccc;
- }
- .point-box {
- margin-top: 45px;
- position: relative;
- width: 500px;
- .left,
- .right {
- font-size: 20px;
- background: #fff;
- }
- .left {
- position: absolute;
- top: -35px;
- left: 23px;
- margin: 0;
- padding: 0;
- }
- .right {
- position: absolute;
- top: -35px;
- left: 260px;
- margin: 0;
- padding: 0
- }
- li {
- display: flex;
- justify-content: space-between;
- margin-top: 5px;
- position: relative;
- p {
- .name {
- padding-left: 40px;
- }
- .value {
- margin-left: 10px;
- display: inline-block;
- width: 80px;
- }
- }
- .delete {
- top: 5px;
- right: -20px;
- cursor: pointer;
- position: absolute;
- z-index: 99999;
- }
- }
- }
- .add-btn-box {
- margin-top: 20px;
- text-align: center;
- }
- }
- </style>
|