yos_web/src/HDrpManagement/serveBill/components/add.vue

<template>
  <div>
    <el-button size="small" type="primary" @click="dialogFormVisible = true">{{
      $t("新 建")
    }}</el-button>
    <el-drawer
      :title="$t(`新 建`)"
      append-to-body
      :show-close="false"
      :visible.sync="dialogFormVisible"
      :wrapperClosable="false"
      size="50%"
    >
      <div slot="title" style="font-size: 15px">{{ $t("新增服务申请单") }}</div>
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form
            :model="form"
            :rules="rules"
            ref="form"
            :label-width="tool.onlyZh('140px')"
            label-position="right"
            size="mini"
          >
            <el-col :span="12">
              <el-form-item :label="$t(`企业名称`)+':'" prop="enterprisename">
                <selectAgent
                  :customParam="agentParam"
                  ref="agent"
                  @selectRow="agentChange"
                  qiyi="企业名称"
                >
                  <el-input
                    :disabled="
                      accountInfo.usertype != 1 && accountInfo.usertype != 0
                    "
                    readonly
                    type="text"
                    slot="input"
                    size="mini"
                    @focus="$refs.agent.visible = true"
                    v-model="form.enterprisename"
                  ></el-input>
                </selectAgent>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t(`服务类型`)" prop="servicetype">
                <el-select
                  class="inline-24"
                  v-model="form.servicetype"
                  @change="classChange"
                  :placeholder="$t(`请选择状态`)"
                  size="mini"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in serveClassList"
                    :key="index"
                    :label="$t(item.value)"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :span="12"
              v-if="form.servicetype == '售中' || form.servicetype == '售后'"
            >
              <el-form-item :label="$t(`订单号`)+':'" prop="sonum">
                <selectOrder
                  :id="form.sys_enterpriseid"
                  ref="order"
                  @selectRow="orderChange"
                >
                  <el-input
                    readonly
                    :disabled="!form.sys_enterpriseid"
                    type="text"
                    slot="input"
                    size="mini"
                    @focus="
                      $refs.order.listData(), ($refs.order.visible = true)
                    "
                    v-model="form.sonum"
                  ></el-input>
                </selectOrder>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t(`单据日期`)" prop="billdate">
                <el-date-picker
                  v-model="form.billdate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('选择日期')"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('省市县')" prop="province">
                <el-cascader :placeholder="$t('请选择')"
                  size="mini"
                  v-model="form.province"
                  :options="basicData.data().areaData"
                  ref="cascader"
                >
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('地址')" prop="address">
                <el-input
                  v-model="form.address"
                  :placeholder="$t(`请输入地址`)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t(`现场联系人`)" prop="scenecontact">
                <el-input
                  v-model="form.scenecontact"
                  :placeholder="$t(`请输入现场联系人`)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t(`身份备注`)" prop="scenecontactrole">
                <el-input
                  v-model="form.scenecontactrole"
                  :placeholder="$t(`请输入身份备注`)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t(`现场联系人手机号`)"
                prop="scenecontactphonenumber"
              >
                <el-input
                  v-model="form.scenecontactphonenumber"
                  :placeholder="$t(`请输入现场联系人手机号`)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t(`应用系统`)" prop="class1">
                <el-select
                  class="inline-24"
                  v-model="form.class1"
                  @change="classChange"
                  :placeholder="$t(`请选择应用系统`)"
                  size="mini"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in systemapp"
                    :key="index"
                    :label="$t(item.value)"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t(`客诉大类`)" prop="class2">
                <el-select
                  class="inline-24"
                  v-model="form.class2"
                  @change="classChange"
                  :placeholder="$t(`请选择客诉大类`)"
                  size="mini"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in customerclass"
                    :key="index"
                    :label="$t(item.value)"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t(`问题描述`)" prop="reason">
                <el-input
                  v-model="form.reason"
                  :placeholder="$t(`请输入问题描述`)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t(`服务开始时间`)" prop="begdate">
                <el-date-picker
                  v-model="form.begdate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('选择日期')"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t(`服务结束时间`)" prop="enddate">
                <el-date-picker
                  v-model="form.enddate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('选择日期')"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('备注')" prop="remarks">
                <el-input
                  type="textarea"
                  v-model="form.remarks"
                  :placeholder="$t(`请输入备注`)"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button
          size="small"
          @click="dialogFormVisible = false"
          class="normal-btn-width"
          >{{ $t("取 消") }}</el-button
        >
        <el-button
          size="small"
          type="warning"
          @click="onSubmit"
          class="normal-btn-width btn-warning"
          >{{ $t("确 定") }}</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script>
import selectAgent from "@/template/selectAgent/index";
import selectOrder from "./selectOrder";
import { log } from "@antv/g2plot/lib/utils";

