Conformance: feature task clear but after apply need to trued.

2023-08-04 16:57:54 +08:00
parent 34aa0f28c2
commit 19da6195ec
9 changed files with 153 additions and 59 deletions
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -18,8 +18,18 @@
        </div>
        <!-- select result -->
        <ConformanceSelectResult></ConformanceSelectResult>
+        <p>selectConformanceTask: {{ selectConformanceTask }}</p>
+        <p>selectConformanceStartAndEnd: {{ selectConformanceStartAndEnd }}</p>
+        <p>selectConformanceStart: {{ selectConformanceStart }}</p>
+        <p>selectConformanceEnd: {{ selectConformanceEnd }}</p>
+        <p>selectConformanceFrom: {{ selectConformanceFrom }}</p>
+        <p>selectConformanceTo: {{ selectConformanceTo }}</p>
+        <p>listSeq: {{ listSeq }}</p>
+        <p>isSubmit: {{ isSubmit }}</p>
+        <p>isSubmitListSeq: {{ isSubmitListSeq }}</p>
+        <p>isSubmitStartAndEnd: {{ isSubmitStartAndEnd }}</p>
        <!-- time range -->
-        <ConformanceTimeRange v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time' || selectedRuleType === 'Cycle time'"></ConformanceTimeRange>
+        <ConformanceTimeRange v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time' || selectedRuleType === 'Cycle time'" :time="selectDurationTime"></ConformanceTimeRange>
      </div>
      <!-- button -->
      <div class="space-x-4 p-4 flex justify-center items-content border-t border-neutral-300">
@@ -28,8 +38,13 @@
      </div>
    </div>
    <!-- show bar -->
-    <ConformanceShowBar :class="isShowBar?'':'hidden'" :selectConformanceTask="selectConformanceTask" :selectConformanceStartAndEnd="selectConformanceStartAndEnd" :selectConformanceStart="selectConformanceStart" :selectConformanceEnd="selectConformanceEnd" :selectConformanceFrom="selectConformanceFrom" :selectConformanceTo="selectConformanceTo"
-    :listSeq="listSeq"></ConformanceShowBar>
+    <ConformanceShowBar :class="isShowBar?'':'hidden'"
+    :isSubmit="isSubmit"
+    :isSubmitTask="isSubmitTask"
+    :isSubmitStartAndEnd="isSubmitStartAndEnd"
+    :isSubmitListSeq="isSubmitListSeq"
+    :isSubmitDurationData="isSubmitDurationData"
+    ></ConformanceShowBar>
  </div>
 </section>
 </template>
@@ -48,9 +63,9 @@ export default {
    const loadingStore = LoadingStore();
    const conformanceStore = ConformanceStore();
    const { isLoading } = storeToRefs(loadingStore);
-    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo } = storeToRefs(conformanceStore);
+    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks } = storeToRefs(conformanceStore);

