SafetyAlertSystem-ui/src/views/base/edgeInsert/components/form-insert-all.vue

<template>
    <!-- 工程管理 新增、编辑 表单组件 -->
    <div>
        <el-form
            label-width="100px"
            size="medium"
            ref="projectParamsRef"
            :model="projectParams"
            :rules="projectParamsRules"
        >
          <el-row type="flex" justify="space-between" :gutter="24">
            <el-col :span="12">
              <el-form-item label="项目部" prop="departId" >
                <el-select
                  v-model="projectParams.departId"
                  clearable
                  filterable
                  placeholder="请选择"
                  @change="departChange"
                  disabled
                >
                  <el-option
                    v-for="item in departRange"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工程名称" prop="proId">
                <el-select
                  v-model="projectParams.proId"
                  clearable
                  filterable
                  placeholder="请选择"
                  @change="projChange"
                  disabled
                >
                  <el-option
                    v-for="item in projRange"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between" :gutter="24">
            <el-col :span="12">
              <el-form-item label="申请人" prop="relUser">
                <el-input v-model="projectParams.relUser" placeholder="请输入" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系方式" prop="relPhone">
                <el-input v-model="projectParams.relPhone" :maxlength="11" placeholder="请输入" disabled/>
              </el-form-item>
            </el-col>
          </el-row>



        <TableModelTwo
          :columnsList="columnsListInsert"
          ref="tableRef"
          @transIdList="getIdList"
          :show-btn-crews="false"
          :show-right-tools="false"
          :show-sel="false"
          :show-index="false"
          style="margin-bottom: 100px"
        >
        </TableModelTwo>



        
        <el-form-item label="审核意见" prop="remarks">
<!--          <textarea id="remarks" v-model="projectParams.remarks" class="el-textarea" placeholder="请输入审核意见" disabled></textarea>-->
                 <el-input :rows="4" type="textarea" v-model="projectParams.remarks" placeholder="请输入审核意见" disabled/>
        </el-form-item>
        <el-row type="flex" justify="space-between" :gutter="24">
            <el-col :span="12">
              <el-form-item label="审批人" prop="auditUserName">
                <el-input v-model="projectParams.auditUserName" placeholder="请输入审批人" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审批时间" prop="auditTime">
                <el-input v-model="projectParams.auditTime" placeholder="请输入审批时间" disabled/>
              </el-form-item>
            </el-col>
          </el-row>
      </el-form>


        <div
          style="display: flex; justify-content: right"
        >
          <el-button type="danger" @click="onReturn">驳回</el-button>
          <el-button type="success" @click="onSubmit">同意</el-button>
          <!-- <el-button
            @click="
                () => {
                    this.$emit('closeDialog')
                }
            "
          >驳回</el-button -->
        </div>

    </div>
</template>

