123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249 |
- <template>
- <div class="data-change-form">
- <div class="form-title">数据自变</div>
-
- <el-form :model="formData" label-width="100px" class="form-container" size="small">
- <!-- 变化方式和数据格式行 -->
- <el-row :gutter="20">
- <el-col :span="8">
- <el-form-item label="变化方式:">
- <el-select v-model="formData.changeMethod" placeholder="请选择">
- <el-option label="自增" value="increment"></el-option>
- <el-option label="自减" value="decrement"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="数据格式:">
- <el-select v-model="formData.dataFormat" placeholder="请选择">
- <el-option label="时间" value="time"></el-option>
- <el-option label="日期" value="number"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item>
- <el-button type="primary" @click="showSelectEle">选择元素</el-button>
- </el-form-item>
- </el-col>
- </el-row>
-
- <!-- 协同元素行 -->
- <el-row :gutter="20">
- <el-col :span="24">
- <el-form-item label="协同元素:">
- <el-input
- v-model="formData.coordinationElement"
- placeholder="请选择参数(非必填)"
- clearable
- @focus="setFocusedField('coordinationElement')"
- @blur="clearFocusedField"
- ></el-input>
- </el-form-item>
- </el-col>
- </el-row>
-
- <!-- 频率设置行 -->
- <el-row :gutter="1" class="frequency-row">
- <el-col :span="12">
- <el-form-item label="频率:">
- <el-input v-model="formData.frequency" placeholder="输入自增频率" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label-width="0px" >
- <el-select v-model="formData.frequencyUnit" placeholder="单位" clearable style="width: 120px;">
- <el-option label="年" value="second"></el-option>
- <el-option label="月" value="minute"></el-option>
- <el-option label="日" value="hour"></el-option>
- <el-option label="时" value="day"></el-option>
- <el-option label="分" value="month"></el-option>
- <el-option label="秒" value="year"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
-
- <!-- 停止条件行 -->
- <el-row :gutter="10" class="stop-condition-row">
- <el-col :span="9">
- <el-form-item label="停止条件:">
- <el-input
- v-model="formData.stopConditionParam"
- placeholder="请选择参数(非必填)"
- clearable
- @focus="setFocusedField('stopConditionParam')"
- @blur="clearFocusedField"
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="4">
- <el-form-item>
- <el-select
- v-model="formData.stopConditionOperator"
- placeholder="请选择"
- clearable
- >
- <el-option label="=" value="equal"></el-option>
- <el-option label=">" value="greater"></el-option>
- <el-option label="<" value="less"></el-option>
- <el-option label="≥" value="greaterEqual"></el-option>
- <el-option label="≤" value="lessEqual"></el-option>
- <el-option label="≠" value="≠"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item>
- <el-input
- v-model="formData.stopConditionValue"
- placeholder="请选择/输入参数值"
- clearable
- @focus="setFocusedField('stopConditionValue')"
- @blur="clearFocusedField"
- ></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- </div>
- </template>
- <script>
- export default {
- name: "DatasChange",
- props: {
- formulainfo: {
- type: Object,
- default: function () {
- return {};
- }
- },
- curele: {
- type: Object,
- default: function () {
- return {};
- }
- },
- },
- data() {
- return {
- value1: true,
- focusedField: null, // 记录当前聚焦的字段
- formData: {
- changeMethod: '',
- dataFormat: 'time',
- coordinationElement: '',
- frequency: '',
- frequencyUnit: '',
- stopConditionParam: '',
- stopConditionOperator: 'equal',
- stopConditionValue: ''
- }
- };
- },
- mounted() {
- // 从props初始化表单数据
- if (this.formulainfo) {
- this.formData = { ...this.formData, ...this.formulainfo };
- }
- },
- methods: {
- showSelectEle() {
- this.$set(this.formulainfo, 'showSelectEle', !this.formulainfo.showSelectEle);
- this.$emit('select-element');
- },
- setELe(ele) {
- console.log(ele, 'ele');
-
- // 当有元素被选择且有聚焦的字段时,填充对应的值
- if (ele && ele.eName && this.focusedField) {
- this.$set(this.formData, this.focusedField, ele.eName);
- console.log(this.formData,'this.formData');
-
- // 可以选择在填充后取消聚焦状态
- this.focusedField = null;
- }
- },
- // 设置当前聚焦的字段
- setFocusedField(fieldName) {
-
- this.focusedField = fieldName;
- },
- // 清除聚焦状态
- clearFocusedField() {
- // 可以保留聚焦状态直到下一次操作,或立即清除
- // this.focusedField = null;
- }
- }
- };
- </script>
- <style scoped lang="scss">
- .data-change-form {
- background-color: #fff;
- border-radius: 4px;
- padding: 20px;
- }
- .form-title {
- font-size: 16px;
- font-weight: bold;
- margin-bottom: 5px;
- color: #333;
- }
- .form-container {
- width: 100%;
- }
- ::v-deep .el-row {
- margin-bottom: 5px;
- }
- ::v-deep .el-form-item {
- margin-bottom: 5px;
-
- // 确保输入框占满列宽
- ::v-deep .el-input,
- ::v-deep .el-select {
- width: 100%;
- }
- }
- // 停止条件行特殊样式
- .stop-condition-row {
- margin-top: 10px;
- }
- // 调整小屏幕显示
- @media screen and (max-width: 768px) {
- ::v-deep .el-col {
- margin-bottom: 5px;
- }
- }
- .stop-condition-row {
- margin-top: 10px;
-
- ::v-deep .el-col {
- padding-left: 5px !important;
- padding-right: 5px !important;
- }
-
- ::v-deep .el-form-item__content {
- width: 100% !important;
- }
- }
- .frequency-row {
- ::v-deep .el-col {
- padding-left: 0 !important;
- padding-right: 0 !important;
- }
-
- // 调整两个输入框之间的间距
- ::v-deep .el-col:last-child {
- padding-left: 5px !important;
- }
- }
- </style>
|