green-valley-admin/src/components/innovativeService/innovativeServiceEdit.vue

<template>
  <div class="d-flex flex-wrap pb-3">
    <!-- 编辑 -->
    <a-modal
      :mask-closable="false"
      @cancel="$emit('closeModal')"
      destroy-on-close
      footer
      title="修改服务"
      v-model="editVisible"
      width="700px"
    >
      <a-form :form="form" @submit="handleSubmit">
        <!-- 服务名称 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="服务名称"
        >
          <a-input class="ml-3" placeholder="服务名称" v-model="serviceName" />
        </a-form-item>
        <!-- 服务简介 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="服务简介"
        >
          <a-textarea class="ml-3" placeholder="服务简介" v-model="intro" />
        </a-form-item>
        <!-- 服务内容 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="服务内容"
        >
          <a-textarea class="ml-3" placeholder="服务内容" v-model="content" />
        </a-form-item>
        <!-- 服务排序 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="服务排序"
        >
          <a-input-number class="ml-3" v-model="orders" />
        </a-form-item>
        <!-- 图片 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="图片"
        >
          <a-upload
            :action="upload"
            :before-upload="beforeUpload"
            @change="handleChange"
            class="ml-3"
            list-type="picture"
            name="files"
          >
            <a-button v-show="fileList.length - 0 === 0">
              <a-icon type="upload" />选择图片
            </a-button>
          </a-upload>
        </a-form-item>
        <!-- 服务状态 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="服务状态"
        >
          <a-select
            @change="getUse($event, 'recStatus')"
            class="ml-3"
            default-value="正常"
            style="width: 100%"
          >
            <a-select-option
              :key="index"
              :value="index"
              v-for="(item, index) in recStatusList"
            >{{ item }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="d-flex flex-row-reverse">
          <a-button @click="$emit('closeModal')" class="mr-3">取消</a-button>
          <a-button class="white--text" html-type="submit" type="primary">保存</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { upload, updateService } from 'config/api';

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } };

export default {
  name: 'RDMemberEdit',
  props: {
    editVisible: { type: Boolean, default: false },
    editData: { type: Object, default: () => {} },
    contents: { type: String, default: '' },
  },
  data() {
    return {
      formItemLayout,
      tailItemLayout,
      form: this.$form.createForm(this, { name: 'r-d-member-add' }),
      upload: upload,
      fileList: [],
      //限制文件上传的格式和大小
      beforeUpload: file => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
          this.$message.error('仅支持 JPG/PNG 格式的图片!');
        }
        return isJpgOrPng;
      },
      recStatusList: ['正常', '禁用'],
      serviceTypeList: ['创新平台', '孵化平台', '产业平台'],
      serviceName: '',
      content: '',
      intro: '',
      orders: '',
      picId: '',
      recStatus: 0,
      serviceType: 0,
    };
  },
  watch: {
    editData(val) {
      console.log(val);
    },
  },
  methods: {
    // 上传图片事件
    handleChange(info) {
      // this.fileList = fileList;
      console.log(info);
      if (info.file.status === 'done') {
        this.fileList.push(info.file.response.data[0].id);
      } else if (info.file.status === 'removed') {
        this.fileList = info.fileList;
      }
    },
    changeIpt(e, str) {
      this[str] = e.target.value;
    },
    getUse(e, str) {
      this[str] = e;
    },
    // 提交表单
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          try {
            const params = {
              param: {
                id: this.editData.id,
                name: this.serviceName ? this.serviceName : this.editData.name,
                content: this.content ? this.content : this.contents === '暂无内容' ? '' : this.contents,
                intro: this.intro ? this.intro : this.editData.intro,
                orders: this.orders ? this.orders : this.editData.orders,
                picId: this.picId ? this.picId : this.editData.picId,
                recStatus: this.recStatus,
                serviceType: 1,
              },
            };
            const res = await updateService(params);
            const { data, msg, code } = res.data;
            if (code === 200) {
              this.$emit('getData');
              this.$emit('closeModal');
              this.$message.success('修改成功');
            } else {
              this.$message.error('修改失败');
            }
          } catch (error) {
            this.$message.error(error);
          }
        }
      });
    },
  },
};
</script>

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