lc_finance/web/src/view/projectManage/projectApproval/projectApproval.vue

<template>
  <div>
    <div
      style="height: 300px"
      class="bg-white"
    >
      <div class="basicInformation">
        <div style="padding-top: 10px;margin-left: 90px">
          <el-image :src="sign" />
        </div>
        <div style="display: flex;align-items: center">
          <el-text
            style="margin-left: 10px"
            size="large"
            tag="b"
          >项目基本信息</el-text>
        </div>
      </div>
      <el-form>
        <el-row
          style="margin:20px 0 0 90px;height: 50px"
          align="middle"
        >
          <el-col :span="5">
            <el-form-item
              label="项目名称："
              size="large"
              prop="name"
            >
              <el-input
                v-model="basicMessage.name"
                placeholder="请输入项目名称"
                size="large"
              />
            </el-form-item>
          </el-col>
          <el-col
            :span="5"
            :offset="2"
          >
            <el-form-item
              label="负责人："
              size="large"
              prop="principal"
            >
              <el-select
                v-model="basicMessage.principal"
                placeholder="请选择负责人"
                @change="headSelect"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.ID"
                  :label="item.nickName"
                  :value="item.nickName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="5"
            :offset="2"
          >
            <el-form-item
              label="相关客户："
              size="large"
              prop="customer"
            >
              <el-input
                v-model="basicMessage.customer"
                placeholder="请输入项目相关客户"
                size="large"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          style="margin:20px 0 0 90px;height: 50px"
          align="middle"
        >
          <el-col :span="5">
            <el-form-item
              label="紧急程度："
              size="large"
            >
              <el-radio-group
                v-model="basicMessage.level"
                @change="changeUrgency"
              >
                <el-radio
                  :value="1"
                  :label="1"
                >正常</el-radio>
                <el-radio
                  :value="2"
                  :label="2"
                >重要</el-radio>
                <el-radio
                  :value="3"
                  :label="3"
                >紧急</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col
            :span="6"
            :offset="2"
          >
            <el-form-item
              label="项目金额："
              size="large"
            >
              <el-input
                v-model="projectAmount"
                style="max-width: 600px"
                placeholder="请输入项目的具体金额"
                class="input-with-select"
              >
                <template #append>
                  <el-select
                    v-model="amountUnit"
                    placeholder="元"
                    style="width: 100px"
                  >
                    <el-option
                      label="元"
                      value="元"
                    />
                    <el-option
                      label="万元"
                      value="万元"
                    />
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          style="margin:20px 0 0 90px;height: 70px"
        >
          <el-col :span="19">
            <el-form-item
              label="项目说明："
              size="large"
            >
              <el-input
                v-model="basicMessage.illustrate"
                type="textarea"
                placeholder="项目说明（选填）"
                :rows="3"
                size="large"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div
      style="height: 400px;margin-top: 20px"
      class="bg-white"
    >
      <div class="basicInformation">
        <div style="padding-top: 10px;margin-left: 90px">
          <el-image :src="sign" />
        </div>
        <div style="display: flex;align-items: center">
          <el-text
            style="margin-left: 10px"
            size="large"
            tag="b"
          >项目附属文件</el-text>
        </div>
      </div>
      <el-row style="margin:20px 0 0 90px;">
        <el-col :span="15">
          <el-upload
            class="upload-demo"
            drag
            multiple
            :auto-upload="false"
            :file-list="fileListData"
            :on-change="changeFileData"
            :on-remove="removeFileData"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              请选择需要上传的文件
            </div>
            <template #tip>
              <div class="el-upload__tip">
                选择的文件不要超过500MB
              </div>
            </template>
          </el-upload>
        </el-col>
        <el-col
          :span="4"
          :offset="1"
        >
          <el-button
            icon="Collection"
            size="large"
            type="primary"
            @click="approval"
          >项目立项</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import sign from '@/assets/sign.png'
import moment from 'moment/moment'
import { createProject } from '@/api/project'
import { getAllUsers } from '@/api/user'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()

defineOptions({
  name: 'ProjectApproval'
})
// 项目基本信息
const basicMessage = reactive({
  code: '',
  name: '',
  principal: '',
  price: 0,
  level: 1,
  customer: '',
  illustrate: '',
  state: 1
})
const projectAmount = ref('')
// 项目用户列表
const userList = reactive([])
getAllUsers().then(res => {
  if (res.code === 0) {
    userList.push(...res.data)
  }
})
// 项目文件列表
const fileListData = ref([])
// 金额单位
const amountUnit = ref('元')
// 修改负责人
const headSelect = (value) => {
  basicMessage.principal = value
}
// 修改文件数据
const changeFileData = (file, fileList) => {
  fileListData.value = fileList
}
const removeFileData = (file, fileList) => {
  fileListData.value = fileList
}
// 项目紧急程度
function changeUrgency(value) {
  basicMessage.level = value
}
// 项目立项
const approval = () => {
  const basic = basicMessage
  basic.code = 'LCZM' + createCode()
  if (projectAmount.value === '') {
    basic.price = 0
  } else {
    if (amountUnit.value === '万元') {
      basic.price = parseInt(projectAmount.value) * 10000
    } else {
      basic.price = parseInt(projectAmount.value)
    }
  }
  for (const key in basic) {
    if (key === 'illustrate') { /* empty */ } else if (basic[key] === 0 || basic[key] === '') {
      ElMessage.error('请将除说明以外的基本信息填写完整')
      return
    }
  }
  const formData = new FormData()
  const json = JSON.stringify(basic)
  if (fileListData.value.length !== 0) {
    fileListData.value.forEach(item => {
      formData.append('file', item.raw)
    })
  } else {
    formData.append('file', [])
  }
  formData.append('project', json)
  createProject(formData).then(res => {
    if (res.code === 0) {
      ElMessage({
        message: '立项成功',
        type: 'success',
      })
      const { href } = router.resolve({
        path: '/layout/projectManage/projectList', // 路径
      })
      location.href = (href)
    } else {
      ElMessage({
        message: '立项失败',
        type: 'error',
      })
    }
  })
}

const createCode = () => {
  return moment().format('YYYYMMDDHHmm')
}
</script>

<style scoped lang="less">
.basicInformation{
  height: 40px;
  background-color: #f8fafd;
  display: flex;
  //align-items: center;
}
</style>