123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 |
- <template>
- <div class="change-relation-ship">
- <el-dialog :title="values.editShip" :visible.sync="editShipDialog">
- <el-form
- :model="ruleForm"
- status-icon
- :rules="rules"
- ref="ruleForm"
- label-width="100px"
- class="demo-ruleForm"
- >
- <p class="mb-20 color-AAA">{{ values.deviceTip }}</p>
- <el-row class="mb-20">
- <el-col :span="12">
- <p class="mb-20">
- {{ values.mainObject }}
- <span class="fw-bold color-AAA"
- >(包括:XXXX类型,XXXX类型)限制条件</span
- >
- </p>
- <el-form-item>
- <el-input v-model="ruleForm.main" autocomplete="off" disabled />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <p class="mb-20">
- {{ values.affiliatedObject }}
- <span class="fw-bold color-AAA"
- >(包括:XXXX类型,XXXX类型)限制条件</span
- >
- </p>
- <el-form-item
- v-for="(item, index) in ruleForm.codeList"
- :key="index"
- :prop="`codeList.${index}.value`"
- :rules="rules.codeList"
- >
- <el-input
- v-model="item.value"
- :placeholder="values.pleaseEnterCode"
- />
- <el-button
- @click.prevent="removeCode(item)"
- icon="el-icon-circle-close"
- type="text"
- />
- </el-form-item>
- <el-form-item>
- <el-button
- @click="addCode"
- icon="el-icon-circle-plus-outline"
- style="width: 220px"
- />
- </el-form-item>
- </el-col>
- </el-row>
- <el-form-item>
- <el-button>{{ values.delete }} </el-button>
- <el-button
- type="primary"
- class="fr ml-20"
- @click="submitForm('ruleForm')"
- >{{ values.add }}
- </el-button>
- <el-button class="fr" @click="editShipDialog = false"
- >{{ values.cancel }}
- </el-button>
- </el-form-item>
- </el-form>
- </el-dialog>
- </div>
- </template>
- <script lang="ts">
- import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
- var codeList = (rule: any, value: any, callback: any) => {
- //TODO
- callback();
- };
- @Component({
- name: "addRelationShip",
- props: ["values"],
- })
- export default class extends Vue {
- editShipDialog: boolean = false;
- ruleForm: object = {
- code: "",
- main: "",
- codeList: [
- {
- value: "",
- },
- ],
- };
- rules: object = {
- codeList: [
- { required: true, message: "请输入对应识别编码", trigger: "blur" },
- { validator: codeList, trigger: "blur" },
- ],
- };
- addCode() {
- this.ruleForm.codeList.push({
- value: "",
- key: Date.now(),
- });
- }
- removeCode(item: any) {
- var index = this.ruleForm.codeList.indexOf(item);
- if (index !== -1) {
- this.ruleForm.codeList.splice(index, 1);
- }
- }
- submitForm(formName: string) {
- this.$refs[formName].validate((valid) => {
- if (valid) {
- this.editShipDialog = false;
- console.log("success");
- } else {
- console.log("error");
- return false;
- }
- });
- }
- }
- </script>
- <style scoped lang="scss">
- $color-text: #aaa;
- .change-relation-ship {
- ::v-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>
|