|
@@ -2,8 +2,18 @@
|
|
|
<div class="app-container">
|
|
|
<el-form label-width="100px" :model="form" :rules="rules" ref="form">
|
|
|
<el-form-item label="关联设备:" prop="linkDevice">
|
|
|
- <el-select v-model="form.linkDevice" filterable multiple placeholder="请选择关联设备">
|
|
|
- <el-option v-for="item in devOptions" :key="item.value" :label="item.label" :value="item.value.toString()" />
|
|
|
+ <el-select
|
|
|
+ v-model="form.linkDevice"
|
|
|
+ filterable
|
|
|
+ multiple
|
|
|
+ placeholder="请选择关联设备"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in devOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value.toString()"
|
|
|
+ />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="文章标题:" prop="title">
|
|
@@ -13,14 +23,27 @@
|
|
|
<Editor v-model="form.content" :min-height="250" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="背景图:" prop="pic">
|
|
|
- <Upload listType="picture-card" :url="form.pic" @upload="upload($event, 'pic')" />
|
|
|
+ <Upload
|
|
|
+ listType="picture-card"
|
|
|
+ :url="form.pic"
|
|
|
+ @upload="upload($event, 'pic')"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="分享图:" prop="shareIcon">
|
|
|
- <Upload listType="picture-card" :url="form.shareIcon" @upload="upload($event, 'shareIcon')" />
|
|
|
+ <Upload
|
|
|
+ listType="picture-card"
|
|
|
+ :url="form.shareIcon"
|
|
|
+ @upload="upload($event, 'shareIcon')"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="文章状态:" prop="status" v-if="this.form.id">
|
|
|
<el-select v-model="form.status" placeholder="请选择文章状态">
|
|
|
- <el-option v-for="item in disabledOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ <el-option
|
|
|
+ v-for="item in disabledOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
@@ -32,103 +55,132 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { create, detail, edit } from '@/api/device/article'
|
|
|
-import { devMixin, disabledMixin } from '@/mixin/index'
|
|
|
-import Editor from '@/components/Editor/index'
|
|
|
+import { create, detail, edit } from "@/api/device/article";
|
|
|
+import Editor from "@/components/Editor/index";
|
|
|
+import { devMixin, disabledMixin } from "@/mixin/index";
|
|
|
export default {
|
|
|
+ name: "deviceArticleDetail",
|
|
|
mixins: [devMixin, disabledMixin],
|
|
|
components: {
|
|
|
- Editor
|
|
|
+ Editor,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
// 表单
|
|
|
form: {
|
|
|
- linkDevice: []
|
|
|
+ linkDevice: [],
|
|
|
},
|
|
|
// 校验
|
|
|
rules: {
|
|
|
- linkDevice: [{
|
|
|
- required: true, message: '请选择关联设备', trigger: 'change'
|
|
|
- }],
|
|
|
- title: [{
|
|
|
- required: true, message: '请输入文章标题', trigger: 'blur'
|
|
|
- }],
|
|
|
- pic: [{
|
|
|
- required: true, message: '请上传文章背景图', trigger: 'change'
|
|
|
- }],
|
|
|
- content: [{
|
|
|
- required: true, message: '请输入文章内容', trigger: 'blur'
|
|
|
- }],
|
|
|
- shareIcon: [{
|
|
|
- required: true, message: '请上传文章分享图', trigger: 'change'
|
|
|
- }],
|
|
|
- status: [{
|
|
|
- required: true, message: '请选择文章状态', trigger: 'change'
|
|
|
- }]
|
|
|
- }
|
|
|
- }
|
|
|
+ linkDevice: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请选择关联设备",
|
|
|
+ trigger: "change",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ title: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请输入文章标题",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ pic: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请上传文章背景图",
|
|
|
+ trigger: "change",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ content: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请输入文章内容",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ shareIcon: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请上传文章分享图",
|
|
|
+ trigger: "change",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ status: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请选择文章状态",
|
|
|
+ trigger: "change",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.getDevList()
|
|
|
+ this.getDevList();
|
|
|
if (this.$route.query.id) {
|
|
|
- this.form.id = this.$route.query.id
|
|
|
- this.getList()
|
|
|
+ this.form.id = this.$route.query.id;
|
|
|
+ this.getList();
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
// 详情
|
|
|
getList() {
|
|
|
detail({
|
|
|
- id: this.form.id
|
|
|
- }).then(res => {
|
|
|
+ id: this.form.id,
|
|
|
+ }).then((res) => {
|
|
|
if (res.code === 0) {
|
|
|
- this.form = res.data
|
|
|
- this.form.linkDevice = res.data.linkDevice.split(',')
|
|
|
+ this.form = res.data;
|
|
|
+ this.form.linkDevice = res.data.linkDevice.split(",");
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
// 上传
|
|
|
upload(e, key) {
|
|
|
- this.form[key] = e.file
|
|
|
+ this.form[key] = e.file;
|
|
|
},
|
|
|
|
|
|
// 提交
|
|
|
getSubmit() {
|
|
|
this.$refs.form.validate((valid) => {
|
|
|
if (valid) {
|
|
|
- this.form.linkDevice = this.form.linkDevice.join(',')
|
|
|
+ this.form.linkDevice = this.form.linkDevice.join(",");
|
|
|
if (this.form.id) {
|
|
|
- edit(this.form).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- this.$message.success('修改成功!')
|
|
|
- this.cancel()
|
|
|
- }
|
|
|
- }).catch(err => {
|
|
|
- this.form.linkDevice = this.form.linkDevice.split(',')
|
|
|
- })
|
|
|
+ edit(this.form)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$message.success("修改成功!");
|
|
|
+ this.cancel();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.form.linkDevice = this.form.linkDevice.split(",");
|
|
|
+ });
|
|
|
} else {
|
|
|
- create(this.form).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- this.$message.success('新增成功!')
|
|
|
- this.cancel()
|
|
|
- }
|
|
|
- }).catch(err => {
|
|
|
- this.form.linkDevice = this.form.linkDevice.split(',')
|
|
|
- })
|
|
|
+ create(this.form)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$message.success("新增成功!");
|
|
|
+ this.cancel();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.form.linkDevice = this.form.linkDevice.split(",");
|
|
|
+ });
|
|
|
}
|
|
|
} else {
|
|
|
- return false
|
|
|
+ return false;
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
// 取消
|
|
|
cancel() {
|
|
|
this.$tab.closeOpenPage("/device/article");
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|