|
@@ -8,10 +8,32 @@
|
|
|
></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item style="width: 350px" label="托管单位:">
|
|
|
+ <el-tag
|
|
|
+ :key="tag.id"
|
|
|
+ v-for="tag in dynamicTags"
|
|
|
+ closable
|
|
|
+ :disable-transitions="false"
|
|
|
+ @close="handleClose(tag)"
|
|
|
+ >
|
|
|
+ {{ tag.name }}
|
|
|
+ </el-tag>
|
|
|
<el-input
|
|
|
+ class="input-new-tag"
|
|
|
+ v-if="inputVisible"
|
|
|
+ v-model="newHostInputValue"
|
|
|
+ ref="saveTagInput"
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleInputConfirm"
|
|
|
+ @blur="handleInputConfirm"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <el-button v-else class="button-new-tag" size="small" @click="showInput"
|
|
|
+ >+ New Tag</el-button
|
|
|
+ >
|
|
|
+ <!-- <el-input
|
|
|
v-model="form.hostUnit"
|
|
|
placeholder="请输入单位名称"
|
|
|
- ></el-input>
|
|
|
+ ></el-input> -->
|
|
|
</el-form-item>
|
|
|
<el-form-item style="width: 350px" label="公司简介:">
|
|
|
<el-input v-model="form.profile" placeholder=""></el-input>
|
|
@@ -22,45 +44,83 @@
|
|
|
<el-form-item style="width: 500px" label="联系方式:">
|
|
|
<el-input v-model="form.contact_num"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item
|
|
|
- style="width: 500px"
|
|
|
- :model="form.imageUpload"
|
|
|
- label="上传图片:"
|
|
|
- >
|
|
|
+ <el-form-item style="width: 500px" label="上传图片:">
|
|
|
<el-upload
|
|
|
- action="action"
|
|
|
+ action="#"
|
|
|
list-type="picture-card"
|
|
|
- :on-preview="handlePictureCardPreview"
|
|
|
- :on-remove="handleRemove"
|
|
|
+ :auto-upload="false"
|
|
|
+ :file-list="fileList"
|
|
|
>
|
|
|
- <i class="el-icon-plus"></i>
|
|
|
+ <i slot="default" class="el-icon-plus"></i>
|
|
|
+ <div slot="file" slot-scope="{ file }">
|
|
|
+ <img
|
|
|
+ class="el-upload-list__item-thumbnail"
|
|
|
+ :src="file.url"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <span class="el-upload-list__item-actions">
|
|
|
+ <span
|
|
|
+ class="el-upload-list__item-preview"
|
|
|
+ @click="handlePictureCardPreview(file)"
|
|
|
+ >
|
|
|
+ <i class="el-icon-zoom-in"></i>
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-if="!disabled"
|
|
|
+ class="el-upload-list__item-delete"
|
|
|
+ @click="handleDownload(file)"
|
|
|
+ >
|
|
|
+ <i class="el-icon-download"></i>
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-if="!disabled"
|
|
|
+ class="el-upload-list__item-delete"
|
|
|
+ @click="handleRemove(file)"
|
|
|
+ >
|
|
|
+ <i class="el-icon-delete"></i>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</el-upload>
|
|
|
<el-dialog :visible.sync="dialogVisible">
|
|
|
- <img width="100%" :src="item.imageUrl" alt="" />
|
|
|
+ <img width="100%" :src="dialogImageUrl" alt="" />
|
|
|
</el-dialog>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<div class="bottom">
|
|
|
- <el-button class="reset-btn">重置</el-button>
|
|
|
- <el-button class="confirm-btn">提交</el-button>
|
|
|
+ <el-button class="reset-btn" @click="resetEvent">重置</el-button>
|
|
|
+ <el-button class="confirm-btn" @click="submitEvent">提交</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import publicFunc from "@/utils/publicFunc";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ fileList: [],
|
|
|
+ dynamicTags: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: "北京电信规划设计院",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: "北京电信规划设计院",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: "北京电信规划设计院",
|
|
|
+ },
|
|
|
+ ],
|
|
|
dialogVisible: false,
|
|
|
+ dialogImageUrl: "",
|
|
|
+ disabled: false,
|
|
|
item: {
|
|
|
imageUrl: "",
|
|
|
},
|
|
|
allImageUrl: [],
|
|
|
- hostUnit: "",
|
|
|
- profile: "",
|
|
|
- contact_person: "",
|
|
|
- contact_num: "",
|
|
|
- hostUnit: "",
|
|
|
form: {
|
|
|
manageUnit: "",
|
|
|
hostUnit: "",
|
|
@@ -69,18 +129,54 @@ export default {
|
|
|
contact_num: "",
|
|
|
},
|
|
|
action: "", //上传地址
|
|
|
+ newHostInputValue: "",
|
|
|
+ inputVisible: false,
|
|
|
};
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
- handleRemove(file, fileList) {
|
|
|
- let removeUrl = file.respone.data.url;
|
|
|
- this.allImageUrl = this.allImageUrl.filter((item) => item != removeUrl);
|
|
|
+ handleRemove(file) {
|
|
|
+ console.log(file);
|
|
|
+ console.log(this.fileList);
|
|
|
+ // let removeUrl = file.respone.data.url;
|
|
|
+ // this.allImageUrl = this.allImageUrl.filter((item) => item != removeUrl);
|
|
|
+ },
|
|
|
+ handleDownload(file) {
|
|
|
+ console.log(file);
|
|
|
},
|
|
|
handlePictureCardPreview(file) {
|
|
|
- this.item.imageUrl = file.url;
|
|
|
+ this.dialogImageUrl = file.url;
|
|
|
this.dialogVisible = true;
|
|
|
},
|
|
|
+ handleClose(tag) {
|
|
|
+ this.dynamicTags = this.dynamicTags.filter((v) => {
|
|
|
+ return v.id !== tag.id;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleInputConfirm() {
|
|
|
+ let newHostInputValue = this.newHostInputValue;
|
|
|
+ if (newHostInputValue) {
|
|
|
+ this.dynamicTags.push({
|
|
|
+ id: Math.random() * 100,
|
|
|
+ name: newHostInputValue,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.inputVisible = false;
|
|
|
+ this.newHostInputValue = "";
|
|
|
+ },
|
|
|
+ showInput() {
|
|
|
+ this.inputVisible = true;
|
|
|
+ this.$nextTick((_) => {
|
|
|
+ this.$refs.saveTagInput.$refs.input.focus();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ resetEvent() {
|
|
|
+ this.form.manageUnit = "";
|
|
|
+ this.form.profile = "";
|
|
|
+ this.form.contact_person = "";
|
|
|
+ this.form.contact_num = "";
|
|
|
+ },
|
|
|
+ submitEvent() {},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -99,6 +195,22 @@ export default {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
+ .el-tag + .el-tag {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .button-new-tag {
|
|
|
+ margin-left: 10px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding-top: 0;
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+ .input-new-tag {
|
|
|
+ width: 100px;
|
|
|
+ margin-left: 10px;
|
|
|
+ vertical-align: bottom;
|
|
|
+ }
|
|
|
+
|
|
|
/deep/.el-form-item__label {
|
|
|
padding: 0;
|
|
|
}
|