yos_web/src/Form/serviceWorkItem/add.vue

<template>
  <div>
    <el-button
      :size="btn_size ? btn_size : 'small'"
      type="primary"
      @click="show"
    >
      {{ title_btn ? $t(title_btn) : $t("新 建") }}
    </el-button>
    <el-drawer
      :title="title_drawer ? $t(title_drawer) : $t(`新建服务工作项`)"
      :visible.sync="dialogFormVisible"
      direction="rtl"
      append-to-body
      :show-close="false"
      size="700px"
      @close="onCancel"
    >
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form
            :model="form"
            :rules="rules"
            ref="form"
            :label-width="tool.onlyZh('170px')"
            label-position="right"
            size="mini"
          >
            <el-col :span="24">
              <el-form-item :label="$t('工作名：')" prop="workname">
                <el-input
                  v-model="form.workname"
                  :placeholder="$t('请输入工作名')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <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-col :span="24">
              <el-form-item :label="$t('上传附件：')" prop="fileupload">
                <el-radio-group v-model="form.fileupload">
                  <el-radio :label="11">{{ $t("必填") }}</el-radio>
                  <el-radio :label="1">{{ $t("非必填") }}</el-radio>
                  <el-radio :label="0">{{ $t("无") }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('是否添加物料：')" prop="additem">
                <el-radio-group v-model="form.additem">
                  <el-radio :label="11">{{ $t("必填") }}</el-radio>
                  <el-radio :label="1">{{ $t("非必填") }}</el-radio>
                  <el-radio :label="0">{{ $t("无") }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('上传全景影像：')" prop="panorama">
                <el-radio-group v-model="form.panorama">
                  <el-radio :label="11">{{ $t("必填") }}</el-radio>
                  <el-radio :label="1">{{ $t("非必填") }}</el-radio>
                  <el-radio :label="0">{{ $t("无") }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('是否合格：')" prop="passcheck">
                <el-radio-group v-model="form.passcheck">
                  <el-radio :label="11">{{ $t("必填") }}</el-radio>
                  <el-radio :label="1">{{ $t("非必填") }}</el-radio>
                  <el-radio :label="0">{{ $t("无") }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('是否客户签名：')" prop="signature">
                <el-radio-group v-model="form.signature">
                  <el-radio :label="11">{{ $t("必填") }}</el-radio>
                  <el-radio :label="1">{{ $t("非必填") }}</el-radio>
                  <el-radio :label="0">{{ $t("无") }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                :label="$t('内容是否需要验证表单：')"
                prop="formcheck"
              >
                <el-radio-group v-model="form.formcheck">
                  <el-radio :label="1">{{ $t("是") }}</el-radio>
                  <el-radio :label="0">{{ $t("否") }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                :label="$t('是否必填服务节点：')"
                prop="servicenode"
              >
                <el-radio-group v-model="form.servicenode">
                  <el-radio :label="1">{{ $t("是") }}</el-radio>
                  <el-radio :label="0">{{ $t("否") }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('是否施工日志汇报：')" prop="logreport">
                <el-radio-group v-model="form.logreport">
                  <el-radio :label="1">{{ $t("是") }}</el-radio>
                  <el-radio :label="0">{{ $t("否") }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="onCancel" class="normal-btn-width">{{
          $t("取 消")
        }}</el-button>
        <el-button
          :loading="loading"
          class="normal-btn-width"
          size="small"
          :type="title_btn == '编辑' ? 'warning' : 'primary'"
          @click="onSubmit"
          >{{ title_btn == "编辑" ? $t("保 存") : $t("确 定") }}
        </el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  name: "add",
  props: {
    btn_size: String,
    title_btn: String,
    title_drawer: String,
    data: Object,
  },
  data() {
    return {
      loading: false,
      dialogFormVisible: false,
      currentData: {},
      form: {
        sc_workpresetid: 0,
        workname: "",
        remarks: "",
        fileupload: 0, //附件上传,0不需要 1可上传 11必须上传
        signature: 0, //客户签名,0不需要 1可填写 11必须填写
        additem: 0, //物料添加,0不添加 1添加 11必须添加
        passcheck: 0, //合格确认,0不需要 1需要 11必须
        formcheck: 0, //表单验证,0 不需要 1 需要
        panorama: 0, //全景影像,0不需要 1可上传 11必须上传
        servicenode: 0, //服务节点,0 不需要 1 需要
        logreport: 0, //是否施工日志汇报,0 不需要 1 需要
      },
      rules: {
        workname: [
          {
            required: true,
            message: this.$t("请输入工作名"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //初始化
    show() {
      this.dialogFormVisible = true;
      if (this.title_btn == "编辑") {
        this.form = Object.assign({}, this.form, this.data);
      }
    },
    onSubmit() {
      this.$refs["form"].validate(async (valid) => {
        if (!valid) return false;
        this.loading = true;
        const res = await this.$api.requested({
          id: "2026051416454302",
          content: this.form,
        });
        if (res.code === 0) {
          this.loading = false;
          this.$message.error(
            res.msg || (this.title_btn == "编辑" ? "编辑失败" : "新建失败")
          );
          return;
        }
        this.loading = false;
        this.$message.success(
          this.title_btn == "编辑" ? "编辑成功" : "新建成功"
        );
        this.$emit("onSuccess");
        this.$refs["form"].resetFields();
        this.dialogFormVisible = false;
        setTimeout(() => {
          this.$router.push({
            path: "/serviceWorkItemDetail",
            query: {
              id: res.data.sc_workpresetid,
              rowindex: res.data.rowindex,
            },
          });
          this.$store.dispatch("changeDetailDrawer", true);
        }, 500);
      });
    },
    onCancel() {
      this.dialogFormVisible = false;
      this.$refs["form"].resetFields();
    },
  },
};
</script>