123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174 |
- /**
- @author:fugy
- @date:2018.10.24
- @info:项目sop编辑和配置页面
- */
- <template>
- <div v-if="itemData">
- <div class="top">
- <el-button size="medium" @click="goBack()">返回</el-button>
- <el-button type="primary" size="medium" @click="save()">保存</el-button>
- </div>
- <hr class="line" />
- <div class="item-info">
- <p><span>问题名称 : </span><span>{{itemData.name}}</span></p>
- <p><span>问题编号 : </span><span>{{itemData.serialId}}</span></p>
- <p><span>问题类型 : </span><span>{{itemData.type}}</span></p>
- <p><span>优先级 : </span><span>{{itemData.priority}}</span></p>
- <!-- <p><span>适用建筑功能类型 : </span><span>{{"12312313"}}</span></p> -->
- <p><span>问题详述 : </span><span>{{itemData.remark || "---"}}</span></p>
- <div class="link-div">
- <span class="left">关联的项目SOP : </span>
- <div class="right">
- <el-button size="medium" @click="selectSopHandle">点击选择</el-button>
- <ul v-if="sopArr.length">
- <li v-for="(item, index) in sopArr" :key="index">
- <span class="sop-name">{{item.sopName}}</span>
- <i class="el-icon-error sop-icon-del" @click="delSopHandle(index)"></i>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <!-- components -->
- <v-select-sop
- :selectSopVisibleFlag="selectSopVisibleFlag"
- :checkedSopArr="sopArr"
- :projectId="projectId"
- @sop-checked="sopCheckedHandle">
- </v-select-sop>
- </div>
- </template>
- <script>
- // component
- import vSelectSop from './selectsop'; //选择sop页面
- // api
- import api from "@/api/fm/sop";
- export default {
- name: "sop-edit-page",
- data() {
- return {
- selectSopVisibleFlag: false, //选择sop的弹窗flag
- projectId:null, //项目id
- itemData: null, //itemData,
- sopArr:[], //sopArr
- }
- },
- components: {
- vSelectSop,
- },
- props:["editData","initFlag"],
- methods: {
- // 点击选择sop
- selectSopHandle() {
- this.selectSopVisibleFlag = !this.selectSopVisibleFlag;
- },
- // 返回
- goBack() {
- let refresh = false
- this.$emit("to-list", refresh);
- },
- // 删除sop
- delSopHandle(index) {
- this.sopArr.splice(index, 1);
- },
- // 保存
- async save() {
- let sopArr = this.sopArr.map((ele, index) => {
- return {sopId: ele.sopId}
- });
- let params = {
- id: this.itemData.id,
- projectId: this.projectId,
- sopList: sopArr
- }
- let {result} = await api.setSop(params);
- if(result === "success") {
- this.$message({
- message: '保存成功',
- type: 'success'
- });
- // 跳转隐藏切换
- let refresh = true;
- this.$emit("to-list", refresh);
- }
-
- },
- /********************组件回传事件****************************** */
- sopCheckedHandle(arr) {
- this.sopArr = arr;
- }
- },
- watch:{
- editData(val) {
- this.itemData = val
- this.projectId = val.projectId;
- this.sopArr = JSON.parse(JSON.stringify(val.sopList));
- },
- initFlag(val) {
- this.projectId = this.editData.projectId;
- this.sopArr = JSON.parse(JSON.stringify(this.editData.sopList));
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .top{
- display: flex;
- justify-content: space-between
- }
- .line {
- background-color: #ccc;
- height: 1px;
- border: none;
- margin: 10px 0
- }
- .item-info{
- padding-left:20%;
- font-size: 14px;
- color: #5e6d82;
- p{
- padding: 10px 0;
- overflow: hidden;
- span {
- float: left;
- }
- span:nth-of-type(1){
- margin-right: 20px;
- }
- }
- .link-div {
- overflow: hidden;
- .left, .right{
- float: left;
- }
- .left {
- padding-top: 8px;
- }
- .right {
- margin-left: 20px;
- }
- li {
- overflow: hidden;
- width: 400px;
- margin: 5px 0;
- background-color: #cccccc;
- padding: 5px 15px;
- .sop-name {
- float: left;
- }
- .sop-icon-del {
- cursor: pointer;
- float: right;
- margin-top:3px;
- }
- }
- }
- }
-
- </style>
-
|