item-management-web/src/views/item/detailReadonly.vue

<template>
  <div class="app-container">
    <div class="title-container">
      <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
    </div>
    <y-detail-page-layout :edit-status="false" v-loading="vLoading" element-loading-text="处理中。。。">
      <div style="padding-top: 30px;">
        <el-tabs v-model="activeName">
          <el-tab-pane label="项目信息" name="first">
            <el-form ref="postForm" :model="postForm" class="form-container">
              <div class="createPost-main-container">
                <div class="postInfo-container">
                  <div style="margin-bottom: 30px">
                    <h3 class="title">
                      <div class="avatar-wrapper icon-title">基</div>
                      <div class="icon-info">基本信息</div>
                    </h3>
                  </div>
                  <el-row>
                    <el-col :xs="24" :sm="12" :lg="6" :span="6">
                      <el-form-item
                        label="项目名称："
                        prop="name"
                        :rules="{required: true, message: '请输入项目名称', trigger: 'blur'}"
                        label-width="120px"
                        class="postInfo-container-item"
                      >
                        <el-input v-model="postForm.name" class="filter-item"/>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="6" :span="6">
                      <el-form-item
                        label="事业部流水号："
                        prop="businessNo"
                        :rules="{required: true, message: '请输入事业部流水号', trigger: 'blur'}"
                        label-width="150px"
                        class="postInfo-container-item"
                      >
                        <el-input v-model="postForm.businessNo" class="filter-item"/>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="6" :span="6">
                      <el-form-item
                        label="项目编号："
                        prop="oaNo"
                        :rules="{required: true, message: '项目编号', trigger: 'blur'}"
                        label-width="150px"
                        class="postInfo-container-item"
                      >
                        <el-input v-model="postForm.oaNo" class="filter-item"/>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="6" :span="6">
                      <el-form-item
                        label="所属部门："
                        prop="departmentId"
                        :rules="{required: true, message: '所属部门', trigger: 'blur'}"
                        label-width="150px"
                        class="postInfo-container-item"
                      >
                        <el-select
                          v-model="postForm.departmentId"
                          placeholder=""
                          clearable
                          filterable
                          class="filter-item"
                          style=" width: 100%"
                        >
                          <el-option
                            v-for="item in departmentsOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="6" :span="6">
                      <el-form-item
                        label="业务来源："
                        prop="businessSource"
                        :rules="{required: true, message: '请输入业务来源', trigger: 'blur'}"
                        label-width="120px"
                        class="postInfo-container-item"
                      >
                        <el-input v-model="postForm.businessSource" class="filter-item"/>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="6" :span="6">
                      <el-form-item
                        label="委托单位："
                        prop="clientUnit"
                        :rules="{required: true, message: '请输入委托单位', trigger: 'blur'}"
                        label-width="120px"
                        class="postInfo-container-item"
                      >
                        <el-input v-model="postForm.clientUnit" class="filter-item"/>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="6" :span="6">
                      <el-form-item
                        label="委托人："
                        prop="clientName"
                        :rules="{required: true, message: '请输入委托人', trigger: 'blur'}"
                        label-width="120px"
                        class="postInfo-container-item"
                      >
                        <el-input v-model="postForm.clientName" class="filter-item"/>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="6" :span="6">
                      <el-form-item
                        label="客户经理："
                        prop="clientManager"
                        :rules="{required: true, message: '请输入客户经理', trigger: 'blur'}"
                        label-width="120px"
                        class="postInfo-container-item"
                      >
                        <el-input v-model="postForm.clientManager" class="filter-item"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :xs="24" :sm="12" :lg="6" :span="6">
                      <el-form-item
                        label="联系方式："
                        prop="mobile"
                        :rules="{required: true, message: '请输入联系方式', trigger: 'blur'}"
                        label-width="120px"
                        class="postInfo-container-item"
                      >
                        <el-input v-model="postForm.mobile" class="filter-item"/>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="6" :span="6">
                      <el-form-item
                        label="技术负责人："
                        prop="skiller"
                        :rules="{required: true, message: '请输入技术负责人', trigger: 'blur'}"
                        label-width="120px"
                        class="postInfo-container-item"
                      >
                        <el-input v-model="postForm.skiller" class="filter-item"/>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="6" :span="6">
                      <el-form-item label="签订日期：" label-width="120px" class="postInfo-container-item">
                        <el-date-picker
                          v-model="postForm.signDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          style="width: 100%"
                          placeholder="选择日期"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="6" :span="6">
                      <el-form-item
                        label="付款方式："
                        prop="paymentMethod"
                        :rules="{required: true, message: '请输入付款方式', trigger: 'blur'}"
                        label-width="120px"
                        class="postInfo-container-item"
                      >
                        <el-input v-model="postForm.paymentMethod" class="filter-item"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :xs="24" :sm="12" :lg="6" :span="6">
                      <el-form-item
                        label="合同金额："
                        prop="amount"
                        :rules="{required: true, message: '请输入合同金额', trigger: 'blur'}"
                        label-width="120px"
                        class="postInfo-container-item"
                      >
                        <el-input v-model="postForm.amount" class="filter-item"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <div style="margin-top:20px;width:100%;height:1px;background:rgba(242,242,242,1);"/>
                  <div style="margin-bottom: 30px">
                    <h3 class="title">
                      <div class="avatar-wrapper icon-title" style="background:rgba(255,175,41,1)">人</div>
                      <div class="icon-info">人员配置</div>
                    </h3>
                  </div>
                </div>
                <el-transfer
                  filterable
                  :filter-method="filterMethod"
                  filter-placeholder="请输入姓名"
                  v-model="userIds"
                  :titles="['所有员工', '所选员工']"
                  :data="users"
                >
                </el-transfer>
              </div>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </y-detail-page-layout>
  </div>
</template>
<script>
  import Breadcrumb from '@/components/Breadcrumb'
  import YDetailPageLayout from '@/components/YDetailPageLayout/index_detail'

  export default {
    name: 'itemDetail',
    components: {
      Breadcrumb,
      YDetailPageLayout
    },
    data() {
      return {
        type: 'detail',
        postForm: {
          state: '进行中',
        },
        dataId: this.$route.query.id,
        activeName: 'first',
        vLoading: false,
        users:[],
        listQuery:{},
        userIds: [],
        filterMethod(query, item) {
          return item.label.indexOf(query) > -1;
        },
        departmentsOptions:[],
      }
    },
    created() {
      this.getAllUser();
      this.getDepartment();
      this.getDetail();
    },
    methods: {
      getAllUser() {
        const that = this;
        that.$api.user.simpleAll().then(data => {
          if (data.code === 200) {
            this.users = data.data.map((item) => {
              return {
                key: item.id,
                label: item.name,
              };
            });
          } else {
            this.$message({
              type: 'error',
              message: data.msg
            })
          }
        })
      },
      getDepartment(){
        this.$api.department.simpleAll().then(res => {
          this.departmentsOptions = res.data
        })
      },
      getDetail() {
        if (this.dataId) {
          this.$api.item.detail(this.dataId).then(res => {
            this.postForm = res.data;
            this.userIds = res.data.userIds.map(item => {
              return item
            })
          });
        }
      },
    }
  }
</script>
<style lang="scss" scoped>

</style>