shenze-sysMan/src/views/apkManage/add.vue

<template>
  <div class="addIdx">
    <s-header :name="titleName" :noback="false"></s-header>
    <van-form show-error-message @submit="onSubmit">
      <div class="cust_vantBorder">
        <div class="kBordBott">
          <van-field type="number" colon :border="false" required v-model="cofficentForm.version" clearable name="version"
            :label="$t('apkManage.add.version')" :placeholder="$t('apkManage.add.versionPlace')" :rules="[
              {
                required: true,
                message: $t('apkManage.add.versionPlace'),
              },
            ]" />
        </div>
        <div class="kBordBott">
          <van-field colon :border="false" required v-model="cofficentForm.versionName" clearable name="versionName"
            :label="$t('apkManage.add.versionName')" :placeholder="$t('apkManage.add.versionNamePlace')" :rules="[
              {
                required: true,
                message: $t('apkManage.add.versionNamePlace'),
              },
            ]" />
        </div>
        <div class="kBordBott">
          <van-field colon :border="false" required @click-input="busiInpClk" readonly clearable
            v-model="cofficentForm.modelName" name="modelName" :label="$t('apkManage.add.model')"
            :placeholder="$t('apkManage.add.modelPlace')" :rules="[
              {
                required: true,
                message: $t('apkManage.add.modelPlace'),
                trigger: ['onChange', 'onSubmit'],
              },
            ]">
            <template #right-icon>
              <div class="l-flex-RC">
                <van-icon v-if="cofficentForm.modelName" @click="
                  cofficentForm.modelName = '';
                cofficentForm.model = '';
                " class="o-mr-6" name="clear" />
                <van-icon @click="busiInpClk" name="arrow-down" />
              </div>
            </template>
          </van-field>
        </div>
      </div>
      <div class="kBordBott">
        <van-field colon :border="false" required clearable name="isForce" :label="$t('apkManage.add.forceUpdate')"
          :placeholder="$t('apkManage.add.forceUpdatePlace')" :rules="[
            {
              required: true,
              message: $t('apkManage.add.forceUpdatePlace'),
              trigger: ['onChange', 'onSubmit'],
            },
          ]">
          <template #input>
            <van-radio-group v-model="cofficentForm.isForce" direction="horizontal">
              <van-radio name="true">{{ $t('apkManage.add.yes') }}</van-radio>
              <van-radio name="false">{{ $t('apkManage.add.no') }}</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </div>
      <div class="cust_vantBorder">
        <div class="kBordBott">
          <van-field type="number" colon :border="false" required v-model="cofficentForm.apkSize" clearable name="apkSize"
            :label="$t('apkManage.add.apkSize')" :placeholder="$t('apkManage.add.apkSizePlace')" :rules="[
              {
                required: true,
                message: $t('apkManage.add.apkSizePlace'),
              },
            ]" />
        </div>
        <div class="kBordBott">
          <van-field colon :border="false" required v-model="cofficentForm.downloadUrl" clearable name="downloadUrl"
            :label="$t('apkManage.add.downloadLink')" :placeholder="$t('apkManage.add.downloadLinkPlace')" :rules="[
              {
                required: true,
                message: $t('apkManage.add.downloadLinkPlace'),
              },
            ]" />
        </div>
        <div class="kBordBott">
          <van-field colon :border="false" required v-model="cofficentForm.versionInfo" clearable name="versionInfo"
            :label="$t('apkManage.add.versionIntroduction')" :placeholder="$t('apkManage.add.versionIntroductionPlace')"
            :rules="[
              {
                required: true,
                message: $t('apkManage.add.versionIntroductionPlace'),
              },
            ]" />
        </div>
      </div>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          {{ titleName }}
        </van-button>
      </div>
    </van-form>
    <!-- 型号选择框 -->
    <van-popup v-model:show="busiPopShow" position="bottom">
      <van-picker v-model="busiDefaIdx" :title="$t('apkManage.add.version')" :columns="busiPopList"
        :columns-field-names="busiPopFieldName" @confirm="busiPopConfirm" @cancel="busiPopShow = false" />
    </van-popup>
  </div>
