ohplay_system/src/views/operation/explain/detail.vue

<!-- 活动管理 说明书管理详情 -->
<template>
  <div class="app-container">
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-width="110px"
      :disabled="disabled"
    >
      <el-form-item label="说明书名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入协议名称" />
      </el-form-item>

      <el-form-item label="设备分类：" prop="categoryName">
        <el-select v-model="form.categoryName" placeholder="请选择设备分类">
          <el-option
            v-for="item in categoryOptions"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="二维码图片：" prop="codeUrl">
        <Upload
          listType="picture-card"
          :url="form.codeUrl"
          @upload="uploadCode($event, 'codeUrl')"
          :disabled="disabled"
        />
      </el-form-item>

      <el-form-item label="说明书文件：" prop="fileUrl">
        <el-row type="flex" justify="space-between">
          <el-col :span="16">
            <el-input
              v-model="form.fileUrl"
              placeholder="请输入或上传下载路径"
            />
          </el-col>
          <el-col :span="6">
            <Upload @upload="upload" style="float: right" />
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div class="form-btn">
      <el-button @click="cancel">取消</el-button>
      <el-button v-if="!disabled" type="primary" @click="getSubmit"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
import { add, detail, edit } from "@/api/operation/explain";
import { devCategoryMixin, devTypeMixin } from "@/mixin/index";

export default {
  mixins: [devTypeMixin, devCategoryMixin],
  data() {
    return {
      // 表单
      form: {
        fileUrl: "",
      },
      // 只读
      disabled: false,
      // 是否强制
      typeOptions: [
        {
          value: 0,
          label: "否",
        },
        {
          value: 1,
          label: "是",
        },
      ],
      // 校验
      rules: {
        name: [{ required: true, message: "请输入协议名称", trigger: "blur" }],
        categoryName: [
          { required: true, message: "请选择设备类型", trigger: "change" },
        ],
        codeUrl: [
          {
            required: true,
            message: "请上传二维码图片",
            trigger: "change",
          },
        ],
        fileUrl: [
          { required: true, message: "请上传下载路径", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {
    this.form.id = this.$route.query.id;
    this.form.state = this.$route.query.state;
    this.disabled = Boolean(this.$route.query.boolean == 1);
    this.getCateGory(1);
    this.getDetail();
  },

  methods: {
    // 详情
    getDetail() {
      if (this.form.state != 0) {
        detail(this.form.id).then((res) => {
          if (res.code === 0) {
            this.form = res.data;
          }
        });
      }
    },

    // 上传
    uploadCode(e) {
      this.form.codeUrl = e.file;
    },

    // 上传
    upload(e) {
      this.form.fileUrl = e.file;
    },

    // 取消
    cancel() {
      this.$tab.closeOpenPage("/operation/explain");
      // this.$router.go(-1);
    },

    // 确定
    getSubmit() {
      if (this.categoryOptions) {
        for (var i = 0; i < this.categoryOptions.length; i++) {
          if (this.form.categoryName === this.categoryOptions[i].label) {
            this.form.categoryId = this.categoryOptions[i].value;
            break;
          }
        }
      }

      if (this.$route.query.state == 0) {
        add(this.form).then((res) => {
          if (res.code === 0) {
            this.$message.success("添加成功！");
            this.cancel();
          }
        });
      } else {
        edit(this.form).then((res) => {
          if (res.code === 0) {
            this.$message.success("修改成功！");
            this.cancel();
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  width: 500px;
}
</style>