trace-admin/src/views/product/landJob/index.vue

<template>
  <div class="app-container">
    <div class="app-container-search main-bgcolor main-radius">
      <h1 class="">种植作业</h1>
      <br />

     <!-- 搜索工作栏 -->
      <RecordForm
      ref="searchForm"
      :searchFormParam="{queryParams, dataSource}"
      :showSearch.sync="showSearch"
      @handleQuery="handleQuery"

      @resetQuery="resetQuery"
      @selectChage="selectChage"
      ></RecordForm>
    </div>


    <div class="app-container-list main-bgcolor main-radius shopping">

      <div class="shopping-top">
        <div class="shopping-title">作业列表</div>
        <el-button class="shopping-add-btn" type="primary" :loading="exportLoading" @click="handleAdd"
                  v-hasPermi="['basic:goods-info:create']">添加作业</el-button>
      </div>
    <!-- 列表 -->
    <el-table v-loading="loading" :data="list">
      <el-table-column label="编号" align="center" type="index" width="80" >
        <template v-slot="{ $index }">
          <span>{{($index+1)+ (queryParams.pageNo-1)*queryParams.pageSize }}</span>
        </template>
      </el-table-column>
      <el-table-column label="地块名称" align="center" prop="landName" width="160" />
      <el-table-column label="地块编码" align="center" prop="landId" min-width="200" />
      <el-table-column label="任务类型" align="center" prop="jobTypeName" width="160" >
        <!-- <template v-slot="{ row }">
          <span>{{filterJobType(row.jobType)}}</span>
        </template> -->
      </el-table-column>
      <el-table-column label="所属商户" align="center" prop="belongBusinessName" width="160" />
      <el-table-column label="作业时间" align="center" prop="jobDate" width="160" >
        <template v-slot="{row}">
          <span>{{parseTime(row.jobDate)}}</span>
        </template>
      </el-table-column>
       <el-table-column label="状态" align="center" prop="blockState" >
         <template v-slot="{ row }">
           <el-tag
             :type="row.blockState==0?'info':row.blockState == 1?'success':'danger'">
             {{filterState(row.blockState)}}
           </el-tag>
         </template>
       </el-table-column>
      <el-table-column label="作业员工" align="center" prop="jobWorker" />
      <el-table-column label="备注" align="center" prop="remarks" />
      <el-table-column label="操作" align="center" fixed="right" width="200" class-name="small-padding fixed-width">
        <template v-slot="{ row }">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row,false)" v-if="row.blockState == 0"
                     v-hasPermi="['product:land-job:update']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row,true)" v-if="row.blockState != 0"
                     v-hasPermi="['product:land-job:update']">查看</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)"
                     v-hasPermi="['product:land-job:delete']">删除</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleState(row,'upChain')" v-if="row.blockState == 0"
                     v-hasPermi="['product:land-job:update']">上传</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleState(row,'freeze')" v-if="row.blockState == 1"
                     v-hasPermi="['product:land-job:update']">冻结</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleState(row,'active')" v-if="row.blockState == 2"
                     v-hasPermi="['product:land-job:update']">激活</el-button>
        </template>
      </el-table-column>
      <div slot="empty">
        <EmptyTable />
      </div>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>
    </div>
    <!-- 对话框(添加 / 修改) -->
    <el-dialog class="add-dialog" :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="90px" label-position="top">
       <div class="add-items">
         <el-form-item label="所属商户" prop="belongBusinessId">
           <el-select ref="businessName" @change="handchangeBusiness" v-model="form.belongBusinessId" placeholder="请选择" :disabled="isEdit">
             <el-option v-for="item in businessNameList" :key="item.id" :label="item.businessName" :value="item.id" />
           </el-select>
         </el-form-item>
        <el-form-item label="地块名称" prop="landId">
          <el-select ref="landName" @change="handChangelands" v-model="form.landId" placeholder="请选择所属商户" :disabled="isWatch">
            <el-option v-for="item in landNameList" :key="item.landId" :type="item.landType" :label="item.landName" :value="item.landId" />
          </el-select>
        </el-form-item>
       </div>
       <div class="add-items">
       <el-form-item label="任务类型" prop="jobType">
          <el-select v-model="form.jobType" placeholder="请选择所属商户" :disabled="isWatch">
            <el-option v-for="item in typeList" :label="item.typeName" :key="item.id" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="作业员工" prop="jobWorkerId">
          <el-select ref="workerName" @change="handChangeworker" v-model="form.jobWorkerId" placeholder="请选择所属商户" :disabled="isWatch">
            <el-option v-for="item in workerNameList" :key="item.id" :label="item.workersName" :value="item.id" />
          </el-select>
        </el-form-item>
       </div>
       <div class="add-items">
         <el-form-item label="作业日期" prop="jobDate">
          <el-date-picker style="width: 100%;" clearable v-model="form.jobDate" :disabled="isWatch" type="datetime" value-format="timestamp" placeholder="选择作业日期" />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="form.remarks" placeholder="请输入备注" :disabled="isWatch" />
        </el-form-item>
       </div>
       <div style="width: 60%;">
        <el-form-item label="作业图片" prop="jobImgUrl">
          <imageUpload class="imageUpload" :disabled="isWatch" v-model="form.jobImgUrl" :limit="6"/>
        </el-form-item>
       </div>
       <div class="add-items">
        <el-form-item label="作业视频" prop="jobVideoUrl">
          <videoUpload class="videoUpload" :disabled="isWatch" v-model="form.jobVideoUrl" :value="form.jobVideoUrl" />
        </el-form-item>
       </div>
      </el-form>

      <el-button
       v-if="!isWatch"
        style="float: right; margin-bottom: 10px"
        type="primary"
        :loading="exportLoading"
        @click="handleAddInputs"
        >添加农资</el-button
      >
      <el-table v-loading="loading" :data="inputsList">
        <el-table-column label="农资名称" align="center" prop="inputsName" width="100" />
        <el-table-column label="农资编码" align="center" prop="inputsId" width="240" />
        <el-table-column label="农资批次编号" align="center" prop="inputsBatchId" width="180" >
          <template v-slot="{ row , $index }">
            <el-select v-model="row.inputsBatchId" :disabled="isWatch" placeholder="请选择" @focus="getHarvestOptions($index,row)" :loading="row.harvestLoading">
              <el-option
              v-for="item in harvestOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="数量" align="center" prop="inputsNum" width="140" >
          <template v-slot="{ row }">
            <el-input-number class="w100" :disabled="isWatch" v-model="row.inputsNum" controls-position="right" :min="1"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="图片" align="center" prop="image" width="80" >
          <template v-slot="{ row , $index }">
            <el-button size="mini" type="text" :disabled="isWatch" @click="handleEditImage(row,$index)"
                       >编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column label="视频" align="center" prop="video" width="80" >
          <template v-slot="{ row , $index }">
            <el-button size="mini" type="text" :disabled="isWatch" @click="handleEditVideo(row,$index)"
                       >编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" prop="inputsUnit" width="70" />
        <!-- 目前说明字段用的是备注  后续可能还需要确定  数据库缺少说明字段 -->
        <el-table-column label="说明" align="center" prop="inputsDesc" width="160" v-if="!isWatch">
          <template v-slot="{ row }">
            <el-input v-model="row.inputsDesc" :disabled="isWatch" placeholder="请输入"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="说明" align="center" prop="inputsDesc" fixed="right" width="160" v-if="isWatch">
          <template v-slot="{ row }">
            <el-input v-model="row.inputsDesc" :disabled="isWatch" placeholder="请输入"></el-input>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" v-if="!isWatch" class-name="small-padding fixed-width" width="100">
          <template v-slot="scope">
            <el-popconfirm
              title="确定删除此作业农资？"
              @confirm="handleDeleteInputs(scope.row,scope.$index)">
              <el-button slot="reference" size="mini" type="text" icon="el-icon-delete">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
        <div slot="empty">
          <EmptyTable />
        </div>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog class="add-dialog" :title="titleInputs" :visible.sync="openInputs" width="900px" append-to-body>
       <Transfer
       ref="goodsTransfer"
       :data="inputInfoOptions"
       :vModel="inputCheckedIdList"
       :renderContent="renderTransferLabel"
       :titles="['可选', '已选']"
       @change="handleSelectChange"
       :leftCurrentPage="leftCurrentPage"
       :rightCurrentPage="rightCurrentPage"
       @handlePageChange="handlePageChange"
       :leftDefaultChecked="leftDefaultChecked"
       :rightDefaultChecked="rightDefaultChecked"
       ></Transfer>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormTransfer">确 定</el-button>
        <el-button @click="openInputs = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
    :title="titleEdit"
    :visible.sync="openEdit"
    width="600px"
    append-to-body>
      <imageUpload v-if="titleEdit=='编辑图片'" class="imageUpload" v-model="inputsImgUrl" :limit="6"/>
      <videoUpload v-if="titleEdit=='编辑视频'" class="videoUpload" v-model="inputsVideoUrl" :value="inputsVideoUrl" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditFile">确 定</el-button>
        <el-button @click="openEdit = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  createLandJob,
  updateLandJob,
  deleteLandJob,
  getLandJob,
  getLandJobPage,
  exportLandJobExcel,
  landJobUpChain,
  landJobFreeze,
  landJobActive,
} from "@/api/product/landJob";
import RecordForm from '@/components/Customer/SearchForm'
import EmptyTable from '@/components/EmptyTable'
import Transfer from '@/components/Customer/Transfer'
import VideoUpload from '@/components/VideoUpload'
import ImageUpload from '@/components/ImageUpload'
import { getLandInfoLandNameList , getBusinessNamesByLandId } from '@/api/product/landInfo';
import { getInputsInfoInputsInfoList , getInputsInfoListByBelongBusinessId } from '@/api/basic/inputsInfo';
import { getBusinessNameList } from '@/api/basic/businessInfo';
import { getFindByBelongBusinessId } from '@/api/basic/workersInfo';
import { getInputsBatchInputsBatchIdList } from '@/api/product/inputsBatch';
import { deleteLandJobInputs } from '@/api/product/landJobInputs';
import { getByBusinessInfoId } from '@/api/product/landJobType';
export default {
  name: "LandJob",
  components: {
    RecordForm,
    EmptyTable,
    Transfer,
    VideoUpload,
    ImageUpload,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 种植/养殖/畜牧作业列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        landId: null,
        landName: null,
        landType: null,
        jobType: null,
        jobWorker: null,
        jobWorkerId: null,
        jobDate: [],
        remarks: null,
        belongBusinessId: null,
        belongBusinessName: null,
        createTime: [],
        blockState: null,
      },
       dataSource: [
        {
          key: 'landName',
          itemType: 'input',
          label: '地块名称',
          placeholder: '请输入',
          onEnterKeyUp: this.handleQuery,
        },
        {
          key: 'landId',
          itemType: 'input',
          label: '地块编码',
          placeholder: '请输入',
          onEnterKeyUp: this.handleQuery,
        },
        {
          key: 'belongBusinessName',
          itemType: 'select',
          label: '所属商户',
          placeholder: '请输入',
          onEnterKeyUp: this.handleQuery,
          options:[],
          isNet: true,
        },
        {
          key: 'jobType',
          itemType: 'select',
          label: '任务类型',
          placeholder: '请先选择所属商户',
          onEnterKeyUp: this.handleQuery,
          options: [],
        },

      ],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        landId: [{ required: true, message: "地块ID不能为空", trigger: "blur" }],
        landName: [{ required: true, message: "地块名称不能为空", trigger: "blur" }],
        landType: [{ required: true, message: "类型：0：地块 1：鱼塘  2：牧场不能为空", trigger: "change" }],
        jobType: [{ required: true, message: "任务类型不能为空", trigger: "change" }],
        jobWorker: [{ required: true, message: "作业员工不能为空", trigger: "blur" }],
        jobWorkerId: [{ required: true, message: "作业ID不能为空", trigger: "blur" }],
        jobDate: [{ required: true, message: "作业日期不能为空", trigger: "blur" }],
        belongBusinessId: [{ required: true, message: "所属商户id不能为空", trigger: "blur" }],
        belongBusinessName: [{ required: true, message: "所属商户名称不能为空", trigger: "blur" }],
      },
       // 所属商户列表
      businessNameList: [],
      //所有地块列表
      landNameList: [],
      //所有员工列表
      workerNameList: [],
      //所有农资列表
      inputsInfoList: [],

      // ********************* 添加农资 *********************
      openInputs: false,//是否展示农资-弹窗
      titleInputs: '',//农资-标题

      /***********************  选择农资弹窗相关参数  ************************/
      // 农资可选列表
      inputInfoOptions: [],
      inputsList: [],
      // 已选中的农资列表【临时】，只在弹窗时作为临时存放用
      inputCheckedIdList: [],
      // 这里定义俩个参数是为了每次重新打开组件时可以重置当前页码到1
      leftCurrentPage: 1,
      rightCurrentPage: 1,
      leftDefaultChecked: [],
      rightDefaultChecked: [],
      // 已选/已入数据库的农资信息列表
      inputInfoList: [],

      harvestOptions: [],

      // 是否展示图片/视频编辑
      openEdit: false,
      // 编辑图片/编辑视频
      titleEdit: '',
      // 临时视频列表
      inputsVideoUrl: [],
      // 临时图片列表
      inputsImgUrl: [],
      // 编辑图片/编辑视频 数据下标
      indexEdit: 0,
      // 编辑作业 true只读，false修改
      isWatch: false,
      // 作业 false新增 true编辑
      isEdit: false,
      // 任务类型列表
      typeList: [],
    };
  },
  created() {
    this.getList();
    this.initDate();
  },
  methods: {
    filterState(state){
      let text = '';
      switch(state){
        case 0:
          text = '未上传';
          break;
        case 1:
          text = '已上传';
          break;
        case 2:
          text = '冻结';
          break;
        default:
          text = '未知';
          break;
      }
      return text;
    },
    handleState(row,type){
      const id = row.id;
      let text;
      switch(type){
        case 'upChain':
          text = '上传';
          break;
        case 'freeze':
          text = '冻结';
          break;
        case 'active':
          text = '激活';
          break;
      }
      this.$modal.confirm(`是否确认${text}种植作业编号为${id}的数据项?`).then(function() {
          switch(type){
            case 'upChain':
              return landJobUpChain(id);
            case 'freeze':
              return landJobFreeze(id);
            case 'active':
              return landJobActive(id);
          }
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess(`${text}成功`);
        }).catch(() => {});
    },
    async initDate(){
      // 商户列表
      let res = await getBusinessNameList();
      this.businessNameList = res.data;
      res.data.map(item=>{
        item.label = item.businessName;
        item.value = item.businessName;
      });
      this.dataSource[2].options = res.data;

      // 地块列表
      // let rest = await getLandInfoLandNameList();
      // this.landNameList = rest.data;

      // 农资列表
      // let inps = await getInputsInfoInputsInfoList();
      // this.inputInfoList = inps.data;
    },
    searchDate(e){
      let belongBusinessInfo = this.businessNameList.find(item=>item.id == e);
      getBusinessNamesByLandId({ belongBusinessId: e }).then(res => {
        this.landNameList = res.data;
      });
      getFindByBelongBusinessId({ belongBusinessId: e }).then(res=>{
        this.workerNameList = res.data;
      });
      getInputsInfoListByBelongBusinessId({ belongBusinessId: e }).then((res)=>{
        this.inputInfoList = res.data;
      });
      getByBusinessInfoId({ id: e }).then((res)=>{
        this.typeList = res.data;
      });
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 执行查询
      getLandJobPage(this.queryParams).then(response => {
        let list = response.data.list;
        list.map(item => {
          if( item.jobImgUrl ){
            if( item.jobImgUrl.indexOf(',') != -1 ) {
              item.jobImgUrl = item.jobImgUrl.split(',');
            }else{
              item.jobImgUrl = [item.jobImgUrl];
            }
          }
        });
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        landId: undefined,
        landName: undefined,
        landType: undefined,
        jobType: undefined,
        jobWorker: undefined,
        jobWorkerId: undefined,
        jobDate: undefined,
        remarks: undefined,
        belongBusinessId: undefined,
        belongBusinessName: undefined,
        blockState: undefined,
        jobImgUrl: undefined,
        jobVideoUrl: undefined,
      };
      this.resetForm("form");
    },

    //绑定地块列表id的同时获取所属商户昵称
    handChangelands(){
      this.$nextTick(()=>{
        this.form.landName = this.$refs.landName.selected.label;
        this.form.landType = this.$refs.landName.selected.$attrs.type;
        console.log(this.form)
      });
    },

    //绑定员工列表id的同时获取员工昵称
    handChangeworker(){
      this.$nextTick(()=>{
        this.form.jobWorker = this.$refs.workerName.selected.label;
      });
    },

    handchangeBusiness(e){
      this.$nextTick(()=>{
         this.form.belongBusinessName = this.$refs.businessName.selected.label;
         this.form.landId = '';
         this.form.jobWorkerId = '';
         this.inputsList = [];
         this.inputCheckedIdList = [];
         this.searchDate(e);
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dataSource[3].options = []
      this.resetForm("queryForm", "searchForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.inputsList = [];
      this.title = "添加种植/养殖/畜牧作业";
      this.isWatch = false;
      this.isEdit = false;
    },
    /** 修改按钮操作 */
    // status true查看 false修改
    handleUpdate(row,status) {
      this.reset();
      const id = row.id;
      getLandJob(id).then(res => {
        res.data.jobType = Number(res.data.jobType);
        this.searchDate(res.data.belongBusinessId);
        this.form = res.data;
        this.inputsList = res.data.landJobIds;
        this.open = true;
        this.isWatch = status;
        let text = status?'查看':'修改';
        this.title = `${text}种植/养殖/畜牧作业`;
        this.isEdit = true;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        // if( this.inputsList.length == 0 ){
        //   this.$message.error("农资信息不能为空");
        //   return;
        // }
        this.inputsList.inputsImgUrl = this.inputsList.concat(this.inputsList.inputsVideoUrl);
        let form = JSON.parse(JSON.stringify(this.form));
        form = {
          ...form,
          landJobIds: this.inputsList,
        }
        // 修改的提交
        if (form.id != null) {
          updateLandJob(form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          });
          return;
        }
        // 添加的提交
        createLandJob(form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id;
      this.$modal.confirm('是否确认删除种植/养殖/畜牧作业编号为"' + id + '"的数据项?').then(function() {
          return deleteLandJob(id);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      // 处理查询参数
      let params = {...this.queryParams};
      params.pageNo = undefined;
      params.pageSize = undefined;
      this.$modal.confirm('是否确认导出所有种植/养殖/畜牧作业数据项?').then(() => {
          this.exportLoading = true;
          return exportLandJobExcel(params);
        }).then(response => {
          this.$download.excel(response, '种植/养殖/畜牧作业.xls');
          this.exportLoading = false;
        }).catch(() => {});
    },

    /** 添加农资 */
    handleAddInputs(){
      if(!this.form.belongBusinessId){
        this.$message.error("请先选择商户");
        return false;
      }
      this.titleInputs = '农资信息列表';
      this.openInputs = true;
      let data = JSON.parse(JSON.stringify(this.inputInfoList));
      const options = [];
      for(let i in data) {
        options.push({
          key: data[i].inputsId,
          label: data[i].inputsName,
          isNewInputs: 1,
          ...data[i]
        });
      }
      this.inputInfoOptions = options;
      this.leftCurrentPage = 1;
      this.rightCurrentPage = 1;
      this.leftDefaultChecked = [];
      this.rightDefaultChecked = [];
    },

    // 通过点击下拉框触发请求，仅请求一次
    getHarvestOptions(index,row){
      if(row.harvestRes){
        this.harvestOptions = this.inputsList[index].harvestOptions;
        return false;
      }
      this.$set(this.inputsList[index],'harvestLoading',true);
      getInputsBatchInputsBatchIdList({
        inputsId: row.inputsId,
      }).then(res=>{
        let arr = []
        if(res.data){
          res.data.map((item)=>{
            arr.push({
              label:  item,
              value: item,
            })
          });
        }
        this.$nextTick(()=>{
          this.harvestOptions = arr;
          this.$set(this.inputsList[index],'harvestOptions',arr);
          this.$set(this.inputsList[index],'harvestRes',true);
          this.$set(this.inputsList[index],'harvestLoading',false);
        });
      });
    },

    async handleDeleteInputs(row,index){
      if(!row.isNewInputs){
        if(row.id){
          let res = await deleteLandJobInputs(row.id);
          if(res.data){
            this.$message.success("删除成功");
          }
          console.log('删除结果',res);
        }
        this.inputsList.splice(index,1);
      }else{
        this.inputsList.splice(index,1);
        this.$message.success("删除成功");
      }

    },

    handleEditImage(row,index){
      this.titleEdit = "编辑图片";
      this.openEdit = true;
      this.indexEdit = index;
      this.inputsImgUrl = row.inputsImgUrl?row.inputsImgUrl:[];
    },

    handleEditVideo(row,index){
      this.titleEdit = "编辑视频";
      this.openEdit = true;
      this.indexEdit = index;
      this.inputsVideoUrl = row.inputsVideoUrl?row.inputsVideoUrl:undefined;
      console.log('视频列表',this.inputsVideoUrl);
    },

    submitEditFile(){
      if( this.titleEdit == "编辑图片" ){
        this.inputsList[this.indexEdit].inputsImgUrl = this.inputsImgUrl;
      }else{
        this.inputsList[this.indexEdit].inputsVideoUrl = this.inputsVideoUrl;
      }
      this.openEdit = false;
      this.inputsImgUrl = [];
      this.inputsVideoUrl = [];
    },

    /***********************  选择商品弹窗相关事件  ************************/
    // 类型1 向指定目标数组添加对象参数
    getCheckGoods(start,end,target){
      let total = this.inputInfoOptions.length;
      let list = this.inputCheckedIdList;
      let options = this.inputInfoOptions;
      for( var x=0; x<total ; x++  ){
        if( options[x].inputsId == list[start] ){
          options[x].harvestLoading = false;
          options[x].harvestOptions = [];
          options[x].harvestRes = false;//默认未请求(入库批次接口)
          let isHas = true;
          for(let i=0;i<this[target].length;i++){
            if(this[target][i].inputsId == options[x].inputsId) isHas = false;
          }
          if(isHas) this[target].push(options[x]);
          if(end>start) this.getCheckGoods(start+1,end,target);
          return false;
        }
      }
    },
    /** 穿梭框提交按钮 */
    submitFormTransfer(){
      let num = this.inputCheckedIdList.length;
      this.getCheckGoods(0,num,'inputsList');
      this.openInputs = false;
    },
    /**
     *
     * @param {*} value 已选中的值[数组]
     * @param {*} direction 移动方向 left，right
     * @param {*} movedKeys 移动的key数组
     */
    handleSelectChange(value, direction, movedKeys) {
      this.inputCheckedIdList = value;
    },
    renderTransferLabel(h, option) {
      return <div style="display:flex;align-item: center;">
      <span title={option.inputsId} style="display: inline-block;max-width: 110px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{ option.inputsId }</span>
      <span style='margin: 0px 30px; color: #e6ebf5;display: inline-block;'>|</span><span>{ option.inputsName }</span>
      </div>;
    },
    /*  左侧分页参数变化时  */
    // 由于vue双向绑定的一些机制，所以需要在这边给定一个方法让子组件调用并修改传入子组件的参数
    // 这里做同步修改之后，再次打开该弹窗时上面的重置数据才会被子组件监听到。。。
    // 当然如果嫌麻烦可以直接给dialog 加个if直接销毁
    handlePageChange(value, type) {
      if(type === 'left') {
        this.leftCurrentPage = value;
      } else {
        this.rightCurrentPage = value;
      }
    },

    selectChage({ value, type, book }) {
      if (type != 'jobType') {
        this.queryParams.jobType = ''
      }
      if (!book) {
        return
      }
      if(value == null || value == ''){
        this.dataSource[3].options = []
        return
      }

      let businessInfo = this.businessNameList.find(item=>item.businessName == value);
      getByBusinessInfoId({
        id: businessInfo.id,
      }).then((res) => {
        this.$nextTick(() => {
          this.dataSource[3].options = res.data.map((el) => {
            let obj = {
              label: el.typeName,
              value: el.id,
              key: el.id,
            }
            return obj
          })
        })
      })
    },

  }
};
</script>

<style scoped lang="scss">
  .shopping{
    line-height: 32px;
    padding: 16px;
    .shopping-top{
       display: flex;
       justify-content: space-between;
       padding-bottom: 16px;
      .shopping-title{
        font-size: 16px;
      }
      .shopping-add-btn{
        width: 88px;
        height: 32px;
        padding: 0;
        background-color: #1890ff;
        color: white;
      }
    }
    .flex-acenter{
      display: flex;
      align-items: center;
    }
    .more-width-20,.more-width-full{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
    }
    .more-width-20{
      width: calc(100% - 20px);
    }
    .more-width-full{
      width: 100%;
    }
  }

  .add-dialog{
    .add-items{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-form-item {
        width: 48%;
      }
      .el-select{
        width: 100%;
      }
      ::v-deep .el-form-item__label{
        line-height: 22px;
        padding: 0 0 8px 0;
      }
      .el-cascader{
        width: 100%;
      }
    }
  }

  .hide {
    ::v-deep .el-upload--picture-card {
      display: none !important;
    }
  }

  .imageUpload{
    ::v-deep .el-upload--picture-card{
      line-height: 148px;
    }
  }

  .videoUpload{
    ::v-deep .el-upload--picture-card{
      // line-height: 80px;
    }

    ::v-deep .el-upload--picture-card>div{
      position: relative;
      .success {
        position: absolute;
        top: 0;
      }
    }
  }
</style>