港口10.10

src/views/iosBasicData/bports/index.vue

@@ -37,85 +37,38 @@
                              @click="handleDelete">删 除
                   </el-button>
               </template>
+              <template slot-scope="scope" slot="menu">
+                  <el-button
+                      :type="scope.type"
+                      :size="scope.size"
+                      icon="el-icon-edit"
+                      @click.stop="rowCellfun(scope.row, scope.index)"
+                  >编辑
+                  </el-button>
+                  <el-button
+                      :type="scope.type"
+                      :size="scope.size"
+                      icon="el-icon-delete"
+                      @click.stop="rowDel(scope.row, scope.index)"
+                  >删除
+                  </el-button>
+              </template>
+
               <template slot="remarks" slot-scope="scope">
                   <avue-text-ellipsis :text="scope.row.remarks" :height="30" use-tooltip placement="top">
                       <small slot="more">...</small>
                   </avue-text-ellipsis>
               </template>
               <template slot="extendedDataArr" slot-scope="scope">
-         <span style="color: #1e9fff" @click="extendedDataview(scope.row)">
-                {{scope.row.extendedDataArr.length}}
-         </span>
-              </template>
-              <template slot-scope="{type,disabled,row}" slot="extendedDataArrForm">
-                  <el-button type="primary"
-                             size="small"
-                             @click="dialogVisible = true">EDI CODE
-                  </el-button>
+                <span style="color: #1e9fff">
+                    {{scope.row.extendedDataArr.length}}
+                </span>
               </template>
 
           </avue-crud>
 
-          <el-dialog
-              title="EDI CODE"
-              :visible.sync="dialogVisible"
-              width="50%"
-              append-to-body
-              :destroy-on-close="true"
-              :modal-append-to-body="false"
-              :before-close="handleClose">
-              <div>
-                  <el-button type="primary"
-                             size="small"
-                             :disabled="extendedDisabled"
-                             @click="extendedDataAdd">新增
-                  </el-button>
-                  <el-table
-                      stripe
-                      :data="form.extendedDataArr"
-                      id="out-table"
-                      :header-cell-class-name="headerClassName"
-                      style="width: 100%">
-                      <el-table-column
-                          prop="name"
-                          label="名称">
-                          <template slot-scope="{row}">
-                              <el-input v-if="row.edit" size="mini" v-model="row.name" placeholder="请输入名称"></el-input>
-                              <span v-else>{{row.name}}</span>
-                          </template>
-                      </el-table-column>
-                      <el-table-column
-                          prop="value"
-                          label="键值">
-                          <template slot-scope="{row}">
-                              <el-input v-if="row.edit" size="mini" v-model="row.value" placeholder="请输入键值"></el-input>
-                              <span v-else>{{row.value}}</span>
-                          </template>
-                      </el-table-column>
-                      <el-table-column label="操作">
-                          <template slot-scope="scope">
-                              <el-button
-                                  type="text"
-                                  size="mini"
-                                  :disabled="extendedDisabled"
-                                  @click="extendedDataEdit(scope.$index, scope.row)">{{scope.row.edit?'保存':'编辑'}}</el-button>
-                              <el-button
-                                  size="mini"
-                                  type="text"
-                                  :disabled="extendedDisabled"
-                                  @click="extendedDataDelete(scope.$index, scope.row)">删除</el-button>
-                          </template>
-                      </el-table-column>
-                  </el-table>
-              </div>
-              <span slot="footer" class="dialog-footer">
-                <el-button @click="dialogVisible = false;extendedDisabled = false">取 消</el-button>
-                <el-button type="primary" @click="dialogVisible = false;extendedDisabled = false">确 定</el-button>
-          </span>
-          </el-dialog>
-
       </basic-container>
-      <ports-terms ref="portsterms" v-if="!isShow"></ports-terms>
+      <ports-terms ref="portsterms" v-if="!isShow" :detailData="detailData" @goBack="goBack"></ports-terms>
   </div>
 </template>
 
