123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276 |
- <template>
- <div class="change-relation-ship">
- <el-dialog
- :title="values.addShip"
- :visible.sync="addShipDialog"
- >
- <el-form
- :model="ruleForm"
- status-icon
- :rules="rules"
- ref="ruleForm"
- label-width="100px"
- class="demo-ruleForm"
- >
- <p class="mb-20 color-AAA">{{values.codeTip}}</p>
- <!-- <el-form-item-->
- <!-- :label="values.codeTitle"-->
- <!-- prop="code"-->
- <!-- class="mb-20"-->
- <!-- >-->
- <!-- <el-input-->
- <!-- v-model="ruleForm.code"-->
- <!-- autocomplete="off"-->
- <!-- :placeholder="values.pleaseEnter"-->
- <!-- />-->
- <!-- </el-form-item>-->
- <el-form-item
- :label="values.codeTitle"
- class="mb-20"
- >
- <el-select v-model="codeValue" placeholder="请选择">
- <el-option
- v-for="item in optionsCode"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
- </el-select>
- </el-form-item>
- <el-row class="mb-20">
- <el-col :span="12">
- <p class="mb-20">{{values.mainObject}}
- <span class="fw-bold color-AAA">{{MainObject}}</span>
- </p>
- <el-form-item
- prop="main"
- :error="mainError"
- >
- <el-input
- v-model="ruleForm.main"
- autocomplete="off"
- :placeholder="values.pleaseEnterCode"
- :disabled="disabled"
- />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <p class="mb-20">{{values.affiliatedObject}}
- <span class="fw-bold color-AAA ">{{FromObject}}</span>
- </p>
- <el-form-item
- v-for="(item,index) in ruleForm.codeList"
- :key="index"
- :prop="`codeList.${index}.value`"
- :rules="rules.codeList"
- :error="fromError"
- >
- <el-input
- v-model="item.value"
- :placeholder="values.pleaseEnterCode"
- :disabled="disabled"
- />
- <el-button
- @click.prevent="removeCode(item)"
- icon="el-icon-circle-close"
- type="text"
- :disabled="disabled"
- />
- </el-form-item>
- <el-form-item>
- <el-button
- @click="addCode"
- icon="el-icon-circle-plus-outline"
- style="width: 220px;"
- :disabled="disabled"
- />
- </el-form-item>
- </el-col>
- </el-row>
- <el-form-item>
- <el-button
- type="primary"
- class="fr ml-20"
- @click="submitForm('ruleForm')"
- >{{values.add}}
- </el-button>
- <el-button
- class="fr"
- @click="addShipDialog = false"
- >{{values.cancel}}
- </el-button>
- </el-form-item>
- </el-form>
- </el-dialog>
- </div>
- </template>
- <script>
- import {relAdd} from "../../../../api/relation/api";
- export default {
- name: "addRelationShip",
- props: ['values'],
- data() {
- var checkCode = (rule, value, callback) => {
- //TODO
- callback()
- }
- var checkMain = (rule, value, callback) => {
- //TODO
- callback()
- }
- var codeList = (rule, value, callback) => {
- //TODO
- console.log(value)
- callback()
- }
- return {
- mainError:'',
- fromError:'',
- addShipDialog: false,
- // disabled: true,
- optionsCode: [{
- value: 'cadId',
- label: 'CADID图纸编码'
- }, {
- value: 'name',
- label: '设备名称'
- }, {
- value: 'id',
- label: '设备ID'
- }, {
- value: 'localId',
- label: '本地编码'
- }, {
- value: 'localName',
- label: '本地名称'
- }],
- codeValue: '',
- MainObject: `(包括:${localStorage.getItem('MainObject')} )限制条件`,
- FromObject: `(包括:${localStorage.getItem('FromObject')} )限制条件`,
- ruleForm: {
- main: '',
- codeList: [{
- value: ''
- }]
- },
- rules: {
- code: [
- {required: true, message: '请输入对应识别编码', trigger: 'blur'},
- {validator: checkCode, trigger: 'blur'}
- ],
- main: [
- {required: true, message: '请输入对应识别编码', trigger: 'blur'},
- {validator: checkMain, trigger: 'blur'}
- ],
- codeList: [
- {required: true, message: '请输入对应识别编码', trigger: 'blur'},
- {validator: codeList, trigger: 'blur'}
- ]
- }
- }
- },
- computed:{
- disabled() {
- return this.codeValue === '' ? 'disabled':false
- },
- },
- watch:{},
- methods: {
- addCode() {
- this.ruleForm.codeList.push({
- value: '',
- key: Date.now()
- })
- },
- removeCode(item) {
- var index = this.ruleForm.codeList.indexOf(item)
- if (index !== -1) {
- this.ruleForm.codeList.splice(index, 1)
- }
- },
- submitForm(formName) {
- this.$refs[formName].validate(valid => {
- console.log(valid,'valid')
- if (valid) {
- let arr = []
- for(let item of this.ruleForm.codeList) {
- if(item.value) {
- arr = arr.concat(item.value)
- }
- }
- let param = {
- FromContent:arr,
- MainContent:this.ruleForm.main,
- RelType:localStorage.getItem('RelManualType'),
- Type:this.codeValue
- }
- //清空添加value
- let that = this
- relAdd(param).then(res => {
- if (res.data.Result === "failure") {
- if(res.data.ErrorType == 1) {
- // this.mainError = res.data.Message
- this.$nextTick(()=>{this.mainError = res.data.Message})
- } else if(res.data.ErrorType == 2) {
- this.$nextTick(()=>{this.fromError = res.data.Message})
- } else {
- this.$message.error(res.data.Message);
- }
- } else if (res.data.Result === "success") {
- this.$message.success(res.data.Message);
- this.$emit('update')
- that.addShipDialog = false
- that.codeValue = ''
- that.ruleForm.codeList = [{value:''}]
- that.ruleForm.main = ''
- }
- })
- } else {
- console.log('error')
- return false
- }
- })
- },
- }
- }
- </script>
- <style scoped lang="less">
- @color-text: #AAA;
- .change-relation-ship {
- /deep/ .el-form-item__label {
- width: auto !important;
- }
- .fr {
- float: right;
- }
- .mb-20 {
- margin-bottom: 20px;
- }
- .ml-20 {
- margin-left: 20px;
- }
- .color-AAA {
- color: @color-text
- }
- .fw-bold {
- font-weight: bold;
- }
- }
- </style>
|