123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294 |
- <template>
- <div>
- <el-form :model="form" ref="form" :rules="rules" label-width="80px">
- <el-form-item label="节点名称" prop="nodeName">
- <el-input
- v-model="form.nodeName"
- placeholder="请输入节点名称"
- :disabled="disabled || selectOperator"
- ></el-input>
- </el-form-item>
- <el-form-item
- label="工种类型"
- prop="workTypeId"
- v-if="node.type !== 'end'"
- >
- <el-select
- v-model="form.workTypeId"
- placeholder="请选择"
- style="width: 100%"
- :disabled="disabled || selectOperator"
- @change="onChage"
- >
- <el-option
- v-for="item in workTypeOptions"
- :key="item.typeId"
- :label="item.name"
- :value="item.typeId"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="工时单价">
- <el-input
- v-model="form.quotedPrice"
- placeholder="工时单价"
- disabled
- ></el-input>
- </el-form-item>
- <el-form-item label="备注" prop="notes">
- <el-input
- v-model="form.notes"
- :disabled="disabled || selectOperator"
- ></el-input>
- </el-form-item>
- <el-form-item label="工序要求" prop="require" v-if="node.type !== 'end'">
- <el-input
- v-model="form.require"
- :disabled="disabled || selectOperator"
- ></el-input>
- </el-form-item>
- <el-form-item label="工序说明" prop="explain" v-if="node.type !== 'end'">
- <el-input
- v-model="form.explain"
- :disabled="disabled || selectOperator"
- ></el-input>
- </el-form-item>
- <el-form-item label="所需工时" prop="preTaskTime" v-if="node.type !== 'end'">
- <el-input
- v-model="form.preTaskTime"
- :disabled="disabled || selectOperator"
- oninput="value=value.replace(/[^0-9.]/g,'')"
- >
- <i slot="suffix" style="font-style:normal;margin-right: 10px;">h</i>
- </el-input>
- </el-form-item>
- <el-form-item label="操作人" v-if="form.operatorName && !selectOperator">
- <el-input
- :disabled="disabled && selectOperator"
- v-model="form.operatorName"
- ></el-input>
- </el-form-item>
- <el-form-item
- label="操作人"
- prop="operatorId"
- v-if="selectOperator && node.type !== 'end'"
- >
- <el-select
- v-model="form.operatorId"
- :disabled="disabled && selectOperator"
- multiple
- placeholder="请选择"
- style="width: 100%"
- >
- <el-option
- v-for="item in operatorIdOptions"
- :key="item.userId"
- :label="item.name"
- :value="item.userId"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item v-if="node.type !== 'end' && !disabled && !selectOperator">
- <upload-component
- :title="'附件'"
- :accept="'*'"
- :file-obj-list="fileList"
- @uploadSuccess="uploadSuccess"
- />
- </el-form-item>
- <el-form-item v-else>
- <upload-component
- :display="true"
- :title="'附件'"
- :accept="'*'"
- :file-obj-list="fileList"
- @uploadSuccess="uploadSuccess"
- />
- </el-form-item>
- </el-form>
- </div>
- </template>
- <script>
- import { getWorkType } from '@/api/crafts'
- import { workTypeMasterList } from '@/api/worktype'
- import UploadComponent from '@/views/modules/common/upload-component'
- export default {
- name: 'nodeEdit',
- components: { UploadComponent },
- props: {
- data: {
- type: Object,
- default: () => {}
- },
- disabled: {
- type: Boolean,
- default: false
- },
- // 是否选择操作人,当选择操作人时,其他字段不可编辑
- selectOperator: {
- type: Boolean,
- default: false
- }
- },
- data () {
- return {
- // 工种列表
- workTypeOptions: [],
- // 操作人列表
- operatorIdOptions: [],
- node: {},
- form: {
- nodeName: '',
- workTypeId: '',
- operatorId: []
- },
- fileList: [],
- rules: {
- nodeName: [
- { required: true, message: '请输入节点名称', trigger: 'blur' }
- ],
- workTypeId: [
- { required: true, message: '请选择工种', trigger: 'blur' }
- ],
- operatorId: [
- { required: true, message: '请选择操作人', trigger: 'blur' }
- ],
- preTaskTime: [
- { required: true, message: '请输入所需工时', trigger: 'blur' }
- ]
- }
- }
- },
- watch: {
- data (val) {
- this.node = val
- this.form = {
- ...this.form,
- ...this.node
- }
- if (this.node.operatorId) {
- this.form.operatorId = this.node.operatorId.split(',')
- }
- // 附件
- if (this.node.attachList) {
- this.$nextTick(() => {
- this.fileList = []
- this.node.attachList.forEach(item => {
- this.fileList.push({
- name: item.fileName,
- url: item.url,
- id: item.url
- })
- })
- })
- }
- },
- disabled (val) {
- this.disabled = val
- }
- },
- activated () {},
- created () {
- this.getWorkTypeOptions()
- },
- computed: {},
- mounted () {
- this.node = this.data
- this.form = {
- ...this.form,
- ...this.node
- }
- if (this.node.operatorId) {
- this.form.operatorId = this.node.operatorId.split(',')
- }
- // 附件
- if (this.node.attachList) {
- this.fileList = []
- this.node.attachList.forEach(item => {
- this.fileList.push({
- name: item.fileName,
- url: item.url,
- id: item.url
- })
- })
- }
- this.getOperatorList()
- },
- methods: {
- getWorkTypeOptions () {
- this.workTypeOptions = []
- getWorkType().then(({ data }) => {
- if (data && data.code === '200') {
- this.workTypeOptions = data.data
- }
- })
- },
- onChage (val) {
- this.workTypeOptions.forEach(v => {
- if (v.typeId === val) {
- this.form.quotedPrice = Number(v.quotedPrice || 0).toFixed(2)
- }
- })
- },
- // 按工种ID查询操作人列表
- getOperatorList () {
- if (this.node.workTypeId) {
- workTypeMasterList(this.node.workTypeId).then(({ data }) => {
- if (data && data.code === '200') {
- this.operatorIdOptions = []
- data.data.forEach(item => {
- this.operatorIdOptions.push(item)
- })
- }
- })
- }
- },
- uploadSuccess (fileList) {
- this.fileList = fileList
- },
- // 校验表单
- validateFormData () {
- return new Promise((resolve, reject) => {
- this.$refs['form'].validate(valid => {
- if (!valid) {
- // eslint-disable-next-line prefer-promise-reject-errors
- reject()
- return
- }
- resolve()
- })
- })
- },
- // 获取表单数据
- formData () {
- const form = { ...this.form, operatorName: '' }
- if (this.form.operatorId != null) {
- form.operatorId = this.form.operatorId.toString()
- this.form.operatorId.forEach(id => {
- let op = this.operatorIdOptions.find(t => t.userId === id)
- if (op.name != null) {
- form.operatorName += op.name + ' '
- }
- })
- }
- // 填充附件
- let fList = this.fileList
- if (fList.length > 0) {
- form.attachList = []
- for (let i = 0; i < fList.length; i++) {
- form.attachList.push({
- fileName: fList[i].name,
- url: fList[i].url
- })
- }
- }
- return form
- }
- }
- }
- </script>
- <style scoped></style>
|