SetpanDialog.vue

<template>
  <el-dialog
    v-if="visiable"
    :visible.sync="visiable"
    center
    fullscreen
    destroy-on-close
    :before-close="beforeClose"
  >
    <c-col>
      <el-form v-model="formData" inline>
        <c-col>
          <c-col :span="8">
            <el-form-item label="费用代码">
              <c-input v-model="formData.feecod" disabled />
            </el-form-item>
          </c-col>
          <c-col :span="16">
            <el-form-item label="中文描述">
              <c-input v-model="formData.feetxt" style="width: 350px" />
              <c-select
                v-model="formData.modflg"
                disabled
                :code="codes.modflg"
                style="width: 350px; margin-left: 100px"
              />
            </el-form-item>
          </c-col>
        </c-col>
        <c-col>
          <c-col :span="6">
            <el-form-item label="详细信息">
              <c-input v-model="formData.feetxtinf" />
            </el-form-item>
          </c-col>
          <c-col :span="6">
            <el-form-item label="起算时间">
              <!-- <c-input v-model="formData.dat1" type="date" /> -->
              <c-date-picker
                type="date"
                v-model="formData.dat1"
                format="yyyy-MM-dd"
                style="width: 100%"
                placeholder="请选择起算时间"
              ></c-date-picker>
            </el-form-item>
          </c-col>
          <c-col :span="6">
            <el-form-item label="结束时间">
              <c-date-picker
                type="date"
                v-model="formData.dat2"
                format="yyyy-MM-dd"
                style="width: 100%"
                placeholder="请选择结束时间"
              ></c-date-picker>
            </el-form-item>
          </c-col>
          <c-col :span="6">
            <el-form-item label="收取份数">
              <c-input v-model="formData.unt" />
            </el-form-item>
          </c-col>
        </c-col>
        <c-col>
          <el-form-item label="费用换算">
            <c-select v-model="formData.usrcur">
              <el-option
                v-for="item in codes.cur"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              />
            </c-select>
            <c-input
              v-model="formData.usramt"
              style="width: 200px; margin-left: 50px"
            />
          </el-form-item>
        </c-col>
        <c-col>
          <c-col :span="8">
            <el-form-item label="应收费用">
              <c-input
                v-model="formData.cur"
                disabled
                style="width: 100px; margin-right: 10px"
              />
              <c-input
                v-model="formData.ogiamt"
                disabled
                style="width: 200px"
              />
            </el-form-item>
          </c-col>
          <c-col :span="8">
            <el-form-item label="优惠百分比">
              <c-input v-model="formData.dctrat">
                <template #suffix>%</template>
              </c-input>
            </el-form-item>
          </c-col>
          <c-col :span="8">
            <el-form-item label="Period calculation starting at">
              <c-input v-model="formData.datrefbeg" disabled />
            </el-form-item>
          </c-col>
        </c-col>
        <c-col>
          <c-col :span="8">
            <el-form-item label="付款方">
              <c-select v-model="formData.rol">
                <el-option
                  v-for="item in codes.setfelRol"
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
                />
              </c-select>
            </el-form-item>
          </c-col>
          <c-col :span="8">
            <el-form-item label="优惠金额">
              <c-input v-model="formData.dctamt" />
            </el-form-item>
          </c-col>
          <c-col :span="8">
            <el-form-item label="优惠后实收费用金额">
              <c-input v-model="formData.amt" />
            </el-form-item>
          </c-col>
        </c-col>
        <c-col>
          <el-form-item
            :label="
              idx == 0
                ? 'Per mile fee depending on duration'
                : 'A fixed amount per unit is caculated. This type will, for example, be used for correspondence charges.'
            "
          />
        </c-col>
        <c-col :span="12">
          <c-col v-if="idx == 0">
            <c-col>
              <el-form-item label="千分率">
                <c-input v-model="formData.wrkfec.ratcal" style="width: 200px" />
              </el-form-item>
            </c-col>
            <c-col>
              <el-form-item label="最小值">
                <c-select v-model="formData.wrkfec.mincur" style="width: 200px">
                  <el-option
                    v-for="item in codes.cur"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  />
                </c-select>
                <!-- v-model="formData.fecp1.fec.minamt" -->
                <c-input
                  style="width: 200px"
                  v-model="formData.wrkfec.minamt"
                />
                <!-- <c-input
                  style="width: 200px"
                  v-model="formData.wrkfec.minfcc"
                /> -->
              </el-form-item>
            </c-col>
            <c-col>
              <el-form-item label="最大值">
                <c-select v-model="formData.wrkfec.maxcur" style="width: 200px">
                  <el-option
                    v-for="item in codes.cur"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  />
                </c-select>

                <c-input
                  style="width: 200px;"
                  v-model="formData.wrkfec.maxamt"
                />
                <!-- <c-input
                  style="width: 200px"
                  v-model="formData.wrkfec.maxfcc"
                /> -->
              </el-form-item>
            </c-col>
            <c-col>
              <el-form-item>
                <c-checkbox label="每个计费区间与最大值/最小值比较" v-model="formData.fecp1.jnwshx" />
              </el-form-item>
            </c-col>
          </c-col>
          <c-col v-else>
            <el-form-item label="Amount">
              <c-select v-model="formData.wrkfec.ratcur">
                <el-option
                  v-for="item in codes.cur"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </c-select>
              <c-input style="width:200px;" v-model="formData.wrkfec.untamt">
              </c-input>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item label="销项税">
              <c-input
                v-model="formData.fecp1.taxrat"
                disabled
                style="width: 200px"
              />
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item label="客户属性">
              <c-input
                v-model="formData.fecp1.custyp"
                disabled
                style="width: 200px"
              />
            </el-form-item>
          </c-col>
        </c-col>
        <c-col v-if="idx == 0" :span="12">
          <el-form-item label="Caiculation Base">
            <c-input
              v-model="formData.wrkfec.calcbs"
              disabled
              style="width: 200px"
            />
          </el-form-item>
          <br />
          <el-form-item label="Calc.Period">
            <c-select v-model="formData.wrkfec.pertyp">
              <el-option
                v-for="item in codes.pertyp"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              />
            </c-select>
          </el-form-item>
          <br />
          <el-form-item label="Min.Periods">
            <c-input v-model="formData.wrkfec.permin" style="width: 200px" />
          </el-form-item>
          <br />
          <el-form-item label="Rates to Apply per Period Tier" />
          <br />
          <el-form-item label="from Perimod">
            <c-input style="width: 200px" v-model="formData.wrkfec.perbegtr2" />
            <c-input
              
              style="width: 200px; margin-left: 50px"
              v-model="formData.wrkfec.perrattr2"
            />
          </el-form-item>
          <el-form-item label="from Perimod">
            <c-input
              
              style="width: 200px"
              v-model="formData.wrkfec.perbegtr3"
            />
            <c-input
              disabled
              style="width: 200px; margin-left: 50px"
              v-model="formData.wrkfec.perrattr3"
            />
          </el-form-item>
          <el-form-item label="from Perimod">
            <c-input
              disabled
              style="width: 200px"
              v-model="formData.wrkfec.perbegtr4"
            />
            <c-input
              disabled
              style="width: 200px; margin-left: 50px"
              v-model="formData.wrkfec.perrattr4"
            />
          </el-form-item>
          <el-form-item label="from Perimod">
            <c-input
              disabled
              style="width: 200px"
              v-model="formData.wrkfec.perbegtr5"
            />
            <c-input
              disabled
              style="width: 200px; margin-left: 50px"
              v-model="formData.wrkfec.perrattr5"
            />
          </el-form-item>
        </c-col>
        <c-col>&nbsp;</c-col>
        <c-col :span="18" :offset="6">
          <el-form-item label="收费的说明信息">
            <c-input
              v-model="formData.inftxt"
              disabled
              rows="10"
              type="textarea"
              style="width: 500px;"
            />
          </el-form-item>
        </c-col>
      </el-form>
      <c-col :span="4" :offset="8">
        <c-button type="primary" @click="saveDialog">
          确 定
        </c-button>
      </c-col>
      <c-col :span="6">
        <c-button @click="visiable = false">取 消</c-button>
      </c-col>
      <c-col>&nbsp;</c-col>
    </c-col>
  </el-dialog>
</template>

<script>
export default {
  props: {
    model: Object,
    idx: Number,
    codes: Object,
  },
  data() {
    return {
      formData: {},
      visiable: false,
    };
  },
  methods: {
    saveDialog() {
      this.model.setmod.setfeg.setfel.splice(this.idx, 1, this.formData);
      this.visiable = false;
    },
    beforeClose(done) {
      this.visiable = false;
      done()
    }
  },
};
</script>

<style></style>