constraintsearchdialog finished

.gitignore

@@ -2,7 +2,7 @@
 node_modules
 /dist
 /node_modules.zip
-
+.vscode
 
 # local env files
 .env.local

src/components/components_cluespage/ConstraintSearchDialog.vue

@@ -1,16 +1,21 @@
+<!--
+    @brief: 添加约束条件的对话框
+    @date: 2024年6月27日
+    @author: myz
+-->
 <template>
     <el-container>
+        <!-- 其中@click.stop很重要 -->
         <el-dialog
             v-model = 'dialogVisible'
-            draggable="true"
-            align-center = 'true'
+            :draggable= 'true'
+            :align-center = "true"
+            @close = handleClose
+            @click.stop 
         >
             <!-- 表头添加约束条件按钮 -->
             <template #header>
-                <el-button class = 'btnAdd'>
-                    <el-icon><Plus/></el-icon>
-                </el-button>
-                <el-text>条件查找</el-text>
+                <el-text>条件查找约束条件添加</el-text>
             </template>
             <!-- 表单用于选择约束条件 -->
             <el-form
@@ -26,27 +31,49 @@
                     </el-select>
                 </el-form-item>
                 <!-- 约束列 -->
-                <el-form-item label = '约束列'></el-form-item>
+                <el-form-item label = '约束列'>
+                    <el-select v-model = 'form.col_id'>
+                        <el-option
+                            v-for = "item in colData"
+                            :key = 'item.col_id'
+                            :label = 'item.col_name'
+                            :value = 'item.col_id'/>
+                    </el-select>
+                </el-form-item>
                 <!-- 数据类型 -->
                 <el-form-item label = '数据类型'></el-form-item>
                     <el-select v-model = 'form.type'>
-                        <el-option label = 'INT' value = 'INT' />
-                        <el-option label = 'STRING' value = 'STRING' />
-                        <el-option label = 'DATE' value = 'DATE' />
+                        <el-option label = '实数' value = 'double' />
+                        <el-option label = '字符串' value = 'string' />
+                        <el-option label = '日期' value = 'date' />
                     </el-select>
                 <!-- 上限 -->
-                <el-form-item label = '上限'></el-form-item>
+                <el-form-item v-show = "max_limit_visible" label = '上限'>
                     <el-input v-model = 'form.max_limit' />
+                </el-form-item>
                 <!-- 下限 -->
-                <el-form-item label = '下限'></el-form-item>
+                <el-form-item v-show = "min_limit_visible" label = '下限'>
                     <el-input v-model = 'form.min_limit' />
+                </el-form-item>
+                <el-form-item v-show = "continuous_time_visible" label = '连续持续时间'>
+                    <el-date-picker
+                        v-model = "form.continuous_time"
+                        type = "daterange"
+                        range-sperator = "至"
+                        start-placeholder = "起始日期"
+                        end-placeholder = '终止日期'
+                        value-format = 'DD.MM.YYYY' />
+                </el-form-item>
+                <el-form-item v-show = "search_string_visible" label = '搜索字符串'>
+                    <el-input v-model = 'form.search_string' />
+                </el-form-item>
             </el-form>
             <!-- 控制关闭和确认按钮 -->
             <template #footer>
-                <el-button class = 'btnConfirm'>
+                <el-button class = 'btnConfirm' @click = handleConfirm>
                     确认
                 </el-button>
-                <el-button class = 'btnClose' @click = 'dialogVisible = false'>
+                <el-button class = 'btnClose' @click = handleClose>
                     关闭
                 </el-button>
             </template>
@@ -54,26 +81,125 @@
     </el-container>
 </template>
 