<script>
import { columnsListInsert } from '../config-insert'
// import {  formLabelApprove,columnsListApprove} from '../config-approve'
import {
  // addEdgeDeviceApi,
  // editEdgeDeviceApi,
  approveEdgeDeviceApi,
  queryEdgeDeviceByIdApi
} from '@/api/base/insert'
import {
  queryProjApi
} from '@/api/base/crew'
import {
  queryProjDeptListApi
} from '@/api/base/projDept'
export default {
    name: 'FormProject',
    props: {
        editParams: {
            type: Object,
            default: () => null,
        },
    },
    components: {  },
    created() {
      this.getRanges()
    },
    mounted() {
        console.log(this.editParams)
        if (this.editParams) {
            Object.assign(this.projectParams, this.editParams)
            // this.projectParams.auditUserName = this.editParams.auditUserName
            // this.projectParams.remarks = ''
            // 查询所属设备
            queryEdgeDeviceByIdApi(this.editParams.id).then(res => {
              res.rows.forEach(item => {
                this.$refs.tableRef.tableList.unshift(item)
                this.projectParams.auditUserName = item.auditUserName
              })
            }).catch(err => {})
            this.subSort = 2
        } else {
            this.subSort = 1
        }
    },
    data() {
        return {
            columnsListInsert,
            exportList: [],
            subSort: '', // 提交类型：新增 1 / 修改 2
            projectParams: {
              departId: undefined, //项目部
              proId: undefined, //工程名称
              relUser: undefined, // 申请人
              relPhone: undefined, // 联系方式
              remarks: undefined, // 审核意见
              auditStatus: undefined, // 审核状态
              auditUserName: undefined, // 审批人
              auditTime: undefined, // 审批时间
            },
            // 校验规则
            projectParamsRules: {
              departId: [
                  {
                      required: true,
                      message: '请输入项目部名称',
                      trigger: 'blur',
                  },
              ],
              proId: [
                {
                  required: true,
                  message: '请输入工程名称',
                  trigger: 'blur',
                },
              ],
              relUser: [
                {
                  required: true,
                  message: '请输入申请人',
                  trigger: 'blur',
                },
              ],
              relPhone: [
                {
                  required: true,
                  message: '手机号格式不正确',
                  validator: this.validatePhone,
                  trigger: 'blur',
                },
              ],
              remarks: [
                {
                  required: true,
                  message: '请输入审核意见',
                  trigger: 'blur',
                },
              ],
            },
            // 各类下拉
            departRange: [],
            projRange: [],
            // 手机正则
            phoneReg: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            testId: 1
        }
    },
    methods: {
        /** 校验手机号 */
        validatePhone(rule, value, callback) {
          if(!this.phoneReg.test(value)) {
            callback(new Error('手机号格式不正确'))
          } else {
            callback()
          }
        },
        getIdList(idList) {
          this.exportList = []
          console.log(idList)
        },
        handleAddEdge() {
          let setObj = {}
          this.$set(setObj, 'testId', this.testId)
          this.testId++
          this.$set(setObj, 'devName', undefined)
          this.$set(setObj, 'devCode', undefined)
          this.$set(setObj, 'unitName', undefined)
          this.$set(setObj, 'areaName', undefined)
          this.$set(setObj, 'devUser', undefined)
          this.$set(setObj, 'devUserPhone', undefined)
          this.$refs.tableRef.tableList.push(setObj)
        },
        handleDeleteEdge(v) {
          this.$modal
            .confirm('是否确认删除该数据项？')
            .then(() => {
              this.$refs.tableRef.tableList.forEach((item, index) => {
                if(item.testId === v.testId) {
                  this.$refs.tableRef.tableList.splice(index, 1)
                }
              })
            })
            .catch(() => {})
        },

        /** 获取各类下拉框 */
        async getRanges() {
          // 获取项目部下拉选
          let deptRes = await queryProjDeptListApi({
            isAll: 0
          })
          this.departRange = deptRes.data.map(item => {
            return {
              label: item.departName,
              value: item.id
            }
          })
          // 获取工程下拉选
          let projRes = await queryProjApi({
            isAll: 0
          })
          this.projRange = projRes.data.map(item => {
            return {
              label: item.proName,
              value: item.id
            }
          })
        },
        departChange(e) {
          this.departRange.forEach(item => {
            if(e === item.value) {
              this.projectParams.departName = item.label
            }
          })
        },
        projChange(e) {
          this.projRange.forEach(item => {
            if(e === item.value) {
              this.projectParams.proName = item.label
            }
          })
        },
        /** 改变树结构 */
        changeTree(leaf) {
          leaf.map(item => {
            item.value = item.id
            if(item.children) {
              this.changeTree(item.children)
            }
          })
          return leaf
        },
        /** 确认按钮 */
        onSubmit() {
            console.log(this.$refs.tableRef.tableList, this.projectParams)
            this.$refs.projectParamsRef.validate(async valid => {
                if (valid) {
                  this.projectParams.recordList = this.$refs.tableRef.tableList
                  this.projectParams.auditStatus = 1
                  // if(this.subSort === 1) {
                  //   let res = await addEdgeDeviceApi(this.projectParams)
                  //   if(res.code === 200) {
                  //     this.$modal.msgSuccess('操作成功')
                  //     this.$emit('closeDialog', true)
                  //   }
                  // } else {
                    let res = await approveEdgeDeviceApi(this.projectParams)
                    if(res.code === 200) {
                      this.$modal.msgSuccess('操作成功')
                      this.$emit('closeDialogAll', true)
                    }

                }
            })
        },
        onReturn() {
          this.$refs.projectParamsRef.validate(async valid => {
            if (valid) {
              this.projectParams.recordList = this.$refs.tableRef.tableList
              this.projectParams.auditStatus = 2
              let res = await approveEdgeDeviceApi(this.projectParams)
              if(res.code === 200) {
                this.$modal.msgSuccess('操作成功')
                this.$emit('closeDialogAll', true)
              }
            }
          })
        },

    },
}
</script>

<style scoped>
::v-deep .el-select {
    width: 100%;
}
::v-deep .el-form-item__label{
  font-weight: normal;
}
.el-textarea {
  width: 100%;
  height: 100px;
  resize: none;
}
</style>