-    return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceStore }
+    return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceStore, conformanceAllTasks }
  },
  data() {
    return {
@@ -63,6 +78,13 @@ export default {
      selectConformanceFrom: null,
      selectConformanceTo: null,
      listSeq: [],
+      selectDurationData: null,
+      selectDurationTime: null,
+      isSubmit: false,
+      isSubmitTask: null,
+      isSubmitStartAndEnd: null,
+      isSubmitListSeq: [],
+      isSubmitDurationData: null,
    }
  },
  components: {
@@ -72,6 +94,16 @@ export default {
    ConformanceSelectResult,
  },
  methods: {
+    /**
+     * get Activity duration Time Range(duration)
+     * @param {string} task
+     * @returns {object} {min:12, max:345}
+     */
+     getDurationTime(task) {
+      this.conformanceAllTasks.forEach(i => {
+        if(i.label === task) this.selectDurationTime = i.duration;
+      });
+    },
    /**
     * @param {boolean} massage true | false 清空選單選項, 選擇的結果
     */
@@ -79,10 +111,12 @@ export default {
      // Results page Cover Plate
      this.$emitter.emit('coverPlate', true);
      // Have activity
-      this.selectConformanceTask = null;
+      this.isSubmitTask = null;
      // Activity sequence
-      this.selectConformanceStartAndEnd = null;
-      this.listSeq = null;
+      this.isSubmitStartAndEnd = null;
+      this.isSubmitListSeq = [];
+      // isSubmit
+      this.isSubmit = false;

      // 其他子元件 reset
      this.$emitter.emit('reset', null);
@@ -114,30 +148,38 @@ export default {

      if(this.selectedRuleType === 'Have activity') { // Activity Sequence 選 Have activity(s) 的行為
        if(!this.selectConformanceTask?.length) return this.$toast.error('Not selected.');
-        else data = {
+        else {
+          data = {
            type: 'contains-tasks',
            tasks: this.selectConformanceTask,
          };
+          this.isSubmitTask = this.selectConformanceTask;
+        }
      }else if(this.selectedRuleType === 'Activity sequence') { // Activity Sequence 選 Start & End 的行為
        if(this.selectedActivitySequence === 'Start & End'){
          if(this.selectConformanceStartAndEnd === null || this.selectConformanceStartAndEnd.length === 0) return this.$toast.error('Both Start and End must be selected.');
-          else data = {
+          else {
+            data = {
              type: 'start-end',
              starts_with: this.selectConformanceStartAndEnd[0],
              ends_with: this.selectConformanceStartAndEnd[1],
            };
+            this.isSubmitStartAndEnd = this.selectConformanceStartAndEnd;
+          }
        }else if(this.selectedActivitySequence === 'Sequence'){ // Activity Sequence 選 Sequence 的行為
          if(this.listSeq.length < 2) return this.$toast.error('Select two or more.');
          else {
            data = {
              type: isMode,
              task_seq: this.listSeq,
+            };
+            this.isSubmitListSeq = this.listSeq;
          }
        }
-        }
-      }
+      };

      this.isLoading = true;
+      this.isSubmit = true;
      await this.conformanceStore.addLogConformanceTempCheckerId(data);
      await this.conformanceStore.getLogConformanceTempReport();
      this.isShowBar = false;
@@ -148,7 +190,7 @@ export default {
    },
  },
  created() {
-    // this.isShowBar = true;
+    this.isShowBar = true;
    this.$emitter.on('actListData', (data) => {
      this.selectConformanceTask = data;
    });
@@ -167,6 +209,11 @@ export default {
          this.selectConformanceTo = data.task;
          break;
        default:
+          if(this.selectedRuleType === 'Activity sequence') this.listSequence = [data.task];
+          else if(this.selectedRuleType === 'Activity duration') {
+            this.selectDurationData = [data.task];
+            this.getDurationTime(data.task);
+          };
          break;
      };
      if(this.selectConformanceStart !== null && this.selectConformanceEnd !== null){
@@ -175,7 +222,27 @@ export default {
    });
    this.$emitter.on('getListSequence', (data) => {
      this.listSeq = data;
-    })
+    });
+    // Radio 切換時，資料要清空
+    this.$emitter.on('isRadioChange', (data) => {
+      if(data) {
+        this.selectConformanceTask = null;
+        this.selectConformanceStartAndEnd = null;
+        this.selectConformanceStart = null;
+        this.selectConformanceEnd = null;
+        this.selectConformanceFrom = null;
+        this.selectConformanceTo = null;
+        this.listSeq = [];
+        this.selectDurationData = null;
+        this.selectDurationTime = null;
+      };
+    });
+    this.$emitter.on('isRadioSeqChange', (data) => {
+      if(data) {
+        this.selectConformanceStartAndEnd = null;
+        this.listSeq = [];
+      };
+    });
  },
 }
 </script>
--- a/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue
@@ -17,14 +17,9 @@ export default {
  props: ['data', 'select'],
  data() {
    return {
-      actList: this.select
+      actList: this.select,
    }
  },
-  watch: {
-    select(newval){
-      this.actList = newval;
-    },
-  },
  methods: {
    actListData() {
      this.$emitter.emit('actListData', this.actList);
--- a/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
@@ -20,11 +20,6 @@ export default {
      selectedRadio: this.select,
    }
  },
-  watch: {
-    select(newval){
-      this.selectedRadio = newval;
-    },
-  },
  methods: {
    actRadioData() {
      this.$emitter.emit('actRadioData', {
--- a/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
@@ -44,10 +44,9 @@
 import sortNumEngZhtw from '@/module/sortNumEngZhtw.js';

 export default {
-  props: ['data', 'listSeq'],
+  props: ['data', 'listSeq', 'isSubmit'],
  data() {
    return {
-      actList: null,
      listSequence: [],
      lastItemIndex: null,
    }
@@ -56,8 +55,12 @@ export default {
    datadata: function() {
      // TODO Activity List 的 dblclick, drag & drop 要改假刪除
      // Activity List 要排序
-      if(this.data !== null) sortNumEngZhtw(this.data);
-      return this.data;
+      let newData;
+      if(this.data !== null) {
+        newData = JSON.parse(JSON.stringify(this.data));
+        sortNumEngZhtw(newData);
+      }
+      return newData;
    },
  },
  methods: {
@@ -118,6 +121,10 @@ export default {
      this.listSequence = [];
    });
  },
+  mounted() {
+    let newlist = JSON.parse(JSON.stringify(this.listSeq));
+    this.isSubmit ? this.listSequence = newlist : this.listSequence = [];
+  },
 }
 </script>
 <style scoped>
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
@@ -4,7 +4,7 @@
    <div>
      <p class="h2">Rule Type</p>
      <div v-for="rule in ruleType" :key="rule.id" class="ml-4 mb-2">
-        <RadioButton v-model="selectedRuleType" :inputId="rule.id + rule.name" name="ruleType" :value="rule.name" @change="changeRadio($event)"/>
+        <RadioButton v-model="selectedRuleType" :inputId="rule.id + rule.name" name="ruleType" :value="rule.name" @change="changeRadio"/>
        <label :for="rule.id + rule.name" class="ml-2">{{ rule.name }}</label>
      </div>
    </div>
@@ -12,7 +12,7 @@
    <div v-show="selectedRuleType === 'Activity sequence'">
      <p class="h2">Activity Sequence</p>
      <div v-for="act in activitySequence" :key="act.id" class="ml-4 mb-2">
-        <RadioButton v-model="selectedActivitySequence" :inputId="act.id + act.name" name="activitySequence" :value="act.name" />
+        <RadioButton v-model="selectedActivitySequence" :inputId="act.id + act.name" name="activitySequence" :value="act.name" @change="changeSeqRadio"/>
        <label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
      </div>
    </div>
@@ -63,7 +63,6 @@ export default {
  },
  data() {
    return {
-      // selectedRuleType: '',
      ruleType: [
        {id: 1, name: 'Have activity'},
        {id: 2, name: 'Activity sequence'},
@@ -72,31 +71,26 @@ export default {
        {id: 5, name: 'Waiting time'},
        {id: 6, name: 'Cycle time'},
      ],
-      // selectedActivitySequence: '',
      activitySequence: [
        {id: 1, name: 'Start & End'},
        {id: 2, name: 'Sequence'},
      ],
-      // selectedMode: '',
      mode: [
        {id: 1, name: 'Directly follows'},
        {id: 2, name: 'Eventually follows'},
        {id: 3, name: 'Short loop(s)'},
        {id: 4, name: 'Self loop(s)'},
      ],
-      // selectedProcessScope: '',
      processScope: [
        {id: 1, name: 'End to end'},
        {id: 2, name: 'Partial'},
      ],
-      // selectedActSeqMore: '',
      actSeqMore: [
        {id: 1, name: 'All'},
        {id: 2, name: 'Start'},
        {id: 3, name: 'End'},
        {id: 4, name: 'Start & End'},
      ],
-      // selectedActSeqFromTo: '',
      actSeqFromTo: [
        {id: 1, name: 'From'},
        {id: 2, name: 'To'},
@@ -105,13 +99,17 @@ export default {
    }
  },
  methods: {
-    changeRadio(event) {
+    changeRadio() {
      this.selectedActivitySequence = 'Start & End';
      this.selectedMode = 'Directly follows';
      this.selectedProcessScope = 'End to end';
      this.selectedActSeqMore = 'All';
      this.selectedActSeqFromTo = 'From';
+      this.$emitter.emit('isRadioChange', true); // Radio 切換時，資料要清空
    },
+    changeSeqRadio() {
+      this.$emitter.emit('isRadioSeqChange',true);
+    }
  }
 }
 </script>
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
@@ -6,7 +6,7 @@
    <ResultDot v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" :timeResultData="startEndData"></ResultDot>
    <ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'" :data="listSequence"></ResultArrow>
    <!-- Activity duration -->
-    <ResultCheck v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'"></ResultCheck>
+    <ResultCheck v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :data="durationData"></ResultCheck>
    <!-- Processing time -->
    <ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'"></ResultArrow>
    <ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'"></ResultArrow>
@@ -56,6 +56,7 @@ export default {
      from: null,
      to: null,
      listSequence: null,
+      durationData: null,
    }
  },
  methods: {
@@ -101,6 +102,8 @@ export default {
          this.to = [data];
          break;
        default:
+          if(this.selectedRuleType === 'Activity sequence') this.listSequence = [data.task];
+          else if(this.selectedRuleType === 'Activity duration') this.durationData = [data.task];
          break;
      };
      if(this.start !== null && this.end !== null){
@@ -109,7 +112,7 @@ export default {
    });
    this.$emitter.on('getListSequence', (data) => {
      this.listSequence = data;
-    })
+    });
    this.$emitter.on('reset', (data) => {
      this.containstTasksData = data;
      this.startEndData = data;
@@ -118,6 +121,19 @@ export default {
      this.from = data;
      this.to = data;
    });
+    // Radio 切換時，資料要清空
+    this.$emitter.on('isRadioChange', (data) => {
+      if(data) {
+        this.containstTasksData = null;
+        this.startEndData = null;
+        this.start = null;
+        this.end = null;
+        this.from = null;
+        this.to = null;
+        this.listSequence = null;
+        this.durationData = null;
+      };
+    });
  },


--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
@@ -1,16 +1,16 @@
 <template>
  <section class="animate-fadein w-full h-full">
    <!-- Have activity -->
-    <ActList v-if="selectedRuleType === 'Have activity'" :data="conformanceTask" :select="selectConformanceTask"></ActList>
+    <ActList v-if="selectedRuleType === 'Have activity'" :data="conformanceTask" :select="isSubmitTask"></ActList>
    <!-- Activity sequence  -->
    <div v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" class="flex h-full">
-      <ActRadio :title="'Start activity'" :select="'actseqStartAndEndRadioStart'" :data="conformanceStart" :category="'Start'" />
-      <ActRadio :title="'End activity'" :select="'actseqStartAndEndRadioEnd'" :data="conformanceEnd" :category="'End'" />
+      <ActRadio :title="'Start activity'" :select="isSubmitStartAndEnd?.[0]" :data="conformanceStart" :category="'Start'" />
+      <ActRadio :title="'End activity'" :select="isSubmitStartAndEnd?.[1]" :data="conformanceEnd" :category="'End'" />
    </div>
    <!-- actSeqDrag -->
-    <ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'" :data="conformanceTask" :listSeq="listSeq"></ActSeqDrag>
+    <ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'" :data="conformanceTask" :listSeq="isSubmitListSeq" :isSubmit="isSubmit"></ActSeqDrag>
    <!-- Activity duration -->
-    <ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :select="'actInclude'" :data="data" />
+    <ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :select="'actInclude'" :data="conformanceTask" />
    <!-- Processing time -->
    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="'protimeStartRadio'" :data="data" />
    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="'protimeEndRadio'" :data="data" />
@@ -64,7 +64,8 @@ export default {

    return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, conformanceStart, conformanceEnd }
  },
-  props: ['selectConformanceTask', 'selectConformanceStartAndEnd', 'selectConformanceStart', 'selectConformanceEnd', 'selectConformanceFrom', 'selectConformanceTo', 'listSeq'],
+  props: ['isSubmit',
+  'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitListSeq'],
  components: {
    ActList, ActRadio, ActSeqDrag
  },
@@ -73,7 +74,5 @@ export default {
      data:['到到到到到到到到到到到到到到到到到到到到到到院', '住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住院', '開開開開開開開開開開開開開開開開開開開開開開刀', '第第第第第第第第第第一次醫囑', 'aaaaaaaaaaaaaaaa', 'bb ccc ddddd eeee', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院 到院 到院 到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院院院院院院院院院院院院院院院院院院院院院院院院院院院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院'],
    }
  },
-  methods: {
-  }
 }
 </script>
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
@@ -2,6 +2,8 @@
 <div class="mt-2">
  <p class="h2">Time Range</p>
  <div>
+    <p>min: {{ timeData.min }}</p>
+    <p>max: {{ timeData.max }}</p>
    <Durationjs></Durationjs>

  </div>
@@ -11,19 +13,31 @@
 import Durationjs from '@/components/durationjs.vue';

 export default {
+  props: ['time'],
  data() {
    return {
+      timeData: {
+        min: null,
+        max: null,
+      },
      selectTimeRange: [20, 80],
      selectedStart: null,
      selectedEnd: null,
      timeStart: ['Sec(s)', 'Min(s)', 'Hour(s)', 'Day(s)', 'Week(s)', 'Mon(s)'],
      timeEnd: ['Sec(s)', 'Min(s)', 'Hour(s)', 'Day(s)', 'Week(s)', 'Mon(s)'],
-
    }
  },
  components: {
    Durationjs,
  },
+  watch: {
+    time: function(newValue, oldValue) {
+      this.timeData = {
+        min: newValue.min,
+        max: newValue.max
+      }
+    },
+  },
  created() {
    this.selectedStart = this.timeStart[1];
    this.selectedEnd = this.timeEnd[5];
--- a/src/stores/conformance.js
+++ b/src/stores/conformance.js
@@ -34,6 +34,9 @@ export default defineStore('conformanceStore', {
    infinite404: null,
  }),
  getters: {
+    conformanceAllTasks: state => {
+      return state.allConformanceTask;
+    },
    conformanceTask: state => {
      return state.allConformanceTask.map(i => i.label);
    },