-<script>
-export default{
+<script lang = 'ts'>
+import { defineComponent, ref, watch } from 'vue';
+
+
+// 定义传入表头属性的格式
+interface ColData{
+    col_id: string,
+    col_name: string
+}
+
+export default defineComponent({
     name: 'ConstraintSearchDialog',
     props: {
-  colData: {
-    type: Array,
-    default: () => []
-  }
-},
-    data(){
-        return{
-            form:{
-                logic: '',
-                col_id: '',
-                type: '',
-                max_limit: '',
-                min_limit: '',
-            },
-            dialogVisible: true
+        // 父组件传入的数组包含表头的属性 col_id 属性id col_name属性名
+        colData: {
+            type: Array as ()=>ColData[],
+            required: true
+        },
+        isVisible: Boolean
+    },
+    emits: ['update:isVisible','confirm'],
+    setup(props, {emit}){
+        const dialogVisible = ref(false);
+        // 用于控制各种表项的显示
+        const max_limit_visible = ref(false);
+        const min_limit_visible = ref(false);
+        const continuous_time_visible = ref(false);
+        const search_string_visible = ref(false);
+        const form = ref({
+            logic : '', // 逻辑运算方式
+            col_id: '', // 选择的约束列
+            type: '',   // 数据的类型
+            max_limit: '',  //上限
+            min_limit: '',  //下限
+            continuous_time: '', //持续时间
+            search_string: '', // 搜索字符串
+        });
+
+        // 使用()=>props.isVisible 应为props本身是一个对象为了检测他的变化所以需要props.isVisible
+        watch(()=>props.isVisible, (newValue) =>{
+            dialogVisible.value = newValue;
+        });
+        
+        // 监视type的变化并为之调整显示哪些选择表项
+        watch(()=>form.value.type, (newValue) =>{
+            if(newValue == 'double')
+            {
+                max_limit_visible.value = true;
+                min_limit_visible.value = true;
+            }
+            else if( newValue == 'string')
+            {
+                search_string_visible.value = true;
+            }
+            else if( newValue == 'date')
+            {
+                continuous_time_visible.value = true;
+            }
+            else{
+                max_limit_visible.value = false;
+                min_limit_visible.value = false;
+                continuous_time_visible.value = false;
+                search_string_visible.value = false;
+            }
+        });
+
+        const handleClose = ()=>{
+            // 清空为下一次提交
+            form.value.logic = ''; 
+            form.value.col_id = '';
+            form.value.type = '';
+            form.value.max_limit = '';
+            form.value.min_limit = '';
+            // 通过隐藏的方式关闭
+            dialogVisible.value = false;
+            // 向父组件发送isVisible的的更新
+            emit('update:isVisible',false); 
+        };
+        // 验证数据是否有效
+        const handleConfirm_Preprocessing = ()=>
+        {
+            if(form.value.type != ''
+                && form.value.logic != ''
+                && form.value.col_id != ''
+            )
+            {
+                if(form.value.type ==  'double' 
+                    && form.value.max_limit != ''
+                    && form.value.min_limit != ''
+                )
+                    return true;
+                else if(form.value.type == 'date'
+                    && form.value.continuous_time != ''
+                )
+                    return true;
+                else if(form.value.type == 'string'
+                    && form.value.search_string != ''
+                )
+                    return true;
+            }
+            return false;
+        }
+        const handleConfirm = ()=>{
+            // 这里提交之前应该检查提交量的完整性
+            if(handleConfirm_Preprocessing())
+                emit('confirm',form.value);
+            handleClose();
+        };
+
+        return {
+            dialogVisible,
+            form,
+            handleClose,
+            handleConfirm,
+            max_limit_visible,
+            min_limit_visible,
+            continuous_time_visible,
+            search_string_visible,
         }
     }
-}
+})
 </script>

src/views/CluesPage.vue

@@ -10,7 +10,7 @@
 		</el-header>
 		<el-main class ='container_Tools_Main'>
             <!-- 折叠版存放约束条件显示 -->
-            <!-- <el-container class = 'containerConstraints'>
+            <el-container class = 'containerConstraints'>
                 <el-collapse v-model = 'activeNames'>
                     <el-collapse-item name = '1'>
                         <div class = 'divConstraintView' v-for="(i,index) in Constraints" :key="index">
@@ -19,29 +19,9 @@
                         </div> 
                     </el-collapse-item>
                 </el-collapse>
-            </el-container> -->
+            </el-container>
             <!-- 工具栏 -->
             <el-header class ='containerTools'>
-                <div v-show = show_choose>  
-                    <select v-model="choose_merge">  
-                        <option disabled value="">请选择逻辑关系</option>  
-                        <option v-for="(i,index) in Merges" :value="i" :key="index">{{ i }}</option>  
-                    </select>  
-                    <select v-model="choose_col" v-show="if_show_col">  
-                        <option disabled value="">请选择需要约束的列</option>  
-                        <option v-for="(i,index) in clueCols" :value="i.col_id" :key="index">{{ i.col_name }}</option>  
-                    </select>  
-                    <select v-model="choose_type" v-show="if_show_type">  
-                        <option disabled value="">请选择数据类型</option>  
-                        <option v-for="(i,index) in Types" :value="i" :key="index">{{ i }}</option>  
-                    </select>  
-                    <input type="number" v-model="choose_up" placeholder="请输入上限（可为INF）" v-show = "if_show_updown"> 
-                    <input type="number" v-model="choose_down" placeholder="请输入下限（可为INF）" v-show = "if_show_updown"> 
-                    <VueDatePicker v-model="choose_date" v-show="if_show_date" placeholder = "请选择持续时间" model-type="dd.MM.yyyy" :range="{ partialRange: false }"></VueDatePicker>
-                    <input type="text" v-model="choose_inside" placeholder="请输入连续字串" v-show = "if_show_inside"> 
-                    
-                    <button @click="constraint_add" v-show = "if_show_ok">确定</button> 
-                </div>
 				<el-button class = 'btnDelete'>
                     <el-tooltip content = '删除所有'>
                         <el-icon><Delete /></el-icon>
@@ -51,13 +31,17 @@
                     <el-tooltip content = '条件查找'>
                         <el-icon><Search /></el-icon>
                     </el-tooltip>
-                <!-- 条件查找对应的对话框 -->
-                <el-dialog
-                    v-model = 'searchDialogVisible'
-
-                >
-                    <ConstraintSearchDialog />
-                </el-dialog>
+                    <!-- 条件查找对应的对话框 -->
+                     <!-- @author myz
+                        @brief: 自实现的对话框用于提交约束条件添加
+                        @params: colDate 表头属性的数据
+                        @v-model:isVisible 控制对话框可见的v-model
+                        @confirm: @confirm 处理子部件的confirm事件 -->
+                    <ConstraintSearchDialog
+                    :colData = 'clueCols'
+                    v-model:isVisible = 'searchDialogVisible'
+                    @confirm = 'handleSearchDialogConfirm'
+                    />
 				</el-button>
 				<el-button class = 'btnMore' @click="dochart">
                     <el-tooltip content = '更多'>
@@ -171,28 +155,12 @@ export default{
             // 用于查找功能对话框的变量
             searchDialogVisible : false,
             // 查找所用变量
-            show_choose : false,
             "Constraints":[// 注意 用的是复数形式
                 {"merge":"AND","col_id":"3","type":"double","down":"0","up":"INF","inside":"","date":""}, // 满足第1_3列（实数），范围为大于等于0的
                 {"merge":"AND","col_id":"2","type":"date","down":"","up":"","inside":"","date":"03.06.2024,30.06.2024"}, // 同时满足第!_2列（日期），早于2024/1/1的
                 {"merge":"OR","col_id":"4","type":"string","down":"","up":"","inside":"AAA","date":""} // 或者满足第1_4列(字符串),存在“AAA”这个连续字串的
             ],
-            "Merges":["AND","OR","NOR"],
-            "Types":["日期","实数","字符串"],
-            choose_merge: '',
-            if_show_col:false,
-            choose_col:'',
-            if_show_type:false,
-            choose_type:'',
-            if_show_updown:false,
-            choose_up:'',
-            choose_down:'',
-            if_show_inside:false,
-            choose_inside:'',
-            if_show_ok:false,
-            if_show_date:false,
-            choose_date:"",
-
+            // 显示当前页面的名称
             pageTitle,
             clueId,
             chart:false,
@@ -202,8 +170,22 @@ export default{
             clueData: generateMockData(clueCols, 20), // 生成 20 行数据, 实际运行时：clueData:[]，
         }
     },
-    methods:{
-        // 查找所用方法
+    methods:{   
+        // 处理子部件的confirm事件
+        handleSearchDialogConfirm(form){
+            console.log("提交约束条件", form);
+            const newConstraint = {
+                "merge": form.logic,
+                "col_id": form.col_id,
+                "type": form.type,
+                "inside": form.search_string,
+                "up": form.max_limit,
+                "down": form.min_limit,
+                "date": form.continuous_time[0] + ',' + form.continuous_time[1],
+            } 
+            this.Constraints.push(newConstraint);
+        },
+        // 根据属性id显示属性
         search_clu_name(aa){
             for (let col of this.clueCols) {
                 if(aa == col.col_id)
@@ -232,28 +214,6 @@ export default{
         show_choose_col(){
             return false;
         },
-        constraint_add(){
-            let newConstraint = {  
-            "merge":this.choose_merge, // 假设这是一个 AND 约束  
-            "col_id":this.choose_col, // 假设这是第5列的ID  
-            "type":"",
-            "inside":"",
-            "up":"",
-            "down":"",
-            "date":""
-            };  
-            if(this.choose_type == "字符串")newConstraint.type = "string";
-            if(this.choose_type == "实数")newConstraint.type = "double";
-            if(this.choose_type == "日期")newConstraint.type = "date";
-            if(this.choose_inside) newConstraint.inside = this.choose_inside;
-            if(this.choose_up) newConstraint.up = this.choose_up;
-            if(this.choose_down) newConstraint.down = this.choose_down;
-            if(this.choose_date) newConstraint.date = this.choose_date;
-            this.Constraints.push(newConstraint);
-            this.if_show_date = this.if_show_col = this.if_show_inside = this.if_show_ok = this.if_show_type = this.if_show_updown = false;
-            this.choose_col = this.choose_down = this.choose_inside = this.choose_merge = this.choose_type = this.choose_up = "";
-            this.show_choose = false;
-        },
         constraint_delete(index){
             this.Constraints.splice(index, 1);  
         },
@@ -396,45 +356,13 @@ export default{
         }
     },
     watch: {
+        // 调试约束条件添加的方法
+        searchDialogVisible(newValue){
+            console.log(newValue);
+        },
         Constraints(newv,oldv){
             console.log(newv);
         },
-        choose_merge(newv,oldv){
-            if(newv == '')this.if_show_col = false;
-            else this.if_show_col = true;
-        },
-        choose_col(newv,oldv){
-            if(newv == '')this.if_show_type = false;
-            else this.if_show_type = true;
-        },
-        choose_type(newv,oldv){
-            if(newv == "")this.if_show_inside = false,this.if_show_updown = false;
-            else{
-                if(newv == "字符串")this.if_show_updown = false,this.if_show_inside = true,this.if_show_date = false;
-                if(newv == "日期")this.if_show_updown = false,this.if_show_inside = false,this.if_show_date = true;
-                if(newv == "实数")this.if_show_updown = true,this.if_show_inside = false,this.if_show_date = false;
-            }
-        },
-        choose_inside(newv,oldv){
-            if((this.choose_type == "字符串" && newv != "") || ((this.choose_type == "实数") && this.choose_down!="" && this.choose_up!="") || (this.choose_type == "日期" && this.choose_date != ""))
-                this.if_show_ok = true;
-            else this.if_show_ok = false;
-        },
-        choose_up(newv,oldv){
-            if((this.choose_type == "字符串" && this.choose_inside != "") || ((this.choose_type == "实数") && this.choose_down!="" && newv!="") || (this.choose_type == "日期" && this.choose_date != ""))
-                this.if_show_ok = true;
-            else this.if_show_ok = false;
-        },
-        choose_down(newv,oldv){
-            if((this.choose_type == "字符串" && this.choose_inside != "") || ((this.choose_type == "实数") && newv != "" && this.choose_up!="") || (this.choose_type == "日期" && this.choose_date != ""))
-                this.if_show_ok = true;
-            else this.if_show_ok = false;
-        },
-        choose_date(newv,oldv){
-            if((this.choose_type == "字符串" && this.choose_inside != "") || ((this.choose_type == "实数") && this.choose_down != "" && this.choose_up!="") || (this.choose_type == "日期" && this.newv != ""))
-                this.if_show_ok = true;
-            else this.if_show_ok = false;
-        },
     },
     //加载页面的时候获取数据
     beforeMount() {
@@ -525,6 +453,6 @@ export default{
     margin: 0;
 }
 .containerConstraints{
-    height: 2%;
+    height: auto;
 }
 </style>