客户需求

src/views/dayPlan/PngAppro/components/basicForm.vue

@@ -4,7 +4,7 @@
       <a-form-item label="计划日期" name="datePlan">{{ formState.datePlan }}</a-form-item>
     </a-col>
     <a-col :span="8">
-      <a-form-item label="当日/次日" name="kName">{{ formState.datePlan }}</a-form-item>
+      <a-form-item label="当日/次日" name="dayDesc">{{ formState.dayDesc }}</a-form-item>
     </a-col>
     <a-col :span="8">
       <a-form-item label="合同" name="kName">{{ formState.kName}}</a-form-item>
@@ -61,10 +61,12 @@
     </a-col>
     <a-col :span="24">
       <a-form-item label="开机方式" name="" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
-        <span>连运</span>{{ formState.powerCont }}台
-        <span>调峰</span>{{ formState.powerPeak }}台
-        <span>停机</span>{{ formState.powerStop }}台
-        <span>其他</span>{{ formState.powerOther }}台
+        <div style="display: flex;">
+          <div class="dot"><span style="background:#04F21C"></span>连运<i>{{ formState.powerCont }}</i>台</div>
+          <div class="dot"><span style="background:#FFFF00"></span>调峰<i>{{ formState.powerCont }}</i>台</div>
+          <div class="dot"><span style="background:#D9001B"></span>停机<i>{{ formState.powerStop }}</i>台</div>
+          <div class="dot"><span style="background:#CA90FF"></span>其他<i>{{ formState.powerOther }}</i>台</div>
+        </div>
       </a-form-item>
     </a-col>
     <a-col :span="24">
@@ -76,26 +78,28 @@
   <a-table style="width: 100%" :columns="columns" :data-source="dataList" :pagination="false" :scroll="{x: 1000}">
     <template #bodyCell="{ column, record, index }">
       <template v-if="column.dataIndex === 'qtySalesGj'">
-        <a-input-number v-model:value="record.qtySalesGj" :min="0" @change="numChange" style="width: 100%" />
+        <a-input-number v-model:value="record.qtySalesGj" :disabled="record.alterSign=='D' || disable" :min="0" @change="numChange" style="width: 100%" />
       </template>
         <template v-if="column.dataIndex === 'qtySalesM3'">
-        <a-input-number v-model:value="record.qtySalesM3" :min="0" @change="numChange" style="width: 100%" />
+        <a-input-number v-model:value="record.qtySalesM3" :disabled="record.alterSign=='D' || disable" :min="0" @change="numChange" style="width: 100%" />
       </template>
         <template v-if="column.dataIndex === 'note'">
-        <a-input v-model:value="record.note" style="width: 100%" />
+        <a-input v-model:value="record.note" :disabled="record.alterSign=='D' || disable" style="width: 100%" />
       </template>
     </template>
   </a-table>
-   
+
 </template>
 
 <script lang="ts" setup>
-    import { useI18n } from '/@/hooks/web/useI18n';
+    import { json } from 'stream/consumers';
+import { useI18n } from '/@/hooks/web/useI18n';
     import { ref, computed, onMounted, onBeforeMount, nextTick, defineAsyncComponent, reactive, defineComponent, watch} from 'vue';
     const { t } = useI18n();
     const props = defineProps({
-      disabled: false,
-      id: ''
+      formObj: {},
+      list: [],
+      disable: false
     
     });
     const columns= ref([
@@ -109,42 +113,69 @@
       { title: t('批复量(方)'), dataIndex: 'qtySalesM3', sorter: true, width: 200},
       { title: t('备注'), dataIndex: 'note', sorter: true, width: 200},
     ]);
-    const formState = reactive({})
+    const formState = ref()
     const dataList = ref([])
     async function numChange () {
       let num = 0;
-      let num = 1;
-      dataList.forEach(v => {
+      let num1 = 0;
+      dataList.value.forEach(v => {
         num+=(Number(v.qtySalesGj) || 0)
         num1+=(Number(v.qtySalesM3) || 0)
       })
-      formState.qtySalesGj = num
-      formState.qtySalesM3 = num1
+      formState.value.qtySalesGj = num
+      formState.value.qtySalesM3 = num1
+    }
+    function getFormValue () {
+      let obj = {
+        formInfo: formState.value,
+        list: dataList.value
+      }
+      return obj
     }
     watch(
-      () => props.id,
+      () => props.formObj,
       (val) => {
         if (val) {
+          formState.value = val
         }  
       },
-      {
-        immediate: true
+      { 
+        immediate: true,
+        deep: true,
       }
     );
     watch(
-      () => props.disabled,
+      () => props.list,
       (val) => {
-        
+        dataList.value = val
       },
       {
-        immediate: true
+        immediate: true,
+        deep: true,
       }
     );
-
+    defineExpose({
+      getFormValue
+    });
 
 </script>
 
 <style lang="less" scoped>
  
-    
+    .dot {
+      margin-right: 10px;
+      display: flex;
+      align-items: center;
+      i{
+        padding: 5px;
+        font-style: normal;
+      }
+      span{
+        width: 10px !important;
+        height: 10px !important;
+        border-radius: 50%;
+        background: red;
+        display: block;
+      }
+    }
 </style>