</template>

<script>
// 导入接口
// 导入接口
import { Api_postAddApk, Api_postUpdateApk } from "@/service/apkManage";
import sHeader from "@/components/SimpleHeader";
import { reactive, onMounted, ref } from "vue";
import { showToast } from "vant";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { styleUrl } from "../../common/js/utils";
export default {
  components: { sHeader },
  setup() {
    const { t } = useI18n();
    const titleName = ref(t("apkManage.add.addTitle"));
    const route = useRoute();
    onMounted(() => {
      // 加载样式
      styleUrl('apkManage');
      const row = route.query.row ? JSON.parse(route.query.row) : {};
      // 看路径有没有id，有就是编辑
      if (row.id) {
        titleName.value = t("apkManage.add.editTitle");
        cofficentForm.value = row;
        // 转换成字符串
        cofficentForm.value.isForce = cofficentForm.value.isForce + '';
        cofficentForm.value.modelName = row.model;
        busiDefaIdx.value = [row.model];
      }
    });
    // 表单参数
    let cofficentForm = ref({
      apkSize: "",
      downloadUrl: "",
      isForce: "",
      version: "",
      versionInfo: "",
      versionName: "",
      model: "",
      modelName: "",
    });
    // 路由
    const router = useRouter();
    // 点击提交
    const onSubmit = async () => {
      // 如果是编辑
      let res;
      if (cofficentForm.value.id) {
        res = await Api_postUpdateApk(cofficentForm.value);
      } else {
        res = await Api_postAddApk(cofficentForm.value);
      }
      const { data } = res;
      if (data.code === "00000") {
        showToast(data.message);
        setTimeout(() => {
          router.back();
        }, 500);
      }
    };
    // 型号选择框框
    const busiDefaIdx = ref(["301ch"]);
    const busiPopShow = ref(false);
    const busiPopList = reactive([
      {
        name: "301ch",
        id: "301ch",
      },
      {
        name: "301en",
        id: "301en",
      },
      {
        name: "301enOffline",
        id: "301enOffline",
      },
      {
        name: "320ch",
        id: "320ch",
      },
      {
        name: "320en",
        id: "320en",
      },
      {
        name: "320enOffline",
        id: "320enOffline",
      },
      {
        name: "280ch",
        id: "280ch",
      },
      {
        name: "280en",
        id: "280en",
      },
      {
        name: "P10ch",
        id: "P10ch",
      },
      {
        name: "P10en",
        id: "P10en",
      },
      {
        name: "P20ch",
        id: "P20ch",
      },
      {
        name: "P20en",
        id: "P20en",
      },
      {
        name: "P30ch",
        id: "P30ch",
      },
      {
        name: "P30en",
        id: "P30en",
      },
      {
        name: "SI320ch",
        id: "SI320ch",
      },
      {
        name: "SI320en",
        id: "SI320en",
      },
      {
        name: "SBC320ch",
        id: "SBC320ch",
      },
      {
        name: "SBC320en",
        id: "SBC320en",
      },
      {
        name: "lua",
        id: "lua",
      },
    ]);
    const busiPopFieldName = reactive({
      text: "name",
      value: "id",
    });
    // 点击型号
    const busiInpClk = () => {
      busiPopShow.value = true;
    };
    const busiPopConfirm = ({ selectedOptions }) => {
      cofficentForm.value.model = selectedOptions[0].id;
      cofficentForm.value.modelName = selectedOptions[0].name;
      busiPopShow.value = false;
    };
    return {
      onSubmit,
      cofficentForm,
      titleName,
      busiPopShow,
      busiPopList,
      busiPopFieldName,
      busiInpClk,
      busiPopConfirm,
      busiDefaIdx
    };
  },
};
</script>

<style lang="less" scoped></style>