cysci-website/src/views/adminCenter/company/policy_apply/order_apply.vue

<template>
  <div id="order_apply">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-col :span="24" class="top">
            <el-button type="primary" size="mini" @click="back">返回</el-button>
          </el-col>
          <el-col :span="24" class="down">
            <el-form :model="form" ref="form" label-width="100px" :rules="rules">
              <el-col :span="24" class="text">
                <el-form-item label="需求描述" prop="req_desc">
                  <el-input v-model="form.req_desc" type="textarea" maxlength="300" :autosize="{ minRows: 4, maxRows: 6 }" show-word-limit></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="text">
                <el-form-item label="订单名称" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="text">
                <!-- mechanism_id是服务端要的 -->
                <el-form-item label="服务机构" prop="mechanism_name">
                  <el-input v-model="form.mechanism_name" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="text">
                <el-form-item label="联系人" prop="mechanism_person">
                  <el-input v-model="form.mechanism_person"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="text">
                <el-form-item label="联系电话" prop="mechanism_mobile">
                  <el-input v-model="form.mechanism_mobile"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="text">
                <!-- user_id是要的 -->
                <el-form-item label="需方机构名称" prop="user_name">
                  <el-input v-model="form.user_name" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="text">
                <el-form-item label="联系人" prop="person">
                  <el-input v-model="form.person"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="text">
                <el-form-item label="联系电话" prop="phone">
                  <el-input v-model="form.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="text">
                <el-form-item label="电子邮箱" prop="email">
                  <el-input v-model="form.email"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" class="text">
                <el-form-item label="订单总金额" prop="money">
                  <el-input v-model.number="form.money" type="number" style="width: 98%"></el-input>
                  <span style="padding: 0 5px">元</span>
                </el-form-item>
              </el-col>
              <el-col :span="24" class="text">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="form.remark" type="textarea" maxlength="300" :autosize="{ minRows: 4, maxRows: 6 }" show-word-limit></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" class="formBtn">
                <el-button type="danger" size="mini" @click="back">取消添加</el-button>
                <el-button type="primary" size="mini" @click="onSubmit('form')">提交保存</el-button>
              </el-col>
            </el-form>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: policyApply } = createNamespacedHelpers('policyApply');
const { mapActions: policyOrder } = createNamespacedHelpers('policyOrder');
export default {
  name: 'order_apply',
  props: {},
  components: {},
  data: function () {
    return {
      form: {},
      apply: {},
      rules: {
        req_desc: [{ required: true, message: '请填写需求描述', trigger: 'blur' }],
        name: [{ required: true, message: '请填写订单名称', trigger: 'blur' }],
        mechanism_person: [{ required: true, message: '请填写服务机构联系人', trigger: 'blur' }],
        mechanism_mobile: [{ required: true, message: '请填写服务机构联系电话', trigger: 'blur' }],
        person: [{ required: true, message: '请填写需方机构联系人', trigger: 'blur' }],
        phone: [{ required: true, message: '请填写需方机构联系电话', trigger: 'blur' }],
        email: [{ required: true, message: '请填写需方机构电子邮箱', trigger: 'blur' }],
        money: [
          { required: true, message: '请填写订单总金额', trigger: 'blur' },
          { type: 'number', message: '请填写订单总金额', trigger: 'blur' },
        ],
        remark: [{ required: true, message: '请填写备注', trigger: 'blur' }],
      },
    };
  },
  created() {
    this.getApply();
  },
  methods: {
    ...policyApply(['fetch']),
    ...policyOrder(['create']),
    async getApply() {
      const res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        this.$set(this, `apply`, res.data);
        // 整理数据
        const policy = _.get(res.data, 'policy', {});
        const user = _.get(policy, 'user', {});
        let obj = {};
        // 服务机构数据
        const uArr = [
          { key: '_id', prop: 'mechanism_id' },
          { key: 'deptname', prop: 'mechanism_person' },
          { key: 'phone', prop: 'mechanism_mobile' },
          { key: 'deptname', prop: 'mechanism_name' },
        ];
        obj = this.setObj(user, uArr);
        // 用户数据
        const aArr = [
          { key: '_id', prop: 'user_id' },
          { key: 'name', prop: 'user_name' },
          { key: 'companyperson', prop: 'person' },
          { key: 'phone', prop: 'phone' },
          { key: 'email', prop: 'email' },
        ];
        obj = { ...obj, ...this.setObj(this.user, aArr) };
        obj.apply_id = this.id;
        obj.policy_user_type = _.get(policy, 'use_type');
        obj.policy_id = _.get(policy, '_id');
        this.$set(this, 'form', obj);
      }
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.toOrder();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    async toOrder() {
      const dup = _.cloneDeep(this.form);
      const res = await this.create(dup);
      if (this.$checkRes(res, '订单创建成功', res.errmsg || '订单创建失败')) {
        this.back();
      }
    },
    back() {
      this.$router.push({ path: '/adminCenter/company/policyApply/index' });
    },
    setObj(object, list) {
      const obj = {};
      for (const i of list) {
        const { key, prop } = i;
        obj[prop] = object[key];
      }
      return obj;
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
    id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.main {
  border-radius: 10px;
  box-shadow: 0 0 5px #cccccc;
  padding: 20px;
  .one {
    .top {
      text-align: right;
      margin: 0 0 15px 0;
    }
    .down {
      .text {
        border-bottom: 1px dashed #333;
      }
      /deep/.el-form-item {
        padding: 20px 10px;
        margin: 0;
      }
      /deep/.el-input__inner {
        border: 1px solid #333;
      }
      .formBtn {
        text-align: center;
        padding: 15px 0;
      }
    }
  }
}
.main:hover {
  box-shadow: 0 0 5px #409eff;
}
</style>