|
|
@@ -0,0 +1,315 @@
|
|
|
+<template>
|
|
|
+ <el-form :model="form" ref="form" class="sub-form" :validate-on-rule-change="false">
|
|
|
+ <!-- 文本类型 -->
|
|
|
+ <el-form-item label="条件明细" label-width="80px" v-if="ruleType==1">
|
|
|
+ <el-select
|
|
|
+ style="width:100%;minWidth: 240px"
|
|
|
+ v-model="form.name"
|
|
|
+ filterable
|
|
|
+ remote
|
|
|
+ clearable
|
|
|
+ :loading="showDrop"
|
|
|
+ loading-text="加载中..."
|
|
|
+ @change="changeWord"
|
|
|
+ @visible-change="handleVisible"
|
|
|
+ placeholder="搜索开单项目"
|
|
|
+ :remote-method="searchCondition"
|
|
|
+ reserve-keyword
|
|
|
+ ref="conditionListName"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in conditionList"
|
|
|
+ :key="item.id + item.name"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.name"
|
|
|
+ :title="item.name"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-row v-if="ruleType==2">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="条件明细" label-width="80px" v-if="ruleType==2">
|
|
|
+ <el-select
|
|
|
+ style="width:100%"
|
|
|
+ v-model="form.name"
|
|
|
+ filterable
|
|
|
+ remote
|
|
|
+ clearable
|
|
|
+ :loading="showDrop"
|
|
|
+ loading-text="加载中..."
|
|
|
+ @change="changeWord"
|
|
|
+ @visible-change="handleVisible"
|
|
|
+ placeholder="搜索开单项目"
|
|
|
+ :remote-method="searchCondition"
|
|
|
+ reserve-keyword
|
|
|
+ ref="conditionListName"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in conditionList"
|
|
|
+ :key="item.id + item.name"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.name"
|
|
|
+ :title="item.name"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label label-width="0px" v-if="ruleType==2&&isOpen">
|
|
|
+ <span class="font">1</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="16" v-for="(item,index) in ruleForm" :key="index">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-select v-model="item.compare" placeholder="请输入比较" style="width: 100%">
|
|
|
+ <el-option label="大于" value=">"></el-option>
|
|
|
+ <el-option label="大于等于" value=">="></el-option>
|
|
|
+ <el-option label="小于" value="<"></el-option>
|
|
|
+ <el-option label="小于等于" value="<="></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label-width="0px">
|
|
|
+ <el-input
|
|
|
+ v-model="item.value"
|
|
|
+ placeholder="填写数值"
|
|
|
+ @blur="handleValue('value',index)"
|
|
|
+ :disabled="item.compare ==''"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label-width="0px">
|
|
|
+ <el-input v-model="item.unit" placeholder="填写单位" @blur="handleValue('unit',index)"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1" class="operation">
|
|
|
+ <div class="icon">
|
|
|
+ <img src="../../../images/plus.png" v-if="!isOpen" @click="addForm()" />
|
|
|
+ <img src="../../../images/cut.png" v-if="isOpen" @click="cutForm(index)" />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import api from '@api/icss.js';
|
|
|
+export default {
|
|
|
+ name: 'ConditionForm',
|
|
|
+ props: ['data', 'type', 'conceptName', 'ruleType'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showDrop: false,
|
|
|
+ conditionList: [],
|
|
|
+ form: {
|
|
|
+ conditionLabel: '',
|
|
|
+ id: '',
|
|
|
+ maxValue: '',
|
|
|
+ minValue: '',
|
|
|
+ name: '',
|
|
|
+ range: '',
|
|
|
+ status: '',
|
|
|
+ unit: ''
|
|
|
+ },
|
|
|
+ ruleForm: [
|
|
|
+ {
|
|
|
+ compare: '',
|
|
|
+ value: '',
|
|
|
+ unit: ''
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isOpen() {
|
|
|
+ if (this.ruleForm.length === 2) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.form = { ...this.data };
|
|
|
+ const { maxValue, minValue, unit } = this.form;
|
|
|
+ if (minValue !== null && maxValue !== null) {
|
|
|
+ this.ruleForm = [
|
|
|
+ {
|
|
|
+ compare: '>=',
|
|
|
+ value: minValue,
|
|
|
+ unit: unit
|
|
|
+ },
|
|
|
+ {
|
|
|
+ compare: '<=',
|
|
|
+ value: maxValue,
|
|
|
+ unit: unit
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ } else if (minValue === null && maxValue !== null) {
|
|
|
+ this.ruleForm = [
|
|
|
+ {
|
|
|
+ compare: '<=',
|
|
|
+ value: maxValue,
|
|
|
+ unit: unit
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ } else if (minValue !== null && maxValue === null) {
|
|
|
+ this.ruleForm = [
|
|
|
+ {
|
|
|
+ compare: '>=',
|
|
|
+ value: minValue,
|
|
|
+ unit: unit
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ } else {
|
|
|
+ this.ruleForm = [
|
|
|
+ {
|
|
|
+ compare: '',
|
|
|
+ value: '',
|
|
|
+ unit: ''
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeWord(val) {
|
|
|
+ let condition = this.conditionList.find(item => item.name == val);
|
|
|
+ this.$emit('split', condition);
|
|
|
+ },
|
|
|
+ handleVisible(flag) {
|
|
|
+ if (!flag) {
|
|
|
+ this.conceptList = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 搜索列表
|
|
|
+ searchCondition(query) {
|
|
|
+ const { data, type, conceptName, ruleType } = this;
|
|
|
+ if (!query) {
|
|
|
+ this.conditionList = [];
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.showDrop = true;
|
|
|
+ let params = {
|
|
|
+ type,
|
|
|
+ conceptName,
|
|
|
+ ruleType,
|
|
|
+ conditionName: query
|
|
|
+ };
|
|
|
+ api.conditionBillmanIndex(params).then(res => {
|
|
|
+ this.showDrop = false;
|
|
|
+ if (res.data.code == '0') {
|
|
|
+ this.conditionList = res.data.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 编辑规则
|
|
|
+ handleValue(from, idx) {
|
|
|
+ let item = this.ruleForm.find((item, index) => index == idx);
|
|
|
+ if ((item.compare == '>' || item.compare == '>=') && from == 'value') {
|
|
|
+ this.form.minValue = item.value;
|
|
|
+ this.$emit('handleInput', {
|
|
|
+ type: 'minValue',
|
|
|
+ value: this.form.minValue
|
|
|
+ });
|
|
|
+ } else if (
|
|
|
+ (item.compare == '<' || item.compare == '<=') &&
|
|
|
+ from == 'value'
|
|
|
+ ) {
|
|
|
+ this.form.maxValue = item.value;
|
|
|
+ this.$emit('handleInput', {
|
|
|
+ type: 'maxValue',
|
|
|
+ value: this.form.maxValue
|
|
|
+ });
|
|
|
+ } else if (from === 'unit') {
|
|
|
+ this.form.unit = item.unit;
|
|
|
+ this.$emit('handleInput', {
|
|
|
+ type: 'unit',
|
|
|
+ value: this.form.unit
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 新增表单
|
|
|
+ addForm() {
|
|
|
+ this.ruleForm.push({
|
|
|
+ compare: '',
|
|
|
+ value: '',
|
|
|
+ unit: ''
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 减少表单
|
|
|
+ cutForm(i) {
|
|
|
+ let item = this.ruleForm.find((item, index) => index == i);
|
|
|
+ console.log(item,'==========');
|
|
|
+ if (item.compare == '>' || item.compare == '>=') {
|
|
|
+ this.form.minValue = '';
|
|
|
+ this.$emit('handleInput', {
|
|
|
+ type: 'minValue',
|
|
|
+ value: this.form.minValue
|
|
|
+ });
|
|
|
+ } else if (item.compare == '<' || item.compare == '<=') {
|
|
|
+ this.form.maxValue = '';
|
|
|
+ this.$emit('handleInput', {
|
|
|
+ type: 'maxValue',
|
|
|
+ value: this.form.maxValue
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.ruleForm.splice(i, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.condition {
|
|
|
+ /deep/ .el-form-item__label {
|
|
|
+ margin-left: 12px !important;
|
|
|
+ }
|
|
|
+ /deep/ .el-col {
|
|
|
+ padding-left: 0px !important;
|
|
|
+ padding-right: 4px !important;
|
|
|
+ }
|
|
|
+ /deep/ .el-form-item__error {
|
|
|
+ float: left;
|
|
|
+ top: 40px;
|
|
|
+ left: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.conditionName {
|
|
|
+ /deep/ .el-col {
|
|
|
+ padding-left: 0px !important;
|
|
|
+ padding-right: 0px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+.operation {
|
|
|
+ width: 0;
|
|
|
+ height: 30px;
|
|
|
+ position: relative;
|
|
|
+ .icon:before {
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ left: 20px;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ -webkit-transform: translate(-50%, -50%);
|
|
|
+ width: 30px;
|
|
|
+ content: '';
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ position: relative;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ top: 5px;
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.font {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+</style>
|
morphone1995