@@ -128,9 +81,8 @@
       components: {portsTerms},
     data() {
       return {
-          // 扩展数据弹窗
-          dialogVisible:false,
-          extendedDisabled:false,
+          // 详情传递的数据
+          detailData:{},
         form: {
             extendedDataArr:[]
         },
@@ -372,9 +324,9 @@
       permissionList() {
         return {
           addBtn: this.vaildData(this.permission.bports_add, false),
-          // viewBtn: this.vaildData(this.permission.bports_view, false),
-          // delBtn: this.vaildData(this.permission.bports_delete, false),
-          // editBtn: this.vaildData(this.permission.bports_edit, false)
+          viewBtn: this.vaildData(this.permission.bports_view, false),
+          delBtn: this.vaildData(this.permission.bports_delete, false),
+          editBtn: this.vaildData(this.permission.bports_edit, false)
         };
       },
       ids() {
@@ -389,86 +341,82 @@
           this.option = await this.getColumnData(this.getColumnName(298), this.optionBack);
       },
     methods: {
-        // 扩展数据表格点击查询详情
-        extendedDataview(row){
-            this.form = row
-            this.extendedDisabled = true
-            this.dialogVisible = true
-        },
-        // 扩展数据弹窗关闭
-        handleClose(done){
-            this.$confirm('确认关闭？')
-                .then(_ => {
-                    done();
-                })
-                .catch(_ => {});
-        },
-        // 扩展数据添加
-        extendedDataAdd(){
-            this.form.extendedDataArr.map(item=>{
-                item.edit = false
-            })
-            this.form.extendedDataArr.push({
-                edit:true
-            })
-        },
-        // 扩展数据编辑
-        extendedDataEdit(index,row) {
-            row.edit = !row.edit
-        },
-        // 扩展数据删除
-        extendedDataDelete(index,row) {
-            this.form.extendedDataArr.splice(index,1)
+          // 详情的返回列表
+        goBack(){
+            // 初始化数据
+            // this.detailData = this.$options.data().detailData;
+            if (JSON.stringify(this.$route.query) != "{}") {
+                this.$router.$avueRouter.closeTag();
+                this.$router.push({
+                    path: "/iosBasicData/bports/index"
+                });
+            }
+            this.isShow = true;
+            this.onLoad(this.page, this.search);
         },
 
         // 添加弹窗开启
         addbtnfun(){
+            this.detailData = {
+                seeDisabled: false,
+            };
             this.isShow = false
             this.$nextTick(()=>{
                 // console.log(this.$refs.portsterms)
                 // console.log(this.$refs.portsterms.bportsDetailfun())
             })
-
             // rowAdd
         },
-        // 添加确认
-      rowSave(row, done, loading) {
-          row.extendedDataArr.map(item=>{
-              delete item.edit
-          })
-          row.extendedData = JSON.stringify(row.extendedDataArr)
-          delete row.extendedDataArr
-        bportsSubmit(row).then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-          done();
-        }, error => {
-          loading();
-          window.console.log(error);
-        });
-      },
-        // 编辑确认
-      rowUpdate(row, index, done, loading) {
-          row.extendedDataArr.map(item=>{
-              delete item.edit
-          })
-          row.extendedData = JSON.stringify(row.extendedDataArr)
-          delete row.extendedDataArr
-        bportsSubmit(row).then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-          done();
-        }, error => {
-          loading();
-          console.log(error);
-        });
-      },
+        // 编辑详情打开
+        rowCellfun(row,index){
+            this.detailData = {
+                seeDisabled: true,
+                id: row.id
+            };
+            this.isShow = false
+            this.$nextTick(()=>{
+                this.$refs.portsterms.bportsDetailfun(row.id)
+            })
+        },
+
+      //   // 添加确认
+      // rowSave(row, done, loading) {
+      //     row.extendedDataArr.map(item=>{
+      //         delete item.edit
+      //     })
+      //     row.extendedData = JSON.stringify(row.extendedDataArr)
+      //     delete row.extendedDataArr
+      //   bportsSubmit(row).then(() => {
+      //     this.onLoad(this.page);
+      //     this.$message({
+      //       type: "success",
+      //       message: "操作成功!"
+      //     });
+      //     done();
+      //   }, error => {
+      //     loading();
+      //     window.console.log(error);
+      //   });
+      // },
+      //   // 编辑确认
+      // rowUpdate(row, index, done, loading) {
+      //     row.extendedDataArr.map(item=>{
+      //         delete item.edit
+      //     })
+      //     row.extendedData = JSON.stringify(row.extendedDataArr)
+      //     delete row.extendedDataArr
+      //   bportsSubmit(row).then(() => {
+      //     this.onLoad(this.page);
+      //     this.$message({
+      //       type: "success",
+      //       message: "操作成功!"
+      //     });
+      //     done();
+      //   }, error => {
+      //     loading();
+      //     console.log(error);
+      //   });
+      // },
       rowDel(row) {
         this.$confirm("确定将选择数据删除?", {
           confirmButtonText: "确定",

src/views/iosBasicData/bports/portsTerms.vue

@@ -9,97 +9,196 @@
                 </el-button>
             </div>
             <div class="add-customer-btn">
-                <el-button  size="small" type="primary" style="margin-right: 8px"
-                           :loading="saveLoading">编 辑
+                <el-button  size="small" type="primary" style="margin-right: 8px" v-if="detailData.seeDisabled"
+                           :loading="saveLoading" @click="editHandle">编 辑
+                </el-button>
+                <el-button  size="small" type="primary" style="margin-right: 8px" v-else
+                            :loading="saveLoading" @click="editCustomer">保 存
                 </el-button>
             </div>
-            <div class="customer-main">
-                <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
-                    <containerTitle title="基础资料"></containerTitle>
-                    <basic-container :showBtn="true">
-                        <el-row>
-                            <el-col v-for="(item, index) in basicData.column" :key="index" :span="item.span ? item.span : 8"
-                                    :class="{ isShow: item.display }" >
-                                <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
-                                    <el-select v-if="item.type == 'select'"  v-model="form[item.prop]" placeholder="请选择" clearable
-                                               filterable style="width: 100%" size="small"
-                                               :disabled="item.disabled">
-                                        <el-option v-for="(ite, inde) in item.dicData" :key="inde" :label="ite.label"
-                                                   :value="ite.value"></el-option>
-                                    </el-select>
-                                    <el-input type="textarea" v-else-if="item.type === 'textarea'" v-model.trim="form[item.prop]" size="small"
-                                              autocomplete="off" :disabled="item.disabled"></el-input>
-                                    <el-input v-else type="age" style="width: 100%;" v-model.trim="form[item.prop]" size="small" autocomplete="off"
-                                              :disabled="item.disabled" clearable></el-input>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                    </basic-container>
-                </el-form>
-            </div>
+        </div>
+        <div class="customer-main">
+            <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
+                <containerTitle title="基础资料"></containerTitle>
+                <basic-container :showBtn="true">
+                    <el-row>
+                        <el-col v-for="(item, index) in basicData.column" :key="index" :span="item.span ? item.span : 8"
+                                :class="{ isShow: item.display }" >
+                            <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
+                                <el-select v-if="item.type == 'select'"  v-model="form[item.prop]" :placeholder="'请选择' + item.label" clearable
+                                           filterable style="width: 100%" size="small"
+                                           :disabled="item.disabled || detailData.seeDisabled">
+                                    <el-option v-for="(ite, inde) in item.dicData" :key="inde" :label="ite.label"
+                                               :value="ite.value"></el-option>
+                                </el-select>
+                                <el-input type="textarea" v-else-if="item.type === 'textarea'" v-model.trim="form[item.prop]" size="small"
+                                          autocomplete="off" :disabled="item.disabled || detailData.seeDisabled" :placeholder="'请输入' + item.label"></el-input>
+                                <el-input v-else type="age" style="width: 100%;" v-model.trim="form[item.prop]" size="small" autocomplete="off"
+                                          :disabled="item.disabled || detailData.seeDisabled" clearable :placeholder="'请输入' + item.label"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </basic-container>
+            </el-form>
+        </div>
 
+        <div class="customer-main margintop">
+            <containerTitle title="船公司信息"></containerTitle>
+            <basic-container>
+                <div style="margin-bottom: 10px">
+                    <el-button type="primary"
+                               size="small"
+                               :disabled="detailData.seeDisabled"
+                               @click="shippingCompanyAdd">新增数据
+                    </el-button>
+                </div>
+                <el-table
+                    stripe
+                    :data="form.bportsTermsList"
+                    id="out-table"
+                    :header-cell-class-name="headerClassName"
+                    style="width: 100%">
+                    <el-table-column
+                        prop="carrierName"
+                        label="船公司名称">
+                    </el-table-column>
+                    <el-table-column
+                        prop="serviceTermCode"
+                        label="服务条款">
+                    </el-table-column>
+                    <el-table-column
+                        prop="details"
+                        label="船公司特殊要求">
+                    </el-table-column>
+                    <el-table-column
+                        prop="remarks"
+                        label="备注">
+                    </el-table-column>
+                    <el-table-column label="操作">
+                        <template slot-scope="scope">
+                            <el-button
+                                type="text"
+                                size="small"
+                                :disabled="detailData.seeDisabled"
+                                @click="shipCompanyEdit(scope.$index, scope.row)">编辑</el-button>
+                            <el-button
+                                size="small"
+                                type="text"
+                                :disabled="detailData.seeDisabled"
+                                @click="shipCompanyDelete(scope.$index, scope.row)">删除</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </basic-container>
+        </div>
 
-            <div class="customer-main">
-                <containerTitle title="扩展数据"></containerTitle>
-                <basic-container>
+        <div class="customer-main margintop">
+            <containerTitle title="扩展数据"></containerTitle>
+            <basic-container>
+                <div style="margin-bottom: 10px">
                     <el-button type="primary"
                                size="small"
+                               :disabled="detailData.seeDisabled"
                                @click="extendedDataAdd">新增数据
                     </el-button>
-                    <el-table
-                        stripe
-                        :data="form.extendedDataArr"
-                        id="out-table"
-                        :header-cell-class-name="headerClassName"
-                        style="width: 100%">
-                        <el-table-column
-                            prop="name"
-                            label="名称">
-                            <template slot-scope="{row}">
-                                <el-input v-if="row.edit" size="small" v-model="row.name" placeholder="请输入名称"></el-input>
-                                <span v-else>{{row.name}}</span>
-                            </template>
-                        </el-table-column>
-                        <el-table-column
-                            prop="value"
-                            label="键值">
-                            <template slot-scope="{row}">
-                                <el-input v-if="row.edit" size="small" v-model="row.value" placeholder="请输入键值"></el-input>
-                                <span v-else>{{row.value}}</span>
-                            </template>
-                        </el-table-column>
-                        <el-table-column label="操作">
-                            <template slot-scope="scope">
-                                <el-button
-                                    type="text"
-                                    size="small"
-                                    @click="extendedDataEdit(scope.$index, scope.row)">{{scope.row.edit?'保存':'编辑'}}</el-button>
-                                <el-button
-                                    size="small"
-                                    type="text"
-                                    @click="extendedDataDelete(scope.$index, scope.row)">删除</el-button>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                </basic-container>
-            </div>
-
+                </div>
+                <el-table
+                    stripe
+                    :data="form.extendedDataArr"
+                    id="out-table"
+                    :header-cell-class-name="headerClassName"
+                    style="width: 100%">
+                    <el-table-column
+                        prop="name"
+                        label="名称">
+                        <template slot-scope="{row}">
+                            <el-input v-if="row.edit" size="small" v-model="row.name" placeholder="请输入名称"></el-input>
+                            <span v-else>{{row.name}}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column
+                        prop="value"
+                        label="键值">
+                        <template slot-scope="{row}">
+                            <el-input v-if="row.edit" size="small" v-model="row.value" placeholder="请输入键值"></el-input>
+                            <span v-else>{{row.value}}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作">
+                        <template slot-scope="scope">
+                            <el-button
+                                type="text"
+                                size="small"
+                                :disabled="detailData.seeDisabled"
+                                @click="extendedDataEdit(scope.$index, scope.row)">{{scope.row.edit?'保存':'编辑'}}</el-button>
+                            <el-button
+                                size="small"
+                                type="text"
+                                :disabled="detailData.seeDisabled"
+                                @click="extendedDataDelete(scope.$index, scope.row)">删除</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </basic-container>
         </div>
+
+        <!--船公司添加弹窗-->
+        <el-dialog
+            title="船公司"
+            :visible.sync="shipVisible"
+            width="50%"
+            append-to-body
+            :destroy-on-close="true"
+            :modal-append-to-body="false"
+            :before-close="shipClose">
+            <div>
+                <el-form :model="shipForm" ref="shipForm" label-width="120px" class="demo-ruleForm">
+                    <el-row>
+                        <el-col v-for="(item, index) in shipData.column" :key="index" :span="item.span ? item.span : 12"
+                                :class="{ isShow: item.display }" >
+                            <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
+                                <el-input type="textarea" v-if="item.type === 'textarea'" v-model.trim="shipForm[item.prop]" size="small"
+                                          autocomplete="off" :disabled="item.disabled" :placeholder="'请输入' + item.label"></el-input>
+                                <div v-else-if="item.prop == 'carrierName'">
+                                    船公司插槽目前还没有2023-10-10
+                                </div>
+                                <el-input v-else type="age" style="width: 100%;" v-model.trim="shipForm[item.prop]" size="small" autocomplete="off"
+                                          :disabled="item.disabled" clearable :placeholder="'请输入' + item.label"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                    <el-button @click="shipVisible = false;">取 消</el-button>
+                    <el-button type="primary" @click="shipcompanyConfirm">确 定</el-button>
+                </span>
+        </el-dialog>
     </div>
 </template>
 
 <script>
 import {bportsDetail, bportsSubmit} from "@/api/iosBasicData/bports";
-
     export default {
+        props:{
+            detailData: {
+                type: Object
+            }
+        },
         data(){
             return {
                 pageLoading:false,
-                saveLoading:true,
+                saveLoading:false,
+                // 船公司弹窗
+                shipVisible:false,
+                // 船公司弹窗绑定的数据
+                shipForm:{},
+                shipIndex:null,
 
                 // 获取到的数据
                 form:{
                     extendedDataArr:[],
+                    bportsTermsList:[],
                 },
                 // 基础资料数据
                 basicData:{
@@ -231,25 +330,124 @@ import {bportsDetail, bportsSubmit} from "@/api/iosBasicData/bports";
                         },
 
                     ]
-                }
+                },
+                // 传公司数据
+                shipData:{
+                    column:[
+                        {
+                            label: "传公司名称",
+                            prop: "carrierName",
+                            rules: [{
+                                required: true,
+                                message: "请输入传公司名称",
+                                trigger: "blur"
+                            }]
+                        },
+                        {
+                            label: "服务条款",
+                            prop: "serviceTermCode",
+                            rules: [{
+                                required: true,
+                                message: "请输入服务条款",
+                                trigger: "blur"
+                            }]
+                        },
+                        {
+                            label: "船公司特殊要求",
+                            prop: "details",
+                            rules: [{
+                                required: true,
+                                message: "请输入船公司特殊要求",
+                                trigger: "blur"
+                            }]
+                        },
+                        {
+                            label: "备注",
+                            prop: "remarks",
+                            span:24,
+                            type: 'textarea',
+                            minRows: 3,
+                        },
+                    ]
+                },
             }
         },
         methods:{
             // 获取详情数据
             bportsDetailfun(id){
+                this.pageLoading = true
                 bportsDetail(id).then(res => {
                     this.form = res.data.data;
+                    this.pageLoading = false
                 });
             },
-            // 添加保存接口
+            // 编辑按钮更改状态
+            editHandle(){
+                this.detailData.seeDisabled = false;
+            },
+            // 保存按钮
+            editCustomer(){
+                this.$refs.form.validate((valid)=>{
+                    if (valid) {
+                        // 判断是否有id
+                        // if (this.form.id) {
+                        //     this.form.bportsTermsList.map(item=>{
+                        //         item.pid = this.form.id
+                        //     })
+                        // }else {
+                        // }
+                        this.bportsSubmitfun()
+                    }else {
+                        return false;
+                    }
+                })
+            },
+            // 保存接口
             bportsSubmitfun(){
-                bportsSubmit().then(()=>{
+                this.form.extendedData = JSON.stringify(this.form.extendedDataArr)
+                bportsSubmit(this.form).then((res)=>{
+                    console.log(res,408)
                     this.$message({
                         type: "success",
                         message: "操作成功!"
                     });
+                    // this.bportsDetailfun(res.data.id)
+                    this.detailData.seeDisabled = true;
                 })
             },
+            // 船公司添加
+            shippingCompanyAdd(){
+                this.shipVisible = true
+            },
+            // 船公司编辑
+            shipCompanyEdit(index,row){
+                this.shipForm = JSON.parse(JSON.stringify(row))
+                this.shipIndex = index
+                this.shipVisible = true
+            },
+            // 船公司删除
+            shipCompanyDelete(index,row){
+                this.form.bportsTermsList.splice(index,1)
+            },
+            // 船公司确认
+            shipcompanyConfirm(){
+                if (this.shipIndex != null) {
+                    this.form.bportsTermsList.splice(this.shipIndex,1,this.shipForm)
+                }else {
+                    this.form.bportsTermsList.push(this.shipForm)
+                }
+                this.shipForm = {}
+                this.shipIndex = null
+                this.shipVisible = false
+            },
+            // 船公司关闭
+            shipClose(done){
+                this.$confirm('确认关闭？')
+                    .then(_ => {
+                        done();
+                    })
+                    .catch(_ => {});
+            },
             // 扩展数据添加
             extendedDataAdd(){
                 this.form.extendedDataArr.map(item=>{
@@ -269,7 +467,7 @@ import {bportsDetail, bportsSubmit} from "@/api/iosBasicData/bports";
             },
             //返回列表
             backToList() {
-
+                this.$emit('goBack')
             },
             // 更改表格颜色
             headerClassName(tab){
@@ -296,11 +494,17 @@ import {bportsDetail, bportsSubmit} from "@/api/iosBasicData/bports";
     background: #ecf5ff !important;
 }
 .borderless {
+    height: 100%;
+    box-sizing: border-box
 
 }
     .customer-main {
-        margin-top: 20px;
-        width: calc(100% - 140px);
+        //margin-top: 20px;
+        //width: calc(100% - 140px);
+        margin-bottom: 15px;
+    }
+    .margintop {
+        margin-top: 10px;
     }
 ::v-deep.el-form-item {
     margin-bottom: 0;