Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
e8c53a05 by xiaomiao
Options

--no commit message

1 parent 0817b5bb
Inline Side-by-side
Showing 4 changed files with 14 additions and 431 deletions
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-05-17 10:40:38
5 -->
6 <template>
7 <div class="clxx">
8 <div class="right">
9 <!-- 材料预览 -->
10 <div class="clyl-box">
11 <div class="menu-tree">
12 <el-button type="primary" native-type="submit" @click="viewDetail" style="width:100%;margin-top:10px;">查看明细</el-button>
13 <div class="item">
14 材料目录({{tableData.length}})
15 <div style="margin-top:10px">
16 <div style="text-align: center;line-height:20px;color:black;font-size:14px" v-if="tableData.length == 0">暂无数据</div>
17 <div v-for="(item,index) in tableData" :key="item.bsmSj"
18 :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" @click="treeClick(item,index)">
19 <span v-if="item.isrequired==1" class="required">必选</span>
20 {{ item.sjmc }}
21 <span class="cl_number">({{item.children ? item.children.length : 0}})</span>
22 </div>
23 </div>
24 </div>
25 <el-button type="primary" native-type="submit" style="width:100%" @click="handleAdd()" v-if="!this.$route.query.viewtype">新增</el-button>
26 </div>
27 <image-preview ref='imageRef' v-if="tableData.length>0" :previewImg="previewImg" @updateList="updateList" @nextPriview="nextPriview"
28 @prevPriview="prevPriview" />
29 </div>
30 </div>
31 <clxxAddDialog v-model="isDialog" />
32 <!-- <clxxDetailDialog v-model="detailDialog" :data="tableData" /> -->
33 </div>
34 </template>
35 <script>
36 import { mapGetters } from "vuex";
37 import clxxAddDialog from "./components/clxxAddDialog.vue";
38 import imagePreview from '@/views/components/imagePreview.vue'
39 import { InitClml, saveClml, deleteSjClml, moveClml } from "@/api/clxx.js";
40 import { popupDialog } from "@/utils/popup.js";
41 export default {
42 components: { clxxAddDialog, imagePreview },
43 data () {
44 return {
45 isDialog: false,
46 iclass: "",
47 // 材料目录选中
48 treeCheckIndex: 0,
49 treeCheckId: "",
50 key: 0,
51 tableData: [],
52 previewImg: {
53 // 收件标识码
54 bsmSj: '',
55 bsmSlsq: this.$parent.bsmSlsq,
56 index: 0,
57 selectedIndex: 0,
58 imgList: []
59 }
60 }
61 },
62 computed: {
63 ...mapGetters(["dictData"])
64 },
65 created () {
66 this.clmlInitList(1)
67 },
68 methods: {
69 // 自动预览
70 nextPriview () {
71 if (this.treeCheckIndex < this.tableData.length) {
72 this.treeCheckIndex++
73 this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj
74 this.previewImg.index = 0
75 this.previewImg.imgList = this.tableData[this.treeCheckIndex].children
76 this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj
77 }
78 },
79 prevPriview () {
80 if (this.treeCheckIndex >= 1) {
81 this.treeCheckIndex--
82 this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj
83 this.previewImg.index = this.previewImg.imgList.length
84 this.previewImg.imgList = this.tableData[this.treeCheckIndex].children
85 this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj
86 }
87 },
88 // 材料目录明细初始化
89 clmlInitList (type) {
90 //type 1：列表初始化 2：新增材料
91 return new Promise(resolve => {
92 this.unitData = this.$parent.unitData;
93 var formdata = new FormData();
94 formdata.append("bsmSldy", this.unitData[0]?.bsmSldy);
95 formdata.append("bsmSlsq", this.$parent.bsmSlsq);
96 InitClml(formdata).then((res) => {
97 if (res.code == 200) {
98 resolve(res.code)
99 if (res.result && res.result.length > 0) {
100 this.tableData = res.result;
101 if (type == 1) {
102 this.treeClick(this.tableData[0], 0);
103 } else {
104 //新增材料后刷新列表焦点置于新增的对象上
105 this.treeClick(this.tableData[this.tableData.length - 1], this.tableData.length - 1);
106 }
107 }
108 } else {
109 this.$message.error(res.message)
110 }
111 })
112 })
113 },
114 setChecked (item) {
115 this.treeCheckId = item.bsmSj;
116 this.title = item.sjmc;
117 this.titleYs = 1;
118 this.titleNum = item.children.length;
119 this.previewImg.imgList = item.children;
120 this.previewImg.bsmSj = item.bsmSj;
121 },
122 updateList (val) {
123 let that = this
124 if (val != null) { //删除最后一张图片时 val=null
125 this.tableData.forEach(item => {
126 if (item.bsmSj === val.bsmSj) {
127 item.children = val.children
128 }
129 })
130 this.previewImg.imgList = _.cloneDeep(val.children)
131 if (this.previewImg.index == this.previewImg.imgList.length) {
132 this.previewImg.index = this.previewImg.index - 1
133 }
134 } else {
135 this.previewImg.imgList = []
136 this.tableData.forEach((item, index) => {
137 if (this.treeCheckId == item.bsmSj) {
138 item.children = []
139 that.treeCheckIndex = index
140 }
141 })
142 }
143
144 },
145 // 添加材料目录
146 handleAdd () {
147 this.isDialog = true;
148 },
149 // 新增弹窗保存
150 addSave (data) {
151 let obj = {
152 bsmSlsq: this.$parent.bsmSlsq,
153 isrequired: "1",
154 sjmc: data.clmc,
155 sjsl: 0,
156 smzt: '',
157 ys: 0,
158 sjlx: data.cllx,
159 sfxjcl: "1", // 是否必选
160 };
161 saveClml(obj).then(async (res) => {
162 if (res.code == 200) {
163 let res = await this.clmlInitList(2)
164 if (res == 200) this.$message({
165 message: "新增成功",
166 type: "success",
167 })
168 }
169 });
170 },
171 // 材料目录点击选中
172 treeClick (item, index) {
173 this.previewImg.index = 0
174 this.treeCheckId = item?.bsmSj
175 this.treeCheckIndex = index
176 this.previewImg.imgList = item?.children
177 this.previewImg.bsmSj = item?.bsmSj
178 },
179 // 小图片点击
180 imgClick (item, index) {
181 this.showImg = item;
182 this.titleYs = index + 1;
183 },
184 // 字典
185 dicStatus (val, code) {
186 let data = this.$store.getters.dictData[code],
187 name = "暂无";
188 if (data) {
189 data.map((item) => {
190 if (item.dcode == val) {
191 name = item.dname
192 }
193 });
194 return name
195 }
196 },
197 //查看明细
198 viewDetail () {
199 this.$popupDialog("查看明细", "djbworkflow/components/dialog/clxxDetailDialog", {
200 data: this.tableData
201 }, "60%")
202 },
203 //设置tableData
204 setTableData (tableData) {
205 this.$nextTick(res => {
206 this.tableData = tableData;
207 })
208 },
209 },
210 };
211 </script>
212 <style scoped lang='scss'>
213 @import "~@/styles/mixin.scss";
214
215 .active {
216 background: $light-blue !important;
217 color: #fff;
218 }
219
220 .required {
221 font-size: 12px;
222 color: $pink;
223 float: left;
224 }
225
226 .cl_number {
227 float: right;
228 }
229
230 .clxx {
231 width: 100%;
232 display: flex;
233 padding-left: 5px;
234 height: calc(100vh - 125px);
235
236 .left {
237 display: flex;
238 flex-direction: column;
239 justify-content: space-between;
240
241 .item {
242 width: 28px;
243 height: 49%;
244 @include flex-center;
245 background-color: #e4e7ed;
246 border-bottom-right-radius: 10px;
247 padding: 5px;
248 cursor: pointer;
249 transition: all 0.3s;
250
251 &:hover {
252 @extend .active;
253 }
254 }
255 }
256
257 .right {
258 width: 100%;
259 height: 100%;
260
261 .clmlmx-box {
262 margin: 0 auto;
263
264 .title {
265 text-align: center;
266 height: 60px;
267 line-height: 60px;
268 border: 1px solid #dfe6ec;
269 font-size: 20px;
270 background: #81d3f81a;
271 margin-bottom: -1px;
272 }
273 }
274
275 .clyl-box {
276 width: 100%;
277 height: 100%;
278 display: flex;
279
280 .menu-tree {
281 width: 20%;
282 min-width: 160px;
283 height: 100%;
284 margin-right: 10px;
285 border-right: 1px dotted #d9d9d9;
286 padding: 0 15px;
287
288 .item {
289 line-height: 30px;
290 padding-top: 5px;
291 border-bottom: 1px solid #e8e8e8;
292 font-size: 16px;
293 text-align: center;
294 color: $light-blue;
295
296 .itemIcon {
297 float: right;
298 line-height: 60px;
299 cursor: pointer;
300 }
301
302 .child {
303 line-height: 32px;
304 border-bottom: 1px solid #e8e8e8;
305 padding-left: 10px;
306 color: #6b6b6b;
307 cursor: pointer;
308 box-sizing: border-box;
309 border-radius: 6px;
310 line-height: 20px;
311 transition: all 0.3s;
312 padding: 8px 0;
313 }
314
315 .child:hover {
316 color: $light-blue;
317 transform: scale(1.1);
318 }
319
320 .checked {
321 border: 1px solid $light-blue;
322 color: $light-blue;
323 }
324 }
325 }
326
327 .clyl-img {
328 width: 75%;
329 height: 100%;
330 background: #f3f4f7;
331 margin: 0 auto;
332 position: relative;
333 }
334 }
335 }
336 }
337 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-05-09 09:20:10
5 -->
6 <template>
7 <dialogBox title="新建材料信息" width="20%" isMain v-model="myValue" @closeDialog="closeDialog" @submitForm="handleSubmit"
8 :isFullscreen="false">
9 <el-form :model="ruleForm" ref="ruleForm" label-width="70px">
10 <el-row>
11 <el-col :span="24">
12 <el-form-item label="材料类型">
13 <el-select v-model="ruleForm.cllx" class="width100" placeholder="请选择">
14 <el-option v-for="item in dictData['A40']" :key="item.dcode" :label="item.dname" :value="item.dcode">
15 </el-option>
16 </el-select>
17 </el-form-item>
18 </el-col>
19 </el-row>
20 <el-row :gutter="20">
21 <el-col :span="24">
22 <el-form-item label="材料名称">
23 <el-input v-model="ruleForm.clmc"></el-input>
24 </el-form-item>
25 </el-col>
26 </el-row>
27 </el-form>
28 </dialogBox>
29 </template>
30
31 <script>
32 import { mapGetters } from "vuex";
33 export default {
34 props: {
35 value: { type: Boolean, default: false },
36 },
37 data () {
38 return {
39 myValue: this.value,
40 ruleForm: {
41 cllx: "",
42 clmc: "",
43 },
44 };
45 },
46 computed: {
47 ...mapGetters(["dictData"]),
48 },
49 watch: {
50 value (val) {
51 console.log("进去新增材料弹框");
52 this.myValue = val;
53 },
54 },
55 methods: {
56 closeDialog () {
57 this.$emit("input", false);
58 this.ruleForm = {
59 cllx: "",
60 clmc: "",
61 }
62 },
63 handleSubmit () {
64 this.$parent.addSave(this.ruleForm);
65 this.ruleForm = {
66 cllx: "",
67 clmc: "",
68 }
69 this.$emit("input", false);
70 },
71 },
72 };
73 </script>
74 <style scoped lang="scss">
75 .submit-button {
76 text-align: center;
77 height: 52px;
78 padding-top: 10px;
79 background-color: #fff;
80 }
81 </style>
...@@ -82,7 +82,7 @@ export default { ...@@ -82,7 +82,7 @@ export default {
82 .gettypebutton{ 82 .gettypebutton{
83 cursor: pointer; 83 cursor: pointer;
84 margin-left: 20px; 84 margin-left: 20px;
85 width: 250px; 85 width: 45%;
86 line-height: 20px; 86 line-height: 20px;
87 background-color: #ebebeb; 87 background-color: #ebebeb;
88 margin-top: 20px; 88 margin-top: 20px;
......
...@@ -242,18 +242,19 @@ export default { ...@@ -242,18 +242,19 @@ export default {
242 type: "warning", 242 type: "warning",
243 }) 243 })
244 .then(() => { 244 .then(() => {
245 deleteFlow(formdata).then((res) => { 245 console.log('删除流程');
246 if (res.code === 200) { 246 // deleteFlow(formdata).then((res) => {
247 this.$message({ 247 // if (res.code === 200) {
248 type: "success", 248 // this.$message({
249 message: "删除成功!", 249 // type: "success",
250 }); 250 // message: "删除成功!",
251 window.close(); 251 // });
252 window.opener.getBpageList(); 252 // window.close();
253 } else { 253 // window.opener.getBpageList();
254 this.$message.error(res.message); 254 // } else {
255 } 255 // this.$message.error(res.message);
256 }); 256 // }
257 // });
257 }) 258 })
258 .catch(() => { 259 .catch(() => {
259 this.$message({ 260 this.$message({
......