add#134171 - 結案明細 -頁面

Tomas

2022-01-12 374004632450ff987b3577a422fdf6a5503220ec

add#134171 - 結案明細 -頁面

 PAMapp/components/BackActionBar.vue

@@ -75,7 +75,8 @@
          featureLabel = 'F&Q å¸¸è¦‹å•é¡Œ';
          break;
        case 'appointment':
          featureLabel = '預約資訊';
          const appointmentFeatureLabel = this.$route.name.includes('close') ? '結案' : '預約資訊';
          featureLabel = appointmentFeatureLabel;
          break;
      }
      return featureLabel;

 PAMapp/pages/appointment/_appointmentId/close/index.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,104 @@
<template>
  <div class="appointment-client-detail-close-page">

      <el-row
        type="flex"
        class="pam-paragraph">
        <UiField label="歸檔方式" :labelSize="20">
          <SingleSelectBtn class="mt-10"
            :singleSelected.sync="appointmentCloseInfo.selectCloseOption"
            :options="closeOptions" />
        </UiField>
      </el-row>

      <el-row
        type="flex"
        class="pam-paragraph">
        <UiField label="商品代碼Plan Code" :labelSize="20">
          <input
            class="appointment-client-detail-close__input"
            v-model="appointmentCloseInfo.planCode"
            placeholder="請輸入"
            type="text">
        </UiField>
      </el-row>

      <el-row
        type="flex"
        class="pam-paragraph">
        <UiField label="進件時間" :labelSize="20">
          <input
            class="appointment-client-detail-close__input"
            v-model="appointmentCloseInfo.planCode"
            placeholder="TBD: æ—¥æœŸå…ƒä»¶"
            type="text">
        </UiField>
      </el-row>

      <el-row
        type="flex"
        class="pam-paragraph">
        <UiField label="備註" :labelSize="20">
          <textarea
            v-model="appointmentCloseInfo.archivedDate"
            class="appointment-close__remark"
            placeholder="請輸入"
            name="remark"
            id="remark"
            wrap="off"
            rows="3">
          </textarea>
        </UiField>
      </el-row>

      <el-row
        type="flex"
        justify="center"
        class="pam-paragraph">
        <el-button @click="$router.go(-1)">取消</el-button>
        <el-button @click="$router.go(-1)">確認</el-button>
      </el-row>

  </div>
</template>

<script lang="ts">

import { Vue, Component } from 'vue-property-decorator';

@Component
export default class AppointmentDetailCloseComponent extends Vue {

  appointmentCloseInfo = {
    selectCloseOption: '',
    planCode         : '',
    archivedDate     : '',
    remark           : '',
  };

  closeOptions = [
    {
      title:'成交',
      label: 'done',
    },
    {
      title:'未成交',
      label: 'close',
    }
  ];

}
</script>

<style lang="scss" scoped>
.appointment-close__remark, .appointment-client-detail-close__input {
  border-radius: 5px;
  border   : 1px solid #707070;
  font-size: 20px;
  padding  : 10px 20px;
  width    : 100%;
  &::placeholder {
    color: $MID_GREY;
  }
}
</style>