export default {
  name: "add",
  components: { selectAgent, selectOrder },
  data() {
    return {
      dialogFormVisible: false,
      serveClassList: [],
      customerclass: [],
      systemapp: [],
      accountInfo: JSON.parse(window.sessionStorage.getItem("accountinfo")),
      form: {
        sa_serviceorderid: 0, //sa_brandid<=0时 为新增
        servicetype: "",
        sa_orderid: 0,
        sonum: "",
        sys_enterpriseid: "",
        enterprisename: "",
        remarks: "",
        class1: "",
        class2: "",
        reason: "",
        province: "",
        city: "",
        county: "",
        address: "",
        scenecontact: "",
        scenecontactrole: "",
        scenecontactphonenumber: "",
        billdate: `${new Date().getFullYear()}-${
          new Date().getMonth() + 1
        }-${new Date().getDate()}`,
        begdate: "",
        enddate: "",
      },
      rules: {
        servicetype: [
          {
            required: true,
            message: this.$t("请选择服务类型"),
            trigger: "change",
          },
        ],
        enterprisename: [
          {
            required: true,
            message: this.$t("请选择经销商"),
            trigger: "change",
          },
        ],
        sonum: [
          { required: true, message: this.$t("请选择订单"), trigger: "change" },
        ],
        scenecontactphonenumber: [
          {
            required: true,
            message: this.$t("请填写手机号码"),
            trigger: "blur",
          },
          {
            pattern: /^1[3-9][0-9]\d{8}$/,
            message: this.$t("请输入正确手机号码"),
            trigger: "blur",
          },
        ],
        province: [
          {
            required: true,
            message: this.$t("请选择省市县"),
            trigger: "change",
          },
        ],
        address: [
          { required: true, message: this.$t("请填写地址"), trigger: "blur" },
        ],
        scenecontact: [
          { required: true, message: this.$t("现场联系人"), trigger: "blur" },
        ],
        scenecontactrole: [
          { required: true, message: this.$t("身份备注"), trigger: "blur" },
        ],
        class1: [
          { required: true, message: this.$t("应用系统"), trigger: "change" },
        ],
        class2: [
          { required: true, message: this.$t("客诉大类"), trigger: "change" },
        ],
        reason: [{ required: true, message: this.$t("问题描述"), trigger: "blur" }],
        begdate: [
          {
            required: true,
            message: this.$t("服务开始时间"),
            trigger: "change",
          },
        ],
        enddate: [
          {
            required: true,
            message: this.$t("服务结束时间"),
            trigger: "change",
          },
        ],
      },
      agentParam: {
        id: 20220920083901,
        content: {
          pageNumber: 1,
          pageSize: 20,
          where: {
            condition: "",
            type: 9,
          },
        },
      },
    };
  },
  methods: {
    onSubmit() {
      console.log(this.form);
      this.$refs["form"].validate(async (valid) => {
        if (!valid) return false;
        if (this.form.province) {
          this.form.city = this.form.province[1];
          this.form.county = this.form.province[2];
          this.form.province = this.form.province[0];
        }
        const res = await this.$api.requested({
          id: "20230206091403",
          version: 1,
          content: this.form,
        });
        this.tool.showMessage(res, () => {
          this.$emit("onSuccess");
          this.$refs["form"].resetFields();
          this.dialogFormVisible = false;
          this.$store.dispatch("changeDetailDrawer", true);
          this.$router.push({
            path: "/serveBillDetail",
            query: {
              id: res.data.sa_serviceorderid,
              rowindex: res.data.rowindex,
            },
          });
        });
      });
    },
    async getServeClass() {
      let res = await this.$api.requested({
        id: 20230206112003,
        content: {},
      });
      this.serveClassList = res.data;
      console.log(this.serveClassList);
    },
    orderChange(data) {
      console.log(data);

      this.form.sa_orderid = data.sa_orderid;
      this.form.sonum = data.sonum;
      this.$refs.order.visible = false;
      console.log(this.form.sonum);
    },
    agentChange(data) {
      console.log(data);
      this.form.sys_enterpriseid = data.sys_enterpriseid;
      this.form.enterprisename = data.enterprisename;
      this.$refs.agent.visible = false;

      this.form.sa_orderid = 0;
      this.form.sonum = "";
    },
    classChange() {
      if (this.form.servicetype == "售中" || this.form.servicetype == "售后") {
        this.$refs.agent.param.content.sys_enterpriseid =
          this.form.sys_enterpriseid;
      }
    },
  },
  async created() {
    this.getServeClass();
    const res = await this.$store.dispatch("optiontypeselect", "customerclass");
    this.customerclass = res.data;
    const res1 = await this.$store.dispatch("optiontypeselect", "systemapp");
    this.systemapp = res1.data;
    console.log(this.customerclass, this.systemapp);
  },
  mounted() {
    this.form.sys_enterpriseid =
      this.accountInfo.usertype != 1 && this.accountInfo.usertype != 0
        ? this.accountInfo.enterprise.sys_enterpriseid
        : "";
    this.form.enterprisename =
      this.accountInfo.usertype != 1 && this.accountInfo.usertype != 0
        ? this.accountInfo.enterprise.enterprisename
        : "";
  },
};
</script>

<style scoped>
.dialog-footer {
  margin-top: 0;
}
.el-select,
.el-input,
.el-cascader {
  width: 100% !important;
}
